Floral Shop
Mobile App
I created a conceptual app while completing my Google UX Design Professional Certificate. The goal was to design an app for a floral catalogue, utilizing knowledge in UX research, design, and testing.
Role: Individual project; UX researcher and designer
Time: December 2021- March 2022
Tools Used: Pen and paper, Figma, Google sheets, Google forms
DESIGN THINKING PROCESS
Empathize
Define
Ideate
Prototype
Test
INTRODUCTION
Best Buds is a trendy florist offering beautiful blooms for customers in Atlanta, GA. Best Buds' is known for their unique arrangements and wonderful customer service. With the growing online floral market, Best Buds wants to expand their customer base by offering an app for customers to order flowers.
A saturated online floral market paired with an ongoing pandemic has reduced the amount of customers going to brick-and-mortar florist shops.
Problem
Create an app that allows customers to purchase beautiful floral arrangements via Best Buds mobile app.
Goal
EMPATHIZE
I conducted foundational research to learn about the users I'm designing for, gathering feedback on their perspectives about purchasing floral arrangements.
Methodology
For my initial survey to understand the user, I conducted remote, unmoderated studies with 5 individuals who purchase floral arrangements at least 2 times a year. I decided to utilize this research method to ensure it was accessible to our target audience, and would meet the needs of those who purchase floral arrangements.
Empathy Map
Using qualitative data, I mapped what the user says, thinks, feels and does to identify pain points in the floral purchasing process.
Persona
Taking what I learned from empathy mapping, I created a fictional persona that represents potential users.
Lilian is a creative, caring friend who needs an easy and accessible way to send flowers to friends and family. She wants to have more options when ordering flowers and wants to ensure what she orders is what is delivered.
Mapping Lillian’s user journey illuminated the need for users to have more control and more transparency in their floral purchases.
DEFINE
After crafting the persona, writing user stories, and considering edge cases, a problem statement was developed and the following pain points were identified.
Problem Statement
Lillian is a friend and busy professional who needs an easy way to send custom floral arrangements because she doesn't have time to go to a florist.
Pain Points
Upfront, Quality Product.
Users want to know what they are sending, and want it to be high quality.
Customization.
Users want to be able to add or change the arrangements offered by floral companies.
Budget-Friendly.
Users want affordable floral options.
Simplicity.
Users who don't buy flowers often want process to be simple.
IDEATION
Taking these user needs into consideration, I began the brainstorming process to find feasable, desirable, and viable design ideas.
1
Competative Audit
I conducted a competative audit with three national competators with mobile apps and found gaps that could be addressed.
Gaps
Competitor's apps do not have as many features as their websites.
Competitors have differing delivery fees and times working with third-parties.
Competitors do not offer much customization (other than vase) when you select an arrangement.
Competitors are all medium/large companies. No local businesses.
Competitors are not upfront about additional costs or delivery changes.
2
How Might We
How might we design an app that feels like you are designing a bouquet at a floral shop?
How might we design an app that allows users to make a more tailored, budget-friendly arrangement?
How might we design an app that provides a realistic image of what a final bouquet will look like?
Created a User Flow
3
Created a User Flow
Created a User Story
4
PROTOTYPE
Using what I learned about users, I began the design process of the app.
1
Paper Wire Frames
I began with paper wireframes to ensure we included all the needed elements. For the home screen, it is simple and describes the two paths users can take- making their own bouquet, or selecting one that has already been created. In this image, stars note what should be repeated in design after multiple versions.
2
Digital Wire Frames
Using Figma, I transformed my paper wireframes into digital wireframes. During this process I realized how busy my initial designs were, so I decided to pare down uneccesary elements to allow for larger text and more white space. My design qucikly evolved through the ideation process.
3
Low-Fidelity Prototype
The next step was adding interaction to my design, creating a low-fi prototype. Focusing on one user flow, the prototype takes the user through creating their own rose bouquet.
TEST
I conducted a remote usability study with 5 individuals, asking them to review the lo-fi app and give feedback on their experience.
Overall, users thought the process was easy, liked the customization options, and would use the app in the future. Though users seemed to have a positive experience with the app, the study showed a few design elements that needed further iteration.
"So, where is the lily?"
Increase font size
"Is this right? Am I supposed to do this? Is this where I go?"
Have better cues for selecting and adding flowers
"So, I can do both? Does the recording come with the arrangement like build a bear?"
Clear messaging options
REDESIGN
Using the data gathered from my surveys, the following changes were made to the Best Buds app.
Increasing font size (P)0 was my first design change, followed by cues to add flowers (P1). Finally, I decided after multiple iterations to remove multiple messaging options and focus on a written option for users.
As I increased text size and and made changes to selecting flowers, the design of the app changed to allow for better user navigation and experience.
Before
After
Before
After
1
Increasing text size
2
Flower Selection Changes
To give the user more information about the flower before selecting it for their bouquet, I added another page with flower details. Option to add flower on this screen.
After creating a high-fidelity mockup I conducted another usability study. I discovered three additional needs for the user: ability to find out about the delivery area sooner in the ordering process, search by price, and including a visual representation to show bouquet when an item is added.
3
Add delivery area sooner in process
A modal was added after the first interaction with the home page to ensure the delivery area was within limits of Best Buds
4
Ability to search flowers by price
Added additional search options, including price; design layout change to accommodate additional text and reduce business of page.
To focus my design on the most critical parts of the app, I decided to eliminate the messaging function at this time in the design process with the goal to conduct more testing around the needs and possible functionality of this feature.
Accessibility Considerations
1
2
3
Combine text with images.
High-Contrast Text
Size and placement for call to action buttons.
FINAL THOUGHTS
I learned so much from this first project in my certificate course.
My biggest takeaways:
- Having a greater understanding of the research process, and realizing I have so much more to learn and grow in this area.
- Considering accessibility in design, especially use of color.
- Learning how to navigate and create in Figma.
- Design is a process. Have patience in iteration.
- The importance of focusing on one user flow at a time.
Next Steps in the App
1
Build out the Select Bouquet option to give users the ability to select a designed bouquet rather than creating it themselves. Compare and contrast these features to get a better picture of user needs.
2
Add information on caring for flowers, as this may be a deciding factor for certain users.
3
Including the ability to log into an account so users can have past orders, or favorite flowers pop-up when they enter the app.
4
Conduct additional usability testing on message feature to see what users would want included in their message, and how the message would be presetned.