Embedded Files
Project Overview
The product
Modern Florist is a newly established local florist situated in the CBD. They offer well-designed flower bouquet to business and individual customer.
The problem
A busy individual who are frustrated by the distracting layout, uninformative content as well as complex procedure when ordering flower.
The goal
To design an easy to use catalogue app that allow user to select, to place order and to get instant CS support.
Project duration
1 month (From 1 Mar 2022 to 31 Mar 2022)
Understand the User
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who are too busy to shop flower in-store.
This user group confirmed initial assumptions about Modern Florist’s customers, but research also revealed that customer may leave the app due to uninformative content, distracting layout and lack of support.
User Painpoint
Time
Working adults are too busy to spend time on shopping in store.
IA
Unwanted compulsory sign-up, distracted pop-up and uninformative content prevent user to stay in the app
Support
User don’t want to spend extra time for support during the browsing or ordering journey.
Accessibility
Platforms for ordering flower are not equipped with assistive technologies
Persona & Problem Statement
Billy is a Project Manager who needs a fast and effective way to complete everything online because he is too busy to shop in store and calling in for further checking.
User Journey Map
Mapping Billy’s user journey revealed how helpful it would be for users to have access to dedicated Modern Florist’s 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 a clean and easy layout for user to select flower to help users save time.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of ordering flower, so the prototype could be used in a usability study with users.
View the Modern Florist’s low-fidelity prototype
Usability study: Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Round 2 findings
Refining The Design - Mock up
Round 1 Findings
Before usability study, order preview page didn’t provided for final checking, after usability study, an order preview page is added to prevent wrong order.
Before usability study, the app require user to insert time and date manually. After usability study, Date and Time picker is introduced so as to avoid typo problem.
The app didn’t provide login or sign up option for user to experience the differences between guest and member checkout. After the usability study, an individual login and sign up page is added to the app.
Round 2 Findings
The second usability study revealed that user can only sign-up in the individual login page, sign-up option is still difficult to find. So a sign-up button is added to the home screen, it will make user easier to perform sign-up.
The second usability study revealed that the filter option didn’t work well as only one option can be chosen. So that multiple selection button is introduced, that allow user to fine tune the most desirable result.
The second usability study revealed that user experience stuck in the checkout page if they give up checkout. So that, a ”close” button is introduced to the page, that allow user to leave the page easily.
Accessibility considerations
Screen Reader
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Icons
Used date, time picker to reduce manual input, that help make order easier.
Images
Used high resolution images for flower bouquet to help all users to understand the product detail.
Refined Design
High-fidelity prototype
The final high-fidelity prototype presented a clearer user flows that allow user to sign-up, fine tune at ”Filter” and prevent getting “stuck” in checkout page.
View the Modern Florist’s high-fidelity prototype
Going Forward
Takeaways
Impact:
The app makes users feel like Modern Florist’s really thinks about how to meet their needs.
One quote from interviewer feedback:
“The app is so great because it is neat and tidy, the app is informative and easy to use."
What I learned:
While designing the Modern Florist’s app, I learned that first ideas for the app are only the beginning of the process. Usability studies are peer feedback influenced easy iteration of the app’s designs.
Next Step
Testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
User Research
Conduct more user research to determine any new areas of need.
Modern Florist Love Your Pet Vet Clinic VF Coaching Home
Google Sites
Report abuse