Dual-Flow App:
Creating an MVP that Bridges Clients and Service Professionals
Product
Mobile Application MVP
Company
Confidential (NDA)
Duration
3 months
WOW
Agile Methodology
Year
2024
Team Members
UX/UI Designer (me)
Product Manager
Tech Lead
2 Developers
Situation
Collaborated with a multidisciplinary team to build a mobile app with an asymmetrical flow for two kind of users. A service provider and a client who is looking for a profesional to accomplish their goals. This MVP had to include a complex algorithm to match these users interests.
The main goal was to deliver a functional product to showcase it to a group of investors and scale the product.
I was the UX/UI designer responsible for enhancing the user journey of the app and the person in charge of the UI and platform aesthetic, basing it on the client's branding manual and expectations. I also created the first prototype in Figma, which ended up being the key to accomplish our main goal.
Challenge
- Design separate user flows for service organizers and client users, ensuring clarity in each interaction.
- Simplify the management dashboard for administrators to add services providers, manage events, and handle disputes.
- Create collaborative tools, like a chat feature for sharing photos and planning details.
Tasks
Worked closely with the Project Manager and Tech Lead to define the main features for the MVP. The first product definition was made by the PM negotiating with the Client. These requirements were given to me in order to make enhancements to the user journey, applying basic design heuristics to ensure a good user experience, balancing the limitations established by the TL, the time budget and the client needs.
I was in charge of the platform UI, basing my decisions on the client's branding manual, and attending their expectations.
Finally, I elaborated the Figma prototype which helped everyone get a better understanding of the product, but also the key to land the firsts investors.
Understanding
The client needed to automate a service that they were providing, manually. They were the nexus between services providers and the clients, matching by criteria similar characteristics and compatible goals. This business escalated to the point that they were unavailable to keep it together.
They needed an app that help them
- Reduce manual labor.
- Reduce friction experienced by their clients when searching for professionals.
- Reach new clients.
Admin app
In parallel, we worked on a personalized web app for the client to admin active events, client and service provider to fix any inconvenience that could occur in worst case scenarios.
This platform was simpler than the mobile app; in this case, we designed for a desktop breakpoint for the admin's convenience.
Process
The first wireframes were made by the PM in the definition with the Clients. To get a better understanding of the product flow and refine the app definition, I designed a user-flow for both users. In this process I already found several improvements to simplify the app, design a better user experience and start designing the finals screens:
Book an event
Added more visual elements on the event creation to help the user to know on which state they are.
1st Wireframe
Nav bar
Removed this element to prevent miss clicks and ensure the user is focused on one process.
Final Screen
Stepper
User can see where they are and also navigate through each step.
Search bar
Also a Dropdown to see all the options available and add some customized ones.
Home screen
Reduced tabs on the navigation bar, because there were redundant sections that would confuse the user.
1st Wireframe
Elements removed
Appointments, membership and the cart was removed. Some of these features were eliminated for the MVP and the other ones where part of the creating event flow.
Map & Calendar
Map does not make any sense on this stage, because the user is not creating a event yet. The calendar where moved to the nav bar.
Final Screen
Chat room
Added inside the navigation bar because there were more room now.
Calendar
Reduced tabs on the navigation bar, because there were redundant sections that would confuse the user.
1st Wireframe
Final Screen
Toggles
Theses toggles organize the events by status, on this case, the service provider can view on a glance the upcoming events.
Completed State
To have track of completed pasts events. This state was not contemplated.
Prototype
Once the flow was refined and had the client's approval, it was a requirement to build the Figma prototype that showcased the main app features and present it to future investors.
UI Kit
Final Result
Conclusion and Learnings
A user-flow in the initial stage of the project really moved the needle for the entire team involved. It maintained the project's focus and avoided inconsistencies in the design and development process.
The client received a functional MVP along with a first prototype in Figma, which helped them present their product and attract their first investors.
Communication was fluid within the team and with the client, which positively impacted the project when advancing with the designs and validating the screens with them.
