PROJECT: Flower Basket ROLE: Visuals, Interactions, Research DURATION: Fall 2022 (Oct-Nov)
This project was created in tandem with the Google UX Design Certification course through Coursera. The floral business and app discussed in this project overview are fictional, however, the design thinking process of creating the app was real.
The customers of the florist shop, Flower Basket, find the store’s location to be inconvenient and a hassle to get to. The official Flower Basket app is designed to provide a hassle-free browsing, purchasing, and delivery experience by blending traditional catalog browsing with intuitive UX design. The Flower Basket app is a great way to check the store’s inventory and schedule recurring deliveries from the convenience of your smartphone. By designing a simple and accessible interface, we feel that anyone can use it.
In Flower Basket’s design process, I opted for a goal-directed design approach that helped me move along through the timeline smoothly. Qualitative research methods proved to be the most effective during the design process, most notably simulated user interviews, competition scoping, and usability testing sessions. To begin the process, I began by setting some baseline goals and asking some generic but important questions.
● I want to understand how a typical user goes about looking for flowers from my florist
● I want to understand all places people usually go to buy flowers
● I want to understand the frustrations people have when locating and purchasing from a florist
● "What do our users need the most in a product like this?"
● "Who is our primary audience?"
● "Which users are the most important?"
Meet the Users
Apu is a middle-aged business owner who loves his work and loves to care for his wife and children. Flowers are an important part of keeping Apu’s house grounded in nature while also providing a beautiful gift for his wife. However, he does not have time to drive to the florist shop, and when he does, he dislikes dealing with the staff who have difficulty understanding him with his accent. Apu wishes there was a quicker and more convenient way to purchase flowers.
Agnes is a widowed and retired entertainer. She spends her days tending to her garden and creating floral arrangements. While gardening and floral arrangements are her passion, her arthritis and bad back keep her from doing them consistently. She wishes there was an easier way to browse and receive flowers instead of driving to the florist across town.
Key Path Scenario
The key path scenario imagined for Flower Basket would be the simple browsing and purchasing of any desired flower within the store’s inventory. Designed to be an online catalog, the Flower Basket app makes browsing and checking out as easy as possible.
Creating a Framework
To better understand how a customer might go about making a purchase on our app, I designed a user flow intended to make the core experience as simple and intuitive as possible. I also considered the necessary features of the app that would help more experienced users and those with disabilities.
Working through a couple of preliminary paper wireframes, I felt as though the basic components of the app were beginning to come together already. Since these were my first-ever wireframes, I was more focused on the visual design rather than the user flow and navigation.
Converting the paper wireframes into digital was a seamless process, but adding interactions with the buttons and creating an organic user flow proved to be difficult at first. Some elements looked nice but they didn’t necessarily function properly or provide a smooth user experience. Polishing the lo-fi prototype to feel like a real app was an arduous task but ultimately rewarding in seeing how a simple sketch could be brought to life.
The final design of Flower Basket brings together the research, test studies, and wireframes created throughout the entire process into one function high-fidelity prototype. Combining the experience of flipping through a physical catalog with browsing an online store, the Flower Basket app features a simple and intuitive design intended to be usable by a wide variety of user age groups. While the product may not be official, it presents itself as professional and fully capable of entering the development stage.
Keeping an earthly color palette, I combined a yellowish white with a highly saturated green and a deep earthly brown to create a harmonious and calming color palette. Approaching UX design for the first time, it was highly enjoyable creating elements for all aspects of the app but stressful in making sure that every little piece was aligned correctly and matched up with each other. The chosen typeface, Neue Kabel, brings a contemporary and organic look while grounding the app in legibility.
Progressing through Google’s UX design process for the first time was much longer and more tedious than I would have guessed. I found myself diving deeper into concepts of user pain points and accessibility more than ever, and I believe this caused me to become more engaged with how I design. The main difficulty for me was successfully merging my already established background in visual design with my newly learned understanding of user experience. It was uncomfortable at first, but as I progressed through more exercises and witnessed how my designs began to transform into recognizable territories I’ve seen online, I began to feel more capable and brave as I started to introduce my own spin onto already established concepts and ideas. This app is nowhere near perfect but it’s a good start and a project I’m proud to share with the world.