Case Study: Flowerite

 
 

Project Introduction & Background

Flowerite is a fictional flower catalog mobile app made for florists and farmers to sell their products to customers across the United States. Users range from professional party planners to the casual, occasional customer. The tone is friendly and approachable, and the app aims to make the shopping experience both easy and fun.

The Problem: Flower and event shopping websites are prevalent, but there are very few accessible and fully functional mobile apps for purchasing flowers from florists and farmers.

The Goal: Figure out what users want and need from flower catalogs, and create an accessible, fun app for browsing and purchasing flowers by bulk or by bouquet.

My role: Research, wireframing, design, prototyping, testing

Project duration: This project was started and completed in January 2023

 
 

“Big Picture” storyboard depicting a user story for ordering flowers.

“Close-Up” storyboard depicting a potential user flow for ordering flowers.

 

User Research & Personas

User Research: Through research and competitive audits, I found that there are different groups of users that purchase flowers: some buy in bulk for resale or for large-scale event planning, and others do one-time purchases for events such as dates, birthdays, etc. I also found that while most of the companies acting as a market for florist shops and farmers had fully functional websites, few had mobile apps that had the same functionality as their sites. The websites also had extremely large selections, which could feel repetitive while browsing and overwhelm new customers.

Pain points discovered through competitive audits:

  • Websites selling flowers tend to have a large number of categories, and many are older sites with outdated and difficult-to-navigate menus/search options. I want to simplify the navigation to make it easier for customers to use the app.

  • While doing screen reader testing, I found that many of the websites selling flowers had layouts that made screen reader use difficult and confusing. I want to keep accessibility in mind throughout the design process.

  • The app should have all the functionality of an e-commerce site. I want to make sure users can access all the products offered by the florists/farmers, and that they can complete the checkout flow with ease.

 
 

Based on user research and conversations with friends and family about their shopping habits, I created the persona named Rudy, a young professional that loves hosting events and relies on delivery or public transportation to get their party goods, including flowers. This persona helped guide the design process through completion.

 

Captures of some screens from the low-fidelity version of the dedicated mobile app

 

Wireframing, Prototyping, & Refining.

Wireframes: I wanted to showcase different browsing categories, while keeping the images large and appealing. I planned to keep the navigation bar locked at the top while scrolling. I also wanted the checkout page to have the text fields for entering payment information, and when the user enters their address, they will get a shipping cost based on their location.

Prototyping: I conducted two rounds of moderated usability studies, with a total of five participants, ranging from age 30-60, including one visually impaired user that uses enlarged text when available.

Round one findings:

  • All users skipped the option to create a user profile at the Welcome page

  • Some users had difficulty finding or navigating to their cart

  • Most users wanted to browse the flower selections before checking out

Round two findings:

  • Some users utilized Express Checkout

  • Some users wanted the cart contents broken down on the Checkout page, since clicking Express Checkout skips the Cart page completely

 

Low-fidelity wireframes transform into polished mockups

 

Refining: Users wanted a clear way to navigate the app and to their cart. A shopping cart icon was added to the top navigation bar, which was also refined to have clearer icons. The search bar was moved to the homepage to de-clutter up the navi bar. Users also wanted the checkout screen to include a list of items in the order. I also moved the back button to the top of the page, and added a “cancel” option based on user feedback. The page now has a header so the user knows which stage of the process they’re in.

 

Final screens used for the high-fidelity prototype for Flowerite

 

Final Thoughts

Accessibility:

  • Colors and contrast were tested on WebAIM to ensure the text in descriptions and on the buttons was legible and easy to find. Changes were made to the main color palette to pass the contrast tests.

  • Font size is no smaller than 14pt. Weight has been added to buttons and informative text, such as prices, to increase visibility. In future versions, I’d like to add an option to change the text size within the app itself.

  • Elevation and drop shadows are used to help direct user to text fields and action buttons.

Impact: Users in our usability study found the app fun to use, and provided positive feedback on the look and feel of it as well. All users were able to complete the purchasing and checkout flows, and found the process intuitive and clear.

What I learned: Every conversation with a peer or user helped shape the final product. I found that with every step, I found more things to consider and more things I wanted to incorporate to make the app more usable and accessible. I learned that what I imagined people might like (like the Welcome page), turned out to be unnecessary and felt clunky to the users.