The Project
Petals is an imaginary trendy flower catalogue mobile application that I created as part of my Google UX Certification course on Coursera.
My Role: As the sole UX designer, I designed this project from inception to final design through empathizing, research, ideation and UX design principles.
Applied Skills: Competitor Analysis, User Personas, Journey Maps, Usability testing, Interviews, Affinity Mapping, Wireframes, Prototyping
Achievements: Designed a quick, well organized and easy to use mobile application for a trendy flower catalogue shop.
Learnings: Providing users with an interface that is simple, clean, and straight to the point, helps any complex and overwhelming feelings that come along with purchasing flowers on an app. Offering curated bouquet collections and filtering options gives users the confidence when gifting flowers.
Choosing the perfect bouquet for the right occasion can have many restraints that create user pain points. Many flower shops do not have access to an online or in-app browsing and ordering feature. Online competitor apps are very complex, overwhelming and cluttered with confusing user-flows. I was tasked with providing a mobile application that would allow shoppers to find quick and easily understandable, flower bouquet options that would help them confidently gift the perfect bouquet, on time, every time.
Context
How to design a flower catalogue app that helps shoppers feel confident while purchasing flowers. They need a quick and easily understandable catalogue to deliver or pickup flowers.
The Problem
Petals is an imaginary trendy flower bouquet shop that provides bouquets for shoppers who want to buy them for either themselves or as a gift.
Target users are mid-older adults interested in buying flower bouquets conveniently from their mobile device.
The Client
My Goal
Design a Hi-Fi prototype for mobile application with filter options, pickup and delivery, and curated occasion options for quick picks
The Process
Research
How can I create an online catalogue that meets my users needs and solves their pain points? Who exactly is my user?
To begin the process of empathizing with my user, I decided to first conduct user interviews so I could better understand who exactly they were.
With the goal of understanding who buys flowers and why, how these shoppers made use of ordering flowers online, which features they thought were most important, and the pain points they were experiencing when ordering flowers, I interviewed five shoppers who regularly buy flowers throughout the year. I wanted to understand how the users answers would vary depending on their flower knowledge and occasion they were needing to buy flowers.
In summary: when target users shop for flowers online, they have a desire to feel confident that what they are ordering makes sense for the occasion. They also want certainty that the bouquet is in stock and ready to be shipped or delivered by the day and time they need them.
User Interviews
To get a better understanding of the competitor landscape, I conducted analyses on two direct and one indirect competitors of the most popular flower catalogue apps on the market. While I found that they all provided a wealth of information for shoppers to search and order flowers, there was a lot of information overload with cluttered user flow. This could prove overwhelming for some users, especially for those who are not experienced in buying bouquets. Along with 1800Flowers and Proflowers (pictured below), I also reviewed Bleems, an indirect competitor due to location constraints.
Competitor Analysis
Company:
1800Flowers
Notable Feature:
A fill and search feature on the homepage that allows users to choose exactly what they want.
Company
ProFlowers
Notable Feature:
A very simple, clean look that makes the user feel stress-free and organized while shopping.
Key Findings & Insights
The user interviews helped me understand more about the needs and frustrations of my users and where there were wins and gaps in the competitive market. I was able to pull a few key findings that would help shape my project:
Many users expressed how they wish they could pick out exactly what they wanted or at least filter by cost for those on a budget. I decided I should take a simplistic, easy, and accessible approach with options to filter flowers by cost, type, and occasion. I also wanted to include a '“in stock” feature.
Simple and quick
Users showed to be easily frustrated by time or location constraints. Flower shops were not always open late to go in person. I decided that adding an option for delivery and pickup with specific times and days would solve this problem.
Pickup and delivery options
The average flower shopper is not experienced in knowing which type of flowers are best for which occasion. I knew I needed to add a supported feature so that users could feel confident that the bouquet they chose was the most appropriate.
Education
Finally, I created user stories so that I could better understand the potential needs of flower shoppers, to help decide on functional requirements for Petals.
As a flower bouquet shopper, I want to order flowers quickly and confidently so that I can receive or pickup my flowers on the exact day and time I need them.
User Stories
Define
One of the key findings from my user research was the fact that users of varying career background have different needs. Three user personas were created (final one pictured below). These user personas helped remind myself throughout the design process what the needs and frustrations of my users were, and to maintain a user-centric focus for the duration of the project.
User Personas
Why do users need to confidently and quickly order flowers online?
Problem Statement
Flower bouquet shoppers need a way to confidently find quick and easily understandable flower bouquets online for any occasion, because they need to know in advance if the flower shop has what they are looking for and can deliver or pickup at a certain time.
Journey Map
Finally, I created a journey map for each persona. This gave me a clear picture of the steps that the user would need to take to get to their final goal, and how to deliver this goal in the most effective manner possible.
Core Features
With a better idea of my user and their needs, I identified and defined three core features that I wanted to focus on for the product.
Filter and Browse
A “search” feature on the homepage that would allow users to search exactly what type of bouquet they want by a certain date.
Create curated collections for each major holiday and occasion to make the process breezy for those users who are looking to the least amount of work.
Curated Occasions
An account page that gives access to view current and past orders with delivery or pickup times
View Current and Past Orders
With these core features in mind, I created a user flow to gain insight as to how users might expect the content to be organized and displayed.
User Flow
Ideate
Since simplicity and ease of use are one of the biggest goals for Petals, the number of screens were kept to a minimum to ensure an accessible user flow. I started with pen and paper wireframes and created multiple versions of each screen until I found a combination of features and elements that I thought matched the users needs and that would be as intuitive as possible.
Wireframe Sketching
Wireframe Sketching
Blockers:
My initial paper wireframes included both a footer menu and header menu. I later realized this was not a function that was necessary to have both and I opted to create a cleaner, simpler design with just a footer.
For the order preview, I had originally thought this area would be the best place to have the user choose a delivery or pickup date and time. After conducting usability testing and observing other apps that I believe have great, intuitive user experiences, I decided to create an entirely separate page that pulls up with the date and time options on the checkout screen.
My goal for the homepage wireframe was to offer multiple different options on how to find a bouquet. I wanted the process to be as simple and quick for users to find what they need.
Low Fidelity
Homepage —> Browse —> Product Page —> Current Order —> Checkout —> Confirmation Page
Search option for users who know exactly what they want.
Shop by occasion for users who need guidance in what flowers were most appropriate for an occasion.
In this product screen, I wanted to present the bouquet in a different way then the competitors I had done research on. I added mini icons for watering, sunlight, and type of soil needed. (a later iteration, I removed the soil icon because it was a feature that I found not many users really cared for). I also wanted to make sure the user could see if the bouquet was in stock or not. If it was not in stock, I would put a backorder date so they could plan ahead.
Added an add note section so users can personalize their bouquet
Test
Usability Testing
I conducted two usability studies where I organized my findings into themes and then created insights that were actionable. These usability tests were able to help me refine what users were finding useful, and keep expanding upon what needed to be reworked.
Key Findings
Round 1 Findings
Round 2 Findings
Iterate
After gathering all the feedback from the usability testing, I began to iterate my designs.
I made changes based on the user feedback and then reached out for additional feedback from some seasoned mentors. I created new, high-fidelity version of the app that featured more white space, clearer lower-case text, and combined certain screens to be more concise.
To this design, I applied the Gestalt Principles, color theory and made us of grids to ensure consistency within the entire app.
Accessibility
To these changes, I also made sure to add accessible design features in order to meet WCAG requirements
WCAG Level AA
Originally, there were some colors that were not accessible against certain text. I went back through my designs to ensure all color contrast were AA compliant.
Language button
Originally, the app was created with only English as the main language. I then went back and added a language button on the homepage underneath the logo.
Larger icons
Originally, the icons were smaller and not as visible. I went back and made them larger and easily clickable.
Final Product
After many tests and iterations, my final product aligned with all of the objectives I had set in place- it includes three core features necessary for users to confidently shop for flower bouquets easily and quickly, while appearing visually appealing and simple to use.
High-fidelity Prototype
My final step was to create a high-fidelity prototype for mobile. Follow the link below to access the Petals prototype.
Conclusion
Challenges
My biggest challenge throughout the process was making the checkout process as simple and quick as possible. My usability tests revealed a lot of confusion around the checkout flow. At first, there were too many screens that users had to navigate through to get to their final order confirmation. I smoothed out the process by combining screens together and simplifying words so it would not feel so cluttered. I spent a lot of time creating iterations that would provide the users a non-hassle, stress free way to order their flowers.
I also was challenged in time management of the small details, such as drop-down menus and designing interactive calendars from scratch.
What can be improved?
For the future, I would like to manage my time better with using components that have already been created in other design systems. This will help to cut down my time and focus more on solving the larger problems, like checkout process.
I would also love to find a larger usability testing group that includes people outside my network with more diverse age brackets, race, abilities, and gender. I also would like to add a feature that includes a chat button with a virtual assistant where the user can design their bouquet from scratch or choose to swap out different flowers in their bouquet. With that, adding in more personalization such as various vases and bows to choose from.
Ready to elevate your ecommerce shop?
In order to create the best client experience, I only work on one project per month. Apply now to work together!
