Overview
Throughout the Google UX Design Certificate, I worked on a bouquet browsing app for a trendy florist I imagined called Flora. The app will help users save time, remove any discomfort that arises from shopping in-store, and create unique experiences with their loved ones. The intention of Flora is not simply a commerce app, rather it strides to provide a deeper connection those who are most important to us.
Project Details
My Role
UI/UX Designer, Research
Timeline
5 weeks
Deliverables
Hi-fi prototype, design system, product concept implementation
Understand the Problem
People are searching for new ways to connect with others.
Ever since the pandemic began, Flora, a trendy flower boutique, has seen a decrease in customers coming into their store. Even though virtually all commerce has returned to in-person shopping options, the long-lasting effects of the pandemic have made it so that online options are increasingly prevalent. While online platforms have helped increase customers' access to products, it has increased the pace of life and time spent away from friends and family. Noticing the disconnect between the desire for meaningful communication and reduced in-person interaction, Flora believes they can aid this issue through a new app for their store. They would like to focus on two main goals:
-
Easy and efficient searching: When customers come into the brick-and-mortar shop, they can see the entire selection of bouquets at a single glance. Creating an app that mimics this quality will aid customers in finding the perfect gift without wasting too much time on navigating through the digital platform.
-
Welcoming ambiance: Customers have shown an increasing preference for shopping from the comfort of their own home. Flora wants to create an application that will give customers an in-store shopping experience without all the hassle and inconvenience that can come with physically going to the store.
Competitive Audit
Competitors lack search efficiency and a strong brand image.
While I compared general aspects of the apps, I focused on some features that would be crucial to addressing Flora's main purpose. In particular, I looked closely at navigation flows, search options, and help options. Positive features have a "+" and negative features have a "-".
User Research
Customer Personas
After user and market research, I uncovered key insights on younger demographics:
-
Enticed by chic and trendy stores instead of larger chains
-
Prefer digital shopping due to their increased engagement with technology
-
Can be overwhelmed by too many options
-
Might get anxious when going to a store in person
-
Want to connect with people who are geographically far from them
Julia is an ambitious editor who needs a customizable bouquet browsing app because she wants to cater to her family's unique tastes. If possible, she would like to share her customization ideas with her family.
Juan is a dedicated consultant who needs an app to browse flower bouquets because he doesn't have the time to go to a physical store. Additionally, he's nervous of needing to ask for help in person.
Customers want to feel efficient and understood when they shop.
These pain points guided my design process in three different different ways:
-
Time: I had to create a design that simplified the process of finding the perfect bouquet. I would have to include search options, filters, featured items, and category options without going overboard.
-
Relationships: I should include a way to make people's bouquets more personalized. The main feature that I wanted to include for this was the ability to customize bouquets in the app and collaborate with others.
-
Comfort: I understood the necessity for online help options. This could resolve potential uncomfortable feelings that arise from going to a store in-person.
Design Process
Setting a user flow
By combining different pain point solutions from the user research, I created an overarching user flow that begins with opening the app and ends with ordering a bouquet. This was the idea I started with, but it changed a bit after I conducted a usability study of the prototype.
Early Sketches
The five wireframes on the left were potential designs for the home page. I made sure to include some of my favorite features I discovered in competitors' apps such as pre-determined categories, filters, and featured items. The five wireframes on the right were designs for individual bouquet screens.
Lo-Fi Prototype
This prototype is missing a lot of text and defining features, but it was necessary for conducting a preliminary usability study.
Usability Study
Beginning the search for necessary improvements.
Once the prototype was ready to go, I began a usability study to find places in the app that users might have a difficult time navigating through. Once the study had been completed, I created an affinity diagram to better analyze trends in the data. From this, I was able to select key themes and insights for improving the design of the prototype.
3 key themes arose from the usability study.
Users were confused by the use of “single” under the customization option.
-
3 out of 5 participants thought “single” referred to the amount of bouquets they could order.
-
2 out 5 participants questioned if they could decide to share their customization page with others AFTER they had begun customizing.
Users were frustrated that the checkout flow could not go backwards.
-
3 out of 5 participants wanted to return to the bouquet screen in the middle of their checkout flow.
-
2 out of 5 participants disliked the fact that the "checkout review" screen came before they entered payment/delivery information.
Users did not make use of the search function.
-
5 out of 5 participants only looked at the featured items.
-
3 out of 5 participants did not know if the banner and individual cards were both featured items.
-
2 out of 5 participants did not even see there was a search feature.
Improvements
1
Clarifying the customization and collaboration option.
-
Removed the dropdown menu to select customization type and replaced it with a singular customization button.
-
Once on the customization screen, users had the option to share to collaborate. Screen 3 shows sharing options, and screen 4 shows what it would look like when two users collaborate.
Before
After
1
2
3
4
Providing error correction opportunities during checkout.
-
Added back arrows to the top left parts of the screen to allow customers to go backwards whenever they wanted.
-
Changed the order of the checkout flow to have the order review page at the very end.
2
Before
After
1
2
3
4
3
Optimizing and promoting search features.
-
Removed categories at the top of the page to guide users to use the search feature.
-
Flora's "I need something for...with..." search format guides customers with flower and occasion options. Users still have the option to type in something manually at the top of the search page, but the additional format helps imitate the feeling that a user is getting help from a person at a store.
Before
After
1
2
3
The full version of the second prototype is available here.
Final Design
Design System
Because Flora is a high-end flower boutique, I used muted earthy tones to capture themes of luxury and nature. I also wanted the app to have a clean feel, so I looked for bouquet images that had consistent white and simple backgrounds.
Hi-Fi Prototype
Creating a high-fidelity version of every screen was quite simple because I had the framework ready to go. However, it was one of my favorite parts of this case study because of its requirement for customization and design choices. The final version of the high-fidelity prototype is visible below.
Final Thoughts
Next Steps
While I am very proud of the final design, I know there is always room for innovation and improvement. There are a couple directions in which I would like to take this design.
-
Consider the accessibility of the app. Should there be clear options for screen readers? Do the colors have high enough contrast enough for users with low visibility? Making sure app can be enjoyed by everyone should be a priority.
-
Conduct a pre-launch study. Are any kinks that are present in the high-fidelity design? Is the app achieving the main goals it set out to reach?
-
Invest more time into fully building the brand for Flora. How would I design the logo, take homogenous photos of bouquets, create mockups for delivery boxes, and write text?
Takeaways
This case study was very special to me because I completed it as a part of the Google UX Design Certificate. I had a good sense of what the UX design process entails, but taking this course gave me a much more in-depth understanding of the different parts of the process. I learned that there are many different types of UI/UX roles, and I found that my favorite parts were usability research and design.
Another takeaway I had was that sometimes less is more. While first creating wireframes, I added as many search and refinement options as possible because I thought that would help the user. However, after the usability study, I saw that users need something more simple and eye catching for them to actually make use of a function.
Overall, I truly enjoyed completing this personal project, and I look forward to using the skills I learned in future experiences.