Pristine Flowers UX Design Case Study
The project is a part of Google UX Design Professional Certification Program
Project Overview
Summary of the Project
Pristine Flowers is a conceptual case study for designing a flower catalogue app for local florist. The project aims to build a dedicated florist app that can compete with existing ones of other florists in nearby area. Through this app Pristine flowers expects to attract new and existing customers to hassle free shopping experience and increase their current profits.
Project Duration
May 2022 - December 2022
The Problem
Busy professionals and families want to purchase flowers online but are short on time and are not able to visit local florist store. They are choosing other competitive florists apps to order flowers.
The Goal
A mobile app that allows users to purchase flowers which provides a better customer experience.
My Role
UX designer designing an app for Pristine flowers from conception to delivery.
Understanding The User
User Research Summary
The research was conducted by using social media to connect with and interview individuals who are working, who do online purchases , people interested in flowers, florists.
The assumption was made going into the interview that users would like to have an app to view flowers available in store to be able to decide if they would like to purchase a specific flower.
The research, however, found that users would not only love to view flowers online but customize bouquets and order them, also to look for other accessories associated with them. Most of them need an easy and efficient way to get flowers delivered to their doorstep.
Pain Points
There aren’t many functional local florist shops with their own dedicated florist app for purchase of flowers online.
Most apps lack information available about the flowers they are ordering like care and tips, Also no support after receiving flowers.
Inability to place orders for exotic or special orders for flowers that suppliers don’t have in stock at the time.
No real time tracking available in most apps this make the user frustrated and impatient waiting for flower to be delivered.
Personas
Problem Statement based on Arunima persona
Arunima is a busy office worker who needs flowers at her desk because she want reduce her work stress.
Problem Statement based on Avantas persona
Avantas is a barista in cafe who needs fresh flowers because he wants to keep Coffee House fresh and attract more customers.
User Journey Map
Mapping Avantas’s user journey revealed how helpful it would be for users to have access to a dedicated florist app.
Starting The Design
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritized mainly for search, best sellers, categories, new arrivals and quick access bar.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes for home screen.
Digital Wireframes
I wanted a clean and minimal UI to provide more focus on content and functionality.
The search box is kept front and center for ease of access along with best sellers, categories etc.
Quick navigation to various sections such as H, Favorites, Profile and Cart.
After completing the order the user is greeted with a pop up saying “Order submitted”.
The users can track their order in profile section.
Low-Fidelity prototype
After making a completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I created is ordering flower which could be used in a usability study.
Usability Study Round 1
Findings from the first study helped guide the designs from wireframes to mockups.
Users were confused in address section about billing and shipping address.
Users wanted more information in product description section.
Some users found there was lot of navigation buttons in some areas of check out process.
Refining The Design
Mockups
Early designs had more elements some were removed to reduce confusion in navigation and provide better aesthetics.
Search filter helps shoppers narrow down their search for the desired product.
The “Add to cart” and
“Buy it now” buttons sizes were reduced to fit more content.
Added separate sections for entering shipping and billing address during checkout process.
Help section which includes F.A.Q, contact information and customer support
High-Fidelity Prototype
The final high-fidelity prototype of Pristine flowers florist app presented cleaner user flows for ordering a flower.
Usability Study Round 2
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Users requested a progress bar during the checkout process.
Screen loops happening with some buttons & quick navigation bar in checkout process.
There wasn’t enough color’s and dividers to distinguish some sections.
Mockup Iterations
Some updated screens after usability study.
Extra dividers were added to distinguish between sections.
A progress bar was added to the checkout process.
Accessibility Considerations
Used icons to help make navigation easier.
Used appropriate contrast and tested colors so that color-blind users can easily differentiate the UI elements.
Used lots of images to accurately represent the flower types.
Going Forward
Next Steps
Do another round of usability testing’s with a bigger group with real world conditions and iterate app functionality from feedbacks received.
Improve the accessibility of the product by testing with more people with disabilities.
Find out what other new features that can be added to existing design.
Impact
This app has made it possible to order flowers and it’s accessories more conveniently and in a shorter time than before. This has made it entirely possible to buy flowers more often and even have them delivered to users door-step efficiently.
What I Learned
I learned the importance of usability studies and gathering feedback to refine the mockup. These insight direct action and help me as a designer improve the product. We should always make the user front and center of the product. Always remember that we are not the user, that's why we need to continuously learn from them to produce inclusive design.