top of page

The Florist

UX/UI Design
macbook-pro-imac-TfPYxupXFogr7ksb.png
threed_mockup (1).png
The Product

The Florist is a flower shop that specialized in farm-fresh-cut flowers and handcrafted bouquets. The usual user is between the ages of 25 and 50, and the majority of users are flower enthusiasts who are working people looking for flowers for gift giving or décor. The florist's mission is to supply its customers with flowers of their choice and style in a timely and convenient manner.

Challenge

Available online websites include crowded designs, ineffective product browsing systems, inability to modify items, and perplexing checkout processes.

Role

UX designer designing a responsive website for The Florist Company.

Tools

Figma, Adobe Illustrator, Adobe Photoshop, Adobe XD

Solution

Create a user-friendly The Florist website by providing easy navigation, the ability to create your own bouquet, and a quick checkout process.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.

Duration:

November 2021 -December 2021

shotsnapp-1643621791.498.png
Home screen-tab – 1-iPad Air 2.png
shotsnapp-1643621550.59.png
Design Process:
Empathize
Define
Ideate
Prototype
Testing
Understanding The User:
  • ​​User Research

  • Personas

  • Problem Statements

  • User Journey Maps

Research Goals
  • Understand current market trends.

  • Identify the demographics of florist services.

  • Determine competitors and their strengths/weaknesses.

  • Determine people’s motivation to go to the florist shop.

  • Determine people's motivation to buy flowers online.

Market Research

I began the project by conducting market research to have a better understanding of the florist services. For further information, I gathered key themes from a collection of facts and statistics linked to the research goals/topic:

  • Demographics - The majority of clients are busy working grownups and upper-class households who buy flowers and bouquets for home décor or present giving purposes (ages 25 to 65), and who are unable to visit a florist shop on a regular basis.

  • Demographics - The majority of clients are busy working grownups and upper-class households who buy flowers and bouquets for home décor or present giving purposes (ages 25 to 65), and who are unable to visit a florist shop on a regular basis.

  • People in their 30s and 40s buy books on a weekly or monthly basis at a higher rate than any other age group.

  • However, in terms of raw numbers, persons in their 30s constitute the majority of those who prefer to buy flowers on a monthly basis, closely followed by those in their 40s and 50s.

  • When asked where they get their flowers, 73.8 percent answered they go to a florist shop.

  •  People in their twenties buy flowers mostly for the purpose of gift giving.

Summary

To better understand the target user and their needs, I conducted user interviews, which I subsequently transformed into empathy maps. I observed that many of my target customers desire to buy flowers in a more convenient and efficient manner, saving them time. They desire easy access to fresh flowers as well as customized flower options. Most customers seek flowers for home and workplace décor, as well as for gift giving; many users buy flowers from florists on a monthly and weekly basis.

Interview

I performed interviews with 5 different interview participants to assist me to learn more about the consumers and gaining a glimpse of their experiences when it comes to buying flowers or bouquets. In order to obtain insight into people's experiences with florist shops and online flower purchases, as well as what crucial variables inspire them, I asked questions like:

  • How many times in a month do they buy flowers, where do they get them, and why?

  • For what reason do they buy flowers?

  • Where do people prefer to buy flowers and bouquets online or at a florist store, and why?

  •  What flowers do they purchase, and how do they select flowers?

  • What flowers do they purchase, and how do they select flowers? Do they always personalize their orders at the florist show?

Empathy Map

After conducting the interviews, I took the transcripts of the interview and transferred them to post-its, and organized them into thinking/feeling, doing/saying, hearing, seeing, pain, and gain categories that form my empathy map.

the florist.jpeg
Pain Points
Customization
The website does not allow you to customize the flower.
Navigation
The design and style of a website are complex, which leads to difficult navigation.
The checkout procedure is lengthy, perplexing, and time-consuming.
Checkout Process
User Persona

Based on gathered research, combined with insights from an empathy map, I created a persona that represents The Florist audience segment.

Group 759.png
User Journey Map

Mapping Riya’s user journey revealed how helpful it would be for users to have access to the dedicated The Florist website.

Group 762.png
Problem Statement:

"Riya is a busy corporate lawyer who needs to buy fresh flowers online to save time and wants to have flowers of her own style on her work desk."

Competitive Audit

I examined the numerous online florist services sites that sell flowers online based on their strengths and flaws to gain an understanding of how these companies affect their customers.

Group 763.png
Starting the Design:
  • Sitemap

  • Paper Wireframe

  • Digital Wireframe

  • Usability Studies

Sitemap

The inability to customize the product and website navigation was a major source of frustration for consumers, therefore I utilized that information to design a sitemap and incorporated it. My aim here was to offer a clear category for the user to create or personalize the bouquet they want, thus I included the category of construct your own bouquets and provided smart information architecture decisions that would enhance overall website navigation. The framework I picked was intended to make things simple and straightforward.

sitmap.PNG
Paper Wireframes

Following that, I drew paper wireframes for each screen in my app, keeping in mind the customer pain points regarding customizing, browsing, and checkout flow.  The home screen paper wireframe alternatives to the right are concerned with maximising the user's customizing and surfing experience.

Inked1639034626345_LI.jpg
Inked1639034626352_LI.jpg
Inked1639034626342_LI.jpg
Inked1639034626349_LI.jpg
Inked1639034626355_LI.jpg

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

1639034626339.jpg

Refined paper wireframe

Paper Wireframe Screen Size  Variations

Because 'The Florist' clients use a number of various devices to access the site, I began working on designs for extra screen sizes to ensure the site was completely responsive.

Mobile

1639034626324.jpg

Tablet Screen

1639034626333.jpg
Digital Wireframes

The transition from paper to digital wireframes made it simple to see how the redesign may solve user pain points and improve the user experience. A crucial component of my strategy was prioritising relevant button positions and graphic element placement on the main page.

Group 764.png
customized Bouquet-web – 1.png
customized Bouquet-web – 2.png
Cart.png
Shipping.png
Digital Wireframe Screen Size Variations 
Mobile Screen
Home screen-mobile.png
customized Bouquet-mobile.png
Tablet Screen
Samsung Galaxy S10 – 4.png
Home screen-tab.png
customized Bouquet-tab.png
Low-Fidelity Prototype

I integrated all of the screens involved in the major user flow of adding an item to the basket and checking out to build a low-fidelity prototype. At this stage, I had gotten comments on my designs from members of my team on issues such as button placement and page structure. I made a point of listening to their input and implementing various ideas that addressed user pain points.

prototype.PNG
Usability Study: Parameters
Moderated Usability Study
Study Type:
India, Remote
Location:
5 participants
Participants:
20-30 minutes
Length:
Usability Study: Findings

I carried out two rounds of usability testing. The initial study's findings aided in the design process, from wireframes to mockups. The second research made use of a high-fidelity prototype to indicate which areas of the mockups needed to be improved.

Round 1 Findings

Round 2 Findings

Users need better and clear clues to customize the bouquet.

Users need clear clues to recognize the given flower option.

Users need an intuitive way to add personalized messages for each cart item.

Users want a choice of size option for each selected flower.

Users need filters options to buy any particular product.

Mockups

Early designs allowed for limited modification, but after conducting usability tests, I introduced colour options with each flower, allowing users to select one or more colors for each bloom.

Group 765.png

Earlier designs enabled customers to add a personalised greeting to the whole purchase; currently, users may add a personalised message to each item.

Group 766.png

The second usability study revealed frustration with not recognizing the given flower option with their name, so I've added pictures of each flower and filler and the second user wanted a size option for each selected flower so I have included a size option for each selected flower.

Group 767.png
Mockups: Original Screen Size         
Home hifi.png
customized Bouquet-hifi – 2.png
Product-Hifi.png
Cart-hifi.png
Flower by stem product- hifi.png
Payment-hifi.png
Mockups: Screen Size Variations

Based on my previous wireframes, I incorporated considerations for different screen sizes in my mockups. Because consumers shop on a number of devices, I believed it was critical to optimise the browsing experience for a variety of device sizes, such as mobile and tablet, to ensure users had the best possible experience.

Mobile Screen
Home screen-mobile – 1.png
Product-mobile – 2.png
cutomize-mobile – 3.png
Tablet Screen
Home screen-tab – 1.png
High-Fidelity Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and incorporated design modifications made during the usability research, as well as other adjustments proposed by members of my team.

hifi prototype.PNG
Accessibility Considerations

Used larger size font which Provided access to users who are poor eyesight.

Used icons to
help make
navigation easier.

Used detailed
imagery for bouquets and flowers to
help all users
better understand
the designs.

Going Forward:
  • Takeaways

  • Next Steps

Takeaways
Impact

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. 

What I learned:

I discovered that even minor design changes may have a significant influence on the user experience. For me, the most significant lesson is to constantly focus on the genuine needs of the user while developing design concepts and solutions.

Next Steps
  • Conduct another round of usability testing to confirm that the users' pain concerns have been appropriately handled.

  • Conduct more user research to identify any new areas of need.

  • Determine any further areas of need and brainstorm new functionalities.

Let’s Connect!

Thank you for your time reviewing my work on The Florist app! If you’d like to
see more or get in touch, my contact information is provided below.

bottom of page