cover photo2.jpg

Timeless Blossoms

Overview

It is a project that I conducted with Timeless Blossom which is a florist store located in San Diego.

Timeless Blossom is a flower catalog application for buying flowers. It allows users to: 

  • Browse potted and bouquet flowers and order online. 

  • Browse and filter their floral selection based on their own preferences.

  • Have a customized flower ordering experience.

  • Be educated with basic information about each flower.

Role

This is a team project where I assumed the UX UI designer role.

Deliverables

  • Understanding the Users

  • The whole design process:

Ideation

High Fi Wireframe

Wireflow

High-Fi Prototyping

User Testing

Tools

Adobe XD

Figma
Adobe Illustrator

Adobe Photoshop

Date

March 2021

June 2021

PROBLEM 

How might we help users have a better experience of ordering customized flowers and tracking their order to know when their loved ones will receive the flower?

Users:

  • Can not customize their flower bouquets according to their preferences and style.

  • Bad experience with receiving smashed flowers, late delivery and not being able to track the order.

  • Have a lack of information about flowers' characters and longevity.

  • Have a lack of information about the proper space for the potted flower; is it proper for office space, apartments, or outdoors?

DESIGN SOLUTION

Timeless Blossoms app allows users to:

  • Customize their flower bouquets

  • See the real photos of the flowers and track their order.

  • Be able to learn more about the characteristic details and longevity of the flowers.

  • Find their flower quickly.

Landing, Sign in and Sign Up Screens

This screen was simply created to showcase the flower buying illustration and encourage users to click on Sign in, Sign up or Browse as a Guest button.

Homepage and Quick Flower Finder Screens

Users can easily select from popular flower categories or can fill out the questionnaire to quickly find their proper flower.

Flower details, and Flower Customization Screens

Users can see real photos of the flower bouquets, can learn more about the characteristics and longevity of the flowers and can customize the bouquet according to their preferences. 

Tracking order, and Check out Screens

Users can easily track their order by clicking on the map icon and see the estimated delivery time of their order. Users can also contact the one that is bringing their order. 

track order.jpg
 
User Research

I started the user research process with primary research to deeply understand the users’ behaviors, needs, and frustrations.

I tried to have participants with diverse backgrounds, perspectives, and abilities to ensure that my design will be accessible and equitable. I interviewed 4 different participants. During the interview process, I tried to ask open-ended questions. 

User Interview (Primary Research) 

Interview Goals

I wanted to: 

  • Understand the processes and emotions that people experience around the problem my product is trying to solve.

  • Understand common challenges users have with tasks that my product is trying to address. 

  • Identify frustrations that users experience with the process of finding and ordering flowers for themselves or their loved ones. ​

  • Know what would they want to experience and what features they think are necessary to order flowers online. 

Users' Concerns:

"I can not find a functional online flower ordering app"

"My girlfriend always receives the flowers late"

"I can not customize my flower bouquets"

"I do not know which species of potted flower is proper for my office and my living room."

Key Insights:
By identifying repeating complaints found in user interviews, I found out that users have different criteria to consider while ordering a flower for themselves or as a gift for their loved ones. So I clustered the user pain points and categorize them according to constraints they have while ordering for themselves and as a gift for their loved ones.
The following are the key insights that emerged:

Ordering for Themselves

  • Prefer buying potted flowers for their home or work environment.

  • Want to be acquainted with the longevity and caring tips.

  • Want to be acquainted that if the considered flower is proper for home, office, or outdoor environment.

  • The arrival time and the quality of the ordered flower is a crucial factor for users.

Ordering as a Gift

  • Prefer buying flower bouquets for special occasions.

  • Want to be able to customize their own flower bouquet.

  • Want to be acquainted with the longevity and caring tips.

  • They have a bad experience of receiving smashed flowers.

Key Experience Principles:
In order to better understanding the users' pain points and the challenges for the project. I tried to categorize the users' needs into three categories of principles; Education, Accuracy, Aesthetics. 
The following are the key experience principles that need to be considered during the project:

EDUCATION

  • Introducing in-depth information about longevity and caring tips of different flower species. 

  • Introducing in-depth information about proper living space for that specific flower species. For instance, is it proper for an office environment, which the environmental indoor factors are different from the home environment?

AESTHETIC

  • The flower bouquets and potted flowers should be aesthetic.

  • The users should be able to change any bouquet according to his/her style

ACCURACY

  • Accuracy in information related to the flower’s longevity.

  • Accuracy in the date of delivery.

  • Accuracy in the photos of flowers on the app and the one that delivered.

Secondary Research

After understanding users’ behaviors, frustration, and needs from one-on-one interviews. I conducted secondary research to validate user insights from primary research and create a stronger case for the overall design.

According to a National Retail Federation survey:

  • Users spent about $2.4 billion last year on buying flower bouquets on Mother’s Day. 

  • Users think that prices are lower on the online website than walk-in flower shops.

  • Users prefer ordering flower bouquets online on special days. 

  • Users love the photos of flower bouquets on the website; however, they have the frustration of the arrangement that shows up at mom’s door? 

User Persona

Next, I created user personas to better understand users’ behaviors and goals of interacting with the product effectively. I created two themes and group the users who personify those themes together. I continuously referred to the persona throughout the design process to support the design decisions and priorities.

User Story

I created user stories for each persona according to their main goals. User stories inspired me about design decisions. 

  • As a student who is in a distance relationship, I want to order customized flowers for my girlfriend and track my order through the app so that I can make sure that she receives it on the scheduled date and time. 

  • As an architect who has a perfectionist personality, I want to learn about the proper potted flower for each space, so that I can order flowers according to that space on my projects and also for my own office and home.

User Journey Map

I created a user journey for one of my personas. I illustrated the series of experiences that the user will have as she interacts with my product. It helped to think and feel like the user, which is super important. 

Problem & Hypothesis Statement

In order to define and have a clear understanding of users' needs, I created problem statements utilizing 5 Ws (Who-Why-What-Where-When-How). Then, I brainstormed the solutions and wrote down the hypotheses.

Problem Statements

  • Reza is a student who needs to send beautiful and customized bouquet flowers for his girlfriend because he wants to make his girlfriend happy.

  • Reza is a student who needs to track his flower order because he does not want her girlfriend to receive flowers lately. 

 

  • Sarah is a perfectionist who needs to buy proper potted flowers for her office because she wants to have a long-lasting flower.

Hypotheses

I believe that Timeless Blossoms will: 

  •  Show the timeline of order delivery so that users can track their orders.

  •  Allow users to customize their bouquets flowers according to their style and preferences. 

  • Educate the users about different flower species' caring tips, longevity, and their proper space to live.

Ideation

The ideation phase is where we transition from learning about users and the problems to coming up with solutions. It is generating a broad set of ideas and focusing on the number of ideas rather than the quality of ideas. First, I conducted the competitive audit to learn from competitors what they have worked on and their weaknesses. Then, I used insights from competitive audit to brainstorm ideas by the Crazy Eights, How Might We, and Storyboarding methods.

Competitive Audit & Crazy Eights

I conducted a competitive audit by studying 3 direct (ProFlowers, FloristNow and, FrenchFlorist) and 2 indirect (1800Flowers, Flowwow) competitors. Then I ideated using the crazy eights method. I conducted 8 same-size rectangles on paper and tried to ideate 8 different solutions for problem statements in 8 minutes.

The following are the detailed competitive audit sheet, competitive report, and crazy eight ideation paper (Click on the chart to see the full version): 

How Might We?

I conducted How Might We questions as an ideation method, and tried to reframe the problems from different angles and translate them into opportunities for design.

  • How Might We design an option which allows Reza to customize flowers according to his style for her girlfriend?

  • How Might We design the tracking order feature of the app easy and trustworthy for Reza to make him sure about the delivery time of his order?

  • How Might We cluster the flowers categories according to their living space so that Sarah can find the proper potted flower for her office space?

Storyboarding

I conducted big picture and close-up storyboards. Big picture storyboards focus on the users' experience and how people will use the product throughout their and why the product will be useful for them. The close-up storyboards focus on the product instead of on the users while experiencing the product. 

Big picture Storyboard
Close-Up Storyboard
Wireframing & Wireflow

Wireflows are a design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions. I used to design the app's wireframes and user flow in order to enable users to have a better experience of using online ordering apps.

Wireflow.png
High Fi Prototype
User Testing

In order to test Timeless Blossom's usability, I conducted a usability test to gather feedback on how the users navigate through the application and what opportunities are there to improve the usability and functionality of the application. The goal of the test was to be able to successfully order the flower bouquet according to their syle and preferences. 

Feedback 

As I observed the user navigate through the app, I noticed the user was able to successfully sign in, Browse flower categories, Selecting the flower, Customizing it according to their style, Adding it to the cart, Checking out, and Tracking their order. This usability test confirmed many of the assumptions and flows that were made to create this MVP and it confirmed the app is intuitive and provides affordance where needed.

FUTURE STEPS

Implementing AR to the app so that users can easily see how the flower bouquet or the potted flower will fit in their place. 

Currently, it is an app for a local florist located in San Diego, however, it can work with other florists as well in the future.