Pet Super App Startup Consulting

UX Workshop and Mobile App Design and Development

MyFriend

myfriend logo

MyFriend is a Thai startup that focuses on developing a super app for all things pet-related—an all-in-one web platform catering to the diverse needs of pet parents, pet-related businesses, and the broader pet-loving community. As a full-service platform, MyFriend is committed to enhancing the lives of both pets and their owners with a comprehensive suite of features, from health tracking and veterinarian appointment scheduling to a community space where experiences can be shared. The platform also serves pet-related businesses, organizations, and independent service providers in the pet industry, allowing them to showcase their services and facilitate bookings.

We were actively involved in the early stages of the project, providing consulting services and workshops. Eventually, our team was selected to develop the mobile app MVP and its backend. Our initial goals included drafting the project's requirements specifications, defining the platform architecture and data model. Following that, we conducted UX workshops to create sitemaps for the front-end interfaces and dynamic wireframes for every screen. After the initial consulting phase, we extended our services to actually develop the MVP. MyFriend continued to place their trust in us, opting for our proposal. The MVP was successfully launched at the beginning of 2022, and we subsequently handed over the project to MyFriend's in-house design and development team.

Team
1 Architect
1 UX/UI Director
1 Web Designer
3 Mobile Developers
2 Back-end Developers
Methodology
UX/UI Workshop
Agile methodology (MA)
Tools
Lark
TeamWork
Adobe XD
Technologies
PHP, Symfony, Flutter
Timeframe
1 year

Initial consulting: Discovery Workshop

In order to help the MyFriend team start the project, we first offered consulting to brainstorm ideas with them and write the initial documents to structure the development plan.  We offer this through workshops to dedicate time to studying the project, analyzing the processes, and creating wireframes for the interface screens. Concurrently, we assess the optimal technical solution for the project. In this case, we offered two workshops, which consisted of a discovery workshop and a UX research workshop. A ‘workshop’ entailed a set number of hours designated for interactive meeting sessions between the MyFriend team and the Outsourcify team, planning these sessions (roadmap creation), analysis work conducted by Outsourcify, and document preparation and writing, ideation, flowchart detailing, wireframing, etc. by Outsourcify.

The deliveries of this phase were :

  • Discovery Workshops results: action plan, core features.
  • Requirements Specifications Document (more than 50 pages)
  • Data Model Document
  • Detailed requirements for the different User Interfaces: website, mobile app, client panel, pro panel.
registration scenarios

UX workshops

UX workshops included first UX research, defining user journeys and user flows, and detailing each feature and use cases, with the final objective of creating the whole sitemap of every user interface, to list all screens of the project. Then we continued with the wireframing of the hundreds of screens of the project, for the web as for mobile in many cases. In UX (User Experience) design, a wireframe is a visual representation or a low-fidelity blueprint of the frontend interface of the website, web, or mobile application. It is a crucial step in the design process that helps designers and stakeholders outline the structure and layout of a digital product before moving on to the more detailed design phases.

  • User Experience (UX) Workshop
    • UX research: we offer user research, competitor evaluation, customer insights, personas, and UX strategy
    • CX (customer experience) and User journey mapping: we research and execute user experiences across all touchpoints to understand the holistic journey of your users
    • Content Structure
    • Navigation and search strategy
  • Wireframing Workshop
    • Features and technical concerns (interactions, third parties)
    • Sitemap finalisation
    • User Experience wireframing: we work in an agile process and proceed with an iterative process nailing down the user experience of all page templates of the web app
    • Prototyping: we design a dynamic clickable wireframe prototype which can be tested with the stakeholders.
myfriend wireframe

Architecture and mobile app development

After the initial workshops and wireframing of the larger scale objectives, the MyFriend team decided to start the development of an MVP mobile application which main features revolved around :

  • Pet parent and pet profiles: allowing users to create a profile and a profile for their pet, including a calendar of events such as clinic visits and vaccinations
  • Monthly subscriptions e-commerce: the sale of monthly recurring subscriptions
  • Online shop: the sales of pet food a pet toys

The technical solution we chose was adapted to the need to launch the mobile app in a matter of months. As an e-commerce platform was needed to handle products and orders, we chose Sylius/Symfony as a basis and decided to build a cross-platform mobile app in order to quickly launch the app both on the Apple App Store and Android Play Store.

  • Mobile app: Flutter, a mobile app framework created by Google that allows developers to develop cross-platform for iOS and Android from one code source with a performance close to those of native apps and an ease of development.
  • Backend & Admin Panel: Symfony + API Platform + Sylius + MySQL database. The Symfony PHP framework will offer exactly the features needed while protecting the web app against security threats, API platform is a library for Symfony that eases the process of creating an API. Sylius is an e-commerce platform for Symfony and API Platform.
myfriend app

Mobile App Main Points

Technologies:
  • The app was developed with Flutter to help release it quickly on the Apple App Store and the Android Play Store
  • We started the development from the mobile wireframes and used Flutter UI, components
  • We then adapted the components to the design
  • We used the Flutter Provider package for state management.
Main Features:
  • User profiles and the possibility to add all their pets;
  • Pet profiles including medical info management for pets. Allowing users to input this information for later use with professional vets;
  • The shopping feature allows users to buy foods and services for their own pets;
  • Magazine: articles and news display the latest tips & tricks for pet owners.
Challenging aspects during development:
  • Display complex information that can be viewed by professionals and friendly enough to be input by users
  • Agile development to adapt to changing business model
  • Deliver a fully functional e-commerce mobile app in 3 months was challenging, but we achieved it!

Have a project in mind?
Let's start your project today

Contact Us
Have a project in mind?
Let's start your project today