Case Study 1: Design A Flower Catalogue App For A Trendy Florist

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.