Merida Blooms: Designing A Floral Arrangement Preview App
'Merida Blooms' is the UX design project I completed as part of the Google UX Design Professional Certificate in 2022. The program encourages designers to follow the 5 stage framework of the design thinking process, requiring multiple user-testing and iteration phases before final designs are arrived at. As the sole proprietor of this hypothetical florists' business, I had the freedom to create a unique design system & brand identity, building it from scratch into the mockups seen above.
The User Problem
It can be argued that part of the enjoyment of the floral arrangement activity comes from visiting a florists' onsite location and hand-picking flowers to curate a bouquet from. However, this norm excludes individuals who may not be able to visit a florists' shop due to physical, geographical or temporal limitations. Individuals without personal vehicles or a means of transport, and individuals with busy daily schedules are examples of users that may benefit from an online alternative.
Add to this the fact that 77% of purchases of cut flowers are made with a reason/occasion in mind, with birthdays and anniversaries being the most common reasons. Users who live apart from their loved ones have no choice but to search for online bouquet delivery services to send gifts on special occasions. The problem with most/all online bouquet delivery services however, is that they often don't allow for detailed customization or curation of bouquet arrangements. In other words, there are little to no true online alternatives to a florists' shop where detailed customization & delivery of bouquets is a core feature of the experience.
The Goal
The goal was to design an app that provides a solution for users wanting to curate personalized, thoughtful bouquets for loved ones from the comfort of their own homes without needing to visit a florist. It essentially brings the offline florist experience to an app that can be accessed from anywhere in the United States, and handles delivery as part of the service.
My role:
Lead UX designer, UX researcher, & product owner
My responsibilities:
User research, ideation, wireframing, prototyping, user testing, UI design, interaction design, motion design
User Research
I conducted phone interviews with a diverse group of potential users recruited through an open-call for participants, and organized my findings into empathy maps to pinpoint the user's needs and frustrations. A primary user group identified through this exercise were those who resided far from their homes or from their long-distance partners or family.
Conducting these interviews also revealed that in addition to geographical constraints, many users were constrained by the amount of free time they had in their busy schedules to search for or plan meaningful gestures for their loved ones.
To summarize, the 3 user pain points my product design would seek to address were:
Physical/geographical constraints: Users without a means of transport, users with permanent or temporary physical disabilities, and users who do not live within close proximity to their intended recipients cannot easily visit a florists' shop.
Lack of time in a busy schedule: Users with busy daily schedules often don't have time in their day to make a trip to the local florists'.
Lack of personalization/customization options: Many of the existing online bouquet delivery services on the market limit the personalization and thought that can go into the gift, thereby failing to serve as adequate alternatives to a florists' shop.
Competitive Audit
To get a better idea of existing gaps in the online bouquet delivery services market, I completed a competitive audit exercise to see where my potential competitors succeeded and fell short on their user experiences. Each competitor was rated on a 5 point scale on my first impressions of their site, interactions (navigation, accessibility and user flow), visual design and content.
Wireframe Sketches & User Flow
Once I had a clear picture of the user problem my product was going to solve, I began sketching the layout of the main screens on my app. I did this on paper and mapped out the user flow before moving on to digital wireframes.
Digital Wireframes & Low Fidelity Prototype
With my user flow mapped out and my paper wireframes ready, I moved to transferring my concept wireframes onto Figma. Here, my screens began to take form and I started noticing gaps in my user flow where I could fit additional screens, pop-ups and transitions to make the user flow smoother and less jarring.
PS. The wireframes pictured below also include a few screens I made after my usability study with my low fidelity prototype, such as the 'introductory/transition screen'. The process for coming up with these screens is detailed further down.
An example of a gap I identified in my own user flow is that while drawing my paper wireframes, I hadn't considered the need for a transition screen which would introduce the user to the activity they were about to begin. I added this transition screen to my digital wireframes, and a confirmation page which would allow the user to loop back to the home screen upon successfully placing an order for a Merida Blooms bouquet.
Above is a closer look at the user flow from the main floral arrangement activity. The user starts by picking a base layer (greenery), which they can then 'add to vase' after reading a small description of the plant which comes up as a card overlay.
Mapping out the digital wireframes allowed me to brainstorm what the interactions on the app would look like. Most triggers would be 'on tap', with the next screen transitioning in through a move-in animation from the right side of the screen. The idea behind this transition was to simulate the feeling of moving from left to right through a linear, easy-to-navigate path. This would be further enhanced by a progress bar which I would later add in my high fidelity designs.
Usability Study on Low Fidelity Prototype
With my low fidelity prototype fully functional and ready, I was in a good position to test the usability of my designs with potential users.
I recruited 5 friends and family members (of age groups varying from 18 years old to 59 years old) to partake in a moderated usability study with me, where they were asked to attempt the completion of a number of tasks. Each study took place over a Zoom call, with participants testing the prototype from the comfort of their homes while sharing their screen for me to take notes on their click path, error rate, and ease of navigating the intended user flow.
There were 4 questions that my usability study intended to answer:
Is it easy and intuitive to arrange a bouquet on our floral arrangement app? Are the core functions (filtering and arranging) easy to find and understand?
Do users understand the way information on the app is organized and can they navigate to their desired page with ease from anywhere in the app?
Are there any blockers or areas where the user gets stuck or makes errors?
Does the app solve the user problems we identified of difficulty choosing or arranging flowers without guidance or a preview feature?
The KPIs used to measure the usability and effectiveness of the design were:
Time on task
User error rates
System usability score
Conversion rate (successful completion of the task)
Once 5 usability tests were done and dusted, I organized the user feedback received into clusters of distinct themes, for both positive feedback and areas that could use improvement.
In all studies, users reported finding the floral arrangement task intuitive, straightforward and easy to complete. There were also no complaints about the cart, checkout and payment experience. However, there were 3 areas of improvement noted which I would incorporate when working on my high fidelity prototype. These were:
Back-tracking and making changes to earlier selections: A few study participants expressed a desire to navigate backwards through the floral arrangement task in order to change/edit their selection of flowers. Though they were able to do so using the back button, this took very long as they had to swipe through several screens in order to return to the desired page. Once they finally did, they would have to repeat the tasks already completed in order to return to their position down the task flow. This was a bad user experience, and the biggest priority area to make improvements on.
Auto-fill on personal details: Users expressed the desire to have an auto-fill option on the checkout/payment pages to save time.
Introductory screen and progress bar: Some participants reported that they had never previously done a floral arrangement activity, and were unsure of what to expect or how long the task would take to complete. For this, I decided to work on an introductory (transition) screen, as well as a progress bar showing the user how far along they were on completing the activity.
Brainstorming a Solution to the Back-Navigation Problem
Backwards navigation on the app, as described above, was in desperate need of a solution. A simple back button wouldn't work- it made navigating backwards a tedious task. To solve this, I consulted a friend (coincidentally, also a product engineer) to help me brainstorm viable solutions.
We considered reasons why a user would want to navigate backwards during the floral arrangement activity- to edit previous selections was the only use-case for a back button.
Based on this, I decided to remove the back button entirely from the floral arrangement activity screens. Instead, I introduced a button labelled 'Edit Previous' which would appear on each 'Vase' screen. Tapping this would open up an overlay card asking the user to choose what they would like to edit.
A screenshot from my final mockups depicts what this solution came to look like:
Should the user wish to back-track to edit a previous selection, they would simply need to click the button labeled 'Edit Previous', choose the part of the floral arrangement they want to edit, and once they've edited and are satisfied with the new selection, they'll be returned to their original position on the vase screen without needing to repeat any steps.
High Fidelity Designs: Creating the Merida Blooms Design System
With the usability study completed, I was ready to start working on my mockups and high fidelity prototype, where I would implement the changes brainstormed earlier in the usability studies to my designs.
Color
The first aspect of the design system I pieced together was the color. Applying concepts of color theory and color meanings, I wanted my designs to incorporate shades of both green and pink. Green is symbolic of nature and plants, whereas pink radiates femininity, romance, and warmth. A 2016 study on consumer trends found that 80% of people purchasing flowers were women, so employing the color pink, which is generally associated with femininity (read: the pink tax, breast cancer awareness, PINK by Victoria's Secret, etc.) was a conscious decision.
Green and pink also happen to be on opposite sides of the color wheel, making them a great example of a complementary color scheme and pleasing to the eye.
I applied the 60-30-10 color rule as seen below on the checkout page, where 60% of the screen is the background color (a light pink shade with hex code #F7EBE9), 30% of the screen being a grey-green shade (#ADBAB8) used for the top and bottom navigation bars, and 10% of the screen being a dark magenta (#B8516A) used for call-to-actions and interactable buttons.
I also reserved a soft white (#FBF8F8) for input fields, and a navy blue (#3E455C) used sparingly for page titles and header text. The remaining text throughout the app which are lower in the visual hierarchy than the header texts remained a soft black (#151515).
Typography & Buttons
With the colors out of the way, the next visual design aspects to work on were the typography and buttons. The button designs I had in mind largely influenced the fonts I ended up using.
For the Merida Blooms logo, I chose the typeface Freehand. All other text on the designs would be from the Castoro (serif) or Inter (sans serif) typefaces. As a general rule of thumb, I used Castoro for all headings and titles throughout my designs, as well as on the blue 'See All' and 'View All' buttons.
For all texts that didn't fall into the above category, I used the sans serif font Inter. This rule applies to the call-to-action buttons throughout the floral arrangement user flow. Below are the guidelines I established for the font-colors and typeface used on each background object color.
Accessibility Considerations
Thinking back on it now, I must have revised my color palette at least six times throughout my design process. The colors I had chosen initially- although looked great to me- I later found out were inaccessible after running the color schemes through accessible-colors.com.
After a few tweaks on the hue and saturation of my call-to-action buttons, resulting in the above finalized colors, I was happy to find that my new colors were AA compliant and accessible to all users!
Final Mockups & High Fidelity Prototype
After nearly a month and a half of reworking and editing my high fidelity designs (I went through 6 different palettes, and re-organized my page layouts a few too many times), I was finally in a position to put my tools down. My final mockups- and prototype- were ready.
Below is a showcase of what my final designs looked like, and some discussion on what my solutions to the user feedback collected through the usability study were.
Introductory (Transition) Screen for First-Time Users
During the usability study, 3 out of 5 participants reported having no clue how floral arrangement worked, as they had never done it before. To cater to first-time floral arrangers, I decided to add a transitionary screen that is displayed on the first time the 'Create' button is tapped by the user. This screen briefs the users on the activity they are about to partake in, and the user can toggle a checkbox if they don't wish to see this screen the next time they initiate creating a new bouquet.
Introducing A Progress Bar
The usability studies I conducted brought light to another issue: that many users (particularly those that had never done floral arrangement before) had no visibility on how much time the activity would take or how far along in the process they were.
I decided to introduce a 3-step progress bar which depicts which of the 3 stages the user is currently on. This would let the user approximate how much time is left to complete the activity, and how much has been completed already. It also acts as positive feedback for the user, as it signals to the user that they're on the right track.
Final Touches for Greater Accessibility
To improve the user experience for all users, and especially those with accessibility barriers, I introduced measures into my designs to cater to those who experience difficulty reading, or interpreting colored images.
These included text-to-speech features, descriptive iconography to support text, and including colors in the names of plants rather than as an image alone.
Merida Blooms: The Full User Flow (Returning User)
With the final mockups ready, improved back navigation, an introductory screen and progress bar ready, I moved on to the prototyping stage.
Here, I opted to introduce subtle animations to make the product feel more alive. For the most part, I used 'move in' animations from the right to indicate forward movement through the user flow, and 'move out' animations towards the right whenever the user navigates backwards through this flow (for example, when going back to edit a previous selection).
Below is the fully animated user flow for a returning user, as indicated by the absence of the introductory screen.
Final Thoughts & Going Forward
If my other UX projects taught me how to work well in a team, this project taught me... pretty much everything else under the sun.
Though I was no stranger to user research- having conducted it several times myself as a product designer in my previous workplace- I had never before had the chance to work on wireframing, prototyping and UI. What was once a task handed over to a senior UI designer was now my own responsibility.
Wireframing, prototyping, and building the design system of this hypothetical florists' business was the most fun I have had in any UX project, and something I will definitely be practicing more of.
Strategic thinking, along with accepting the help of another person (or team member in the future) to brainstorm solutions to problems raised during the usability studies are what brought me to the successful completion of this project. Of course, I would need to conduct another usability study to truly gauge the success of my designs.
I was particularly proud of the solution I came up with to the back navigation problem, as well as figuring out how to animate things like interactive accordions (see: calendar) and the progress bar.
Overall, this project challenged me to think critically about every aspect of the users' interaction with a product, with the mindset that there is always something to improve- whether it is a quality of life enhancement for users, or a necessary feature that removes barriers to a good experience. Critically analyzing your own designs every step of the way, as well as accepting critique from those around you- be it users or your team members- will always result in a better experience for users, the client/company, and your own growth.