Responsibilities: Product | UX | UI Personal project

How can we order custom flowers online?

‍background πŸ“–

About current flower apps

Flowers have recently become a popular commodity and have gradually become a new joy in young people's lives.

The number of flower shops and people looking to buy flowers is constantly increasing; social media photos and videos with the appearance of flowers are no longer strange.

However, there are still few mobile apps for the purchase of this item online.

01

Understanding
the user

  • User research
  • Personas
  • Problem statements
  • User journey map

‍the problem❓

User research: Summary

I conducted interviews and created empathy maps to understand the users I'm designing for and their needs
‍
Two primary user group identified through research was:

1. Working adults who want to decorate their personal space with flowers but don't have time to go buy directly
2. People who want to buy and send gifts to their partner on special occasions
This user group confirmed initial assumptions about Gentle Garden customers, but research a so revealed that time was not the
the only factor limiting users from buying flowers at the store.
‍
Other user problems include obligations, interests, or challenges that make it difficult to purchase flowers or go to stores in-
person.

Users study πŸ§‘πŸ§‘

Talking to them

To understand the pain points I conducted interviews with 5 users. They discussed their past experiences, including their pains and preferred features

Users study πŸ’¬

For a better shopping experience

Users always have many different occasions and reasons to buy flowers, but the price is not clear, and finding a bouquet that suits the context always makes them feel confused.

Moreover, flowers sold online have not really focused on personalizing options for this item. The above things make users not really enjoy buying flowers.

Problem

Although the popularity of flowers as a commodity has lately increased, there aren't many mobile apps that enhance the user experience for flower delivery services.

Goal

Create an app that enables users to effortlessly personalize, order, and receive flowers.

Solution

An application with a user-friendly interface design, a thematic selection search box, and customized choices for each order.

architecture βš’πŸ“

Before I went on to sketch
the screens I built the user flow and the user journey map

The goal was to consider several flower product customization possibilities as well as different delivery mode choices.

architecture βš’πŸ“

User journey map

Goal: Purchase flowers as a gift for loved ones that know the price in advance

02

Starting
the design

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Wireframes βœοΈπŸ—’

To understand how things are going to look I turned to the paper

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 an overview of the product catalog and its purposes of use so that users easier in choosing the suitable product type and also save time for them.

Wireframes βœοΈπŸ—’

Digital wireframe

As the initial design phase continued, I made sure to base screen designs on feedback and findings from Β the user research.

Wireframes βœοΈπŸ—’

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was customizing and ordering a bouquet, so the prototype could be used in a usability study.

Users study πŸ§‘πŸ§‘

Usability study:Β findings

After conducting the usability studies, I found that the personalization options were not clear and detailed enough, and the product information was confusing for users.

03

Refining
the design

  • Mockups
  • Takeaways

architecture βš’πŸ“

Adjust it for them

The first usability study revealed frustration with the product detail and customize options are unclear.

But after the usability studies, I added a more specific and intuitive design for both the product information and customize options.

04

High-fidelity
prototype

  • Design style
  • App features

Design in pastel colors

Wireframes βœοΈπŸ—’

usability test 🧠

Gentle Garden Β Features

advanced search option

Search by thematic selections with recommendations for bouquets based on user experience.

Personalize your flower order

Users can add or remove flowers in the bouquet to suit their own preferences.

Optimize the check out process

Live chat support for customers

Live support chat allows you to give instant assistance to the customer who doesn't have time to wait for a response

usability test 🧠

So what did I learn?

🌟 Impact

The app makes users feel like Gentle Garden really thinks about how to meet their needs.

One quote from peer feedback:
β€œThe app made it so easy and fun to customize my own bouquet! I would definitely use this app as a go-to for a beautiful bouquet.”

πŸ‘©πŸ»β€πŸ’» Takeaways

While designing the Gentle Garden app, I learned that the first ideas for the app are only the beginning of the process.

Usability studies and peer feedback influenced each iteration of the app’s designs.