UI/UX design, Concept
2019 March (3 weeks)
The client is a mobile-first startup that lets anyone have flowers, and bouquets delivered to anyone within an hour. By creating a seamless in-app experience similar to services like Postmates and Uber, they hope to continue to scale and expand by the end of the year.
The users are consumers and local florists. Consumers are a wide range of people from 20s to 50s who are comfortable ordering products online, they will on average use the app 1-3 times a year. The delivery process must be transparent to ease their anxieties.
This project was a part of a bootcamp and had to be completed within three weeks. I was in charge of market research, surveys, user interviews and rounds of user testing. Using the acquired information I could then transfer what I learned into the UI design for the high-fidelity prototype and UI styleguide for further use.
The discovery phase started with comprehensive competitive research and running a survey of 25 participants via UsabilityHub to identify common user struggles and needs. Based on that data, 2 primary personas and their use cases were crafted, followed by functionality ideation and moodboarding.
Common user struggles:
Common user motivators:
Have used the competitor services before:
69% used 1-800-Flowers
52% order flowers online 1-3 times a year
Other on-demand delivery app usage:
Based on the personas created, the use cases, as well as project constraints and stakeholder wishes, I have created 3 task flows for both the consumer and the floral businesses. Once the task flows were ready I created wireframes of 24 screens to support primary user goals, before testing them with 3 users and further refining designs based on the results.
Usability test objectives:
"I feel uneasy about inputting my credit card details into a new app, especially before I have seen what I’m going to be paying for."
Problems and Solutions:
Once the order is claimed, instead of a dropdown have one button to “CONFIRM FLOWERS READY”, that way once the bouquet is done, all the florist has to do is to press one button.
Move the credit card prompt to when the user is checking out instead, as well as enable the addition of credit card later through “My account” settings.
Low-Fi wireframes and proto
The deliverables for this project were UI style guide and a high-fidelity prototype. The color scheme was decided to have only one main color and be grey-based to make it adaptable to any content. Once the elements were designed based on usability best practices, a high-fidelity prototype was created. Running another user test with 2 participants uncovered new issues that were improved, as you can check from the following prototype.
It can be very beneficial to run quantitative research in the earlier stages of concept development, it can give you a solid understanding of who the users are going to be and what they expect.
When using surveys, structuring open-ended questions properly can help you also get insightful qualitative data.
Just because a certain user flow is used in one of the top products, doesn’t mean that users necessarily like it or that it will work well within your product.
One of the major parts for the next iterations is creating and testing a driver’s experience, how will they be notified and what should their experience on the app be?
Creating a working prototype according to specs and testing it in the real environment by both observing and interviewing users is crucial as it will show how all parts work together and what might need further rethinking.