Project Overview

Synopsis
Buying flowers is one of those things that's best done in person, but that can be challenging in today's fast-paced, increasingly digital world. I undertook this design challenge for a hypothetical flower shop called Bloom with the goal of creating a responsive website that helps users make informed purchases online and track their orders every step of the way.
Check out the case study below or skip to the solution!
Role
UI/UX, Visual Design, UX Research
Team
1 designer
Tools
Figma, Miro, Google Forms
Timeline
3 weeks

The Problem

Buying flowers is one of those things that's best done in person, but that can be challenging in today's fast-paced, increasingly digital world.

Floral arrangements have become an essential part of modern celebrations, but the process of selecting and ordering flowers is often cluttered and time-consuming, and many trendy florist shops are recognizing the need to provide a more convenient solution.
user research

Understanding the Problem

In order to create a website that accomplished my goal of offering a quality alternative to in-person purchases, I needed to understand what potential customers would need from such a site and what might lead them to use Bloom instead of competing flower shops. My research consisted of:
  • Competitive analysis
    I researched flower shops that offered online shopping and delivery services to learn what they did well and where they fell short.
  • survey of 27 potential users
    I wanted to identify my target userbase and learn more about how they conducted their online shopping. Who were these users and what made them want to buy their floral arrangements online instead of in-store?
  • 2 user interviews
    I sat down with 2 of my survey respondents to hear their thoughts on online shopping and the pros and cons of an online flower delivery service.
User research

Research Insights

I sent out a survey on Google Forms to learn more about the concerns and shopping habits of flower shop customers. My survey received 27 responses from male and female users ranging in age from 19–72 years old, and 2 of those respondents were willing to sit down with me to discuss their answers in greater detail.

Survey insights

85%
of respondents find online shopping more convenient than in-person shopping.
67%
of respondents do not find and purchase items in the same shopping session.
74%
of respondents worry that online orders will arrive late or in poor condition.

interview insights

User 1
"I don't have a florist shop near me, so I rely on online delivery for things like holidays and graduations."
User 2
"I wish I knew exactly when my orders will arrive so they don't have to sit outside until I get home."

Interview
‍insights

User 1
"I don't have a florist shop near me, so I rely on online delivery for things like holidays and graduations."
User 2
"I wish I knew exactly when my orders will arrive so they don't have to sit outside until I get home."
user research

Personas

The findings from my research culminated into three main pain points: lack of time to shop for flowers in-person, shipping delays, and quality concerns. Working professionals were the group that most commonly faced these obstacles, so they became my target userbase. I created two personas to represent this group and common obstacles that they face.
ideation

Affinity Mapping

My next step was to start developing potential solutions. I analyzed my research findings to inform my decisions about shipping features, payment features, the online shopping experience, and the needs of my users. Using Miro, I brainstormed potential features to include in my website and decided which ones to prioritize.
Ideation

Creating a Site Map

After identifying the most important features to include, I created a site map on Miro to outline the basic structure of the website. The website is designed to be easy to navigate, so users can quickly filter the results they want to see or start browsing right away.
ideation

Concept Sketches

Once I had finalized my site map, I created sketches of the features I wanted to see in my website. Since I was designing my website to be responsive, I produced sketches for both the desktop and mobile layouts.
Iterations

Wireframing

My next step was to turn my initial sketches into wireframes on Figma. I built simple black-and-white frames, devoid of any graphics, to map out the look of each screen.
Iterations

Mid-fi Prototype

Once my layouts were finalized, I started adding color and converting my shapes and lines into images and text. Next, I added interactions to each frame and soon, I had a mid-fidelity prototype ready to test.
iterations

Usability Tests and Revisions

Once my prototype was constructed, I created 2 scenarios for my users to test out, one for the mobile version of the website and one for the desktop version. I recruited 5 participants for extensive user testing and carefully watched them complete each scenario. The participants had to sign into their accounts, purchase a bouquet, and check on the status of their orders.
  1. Navigation
    User feedback revealed that my original navigation bar design was unintuitive and caused the top part of the screen feel cramped. Users found it hard to identify the different sections of the website and had difficulty accessing the homepage, which was toggled by clicking on the company's logo. After hearing their feedback, I redesigned the navigation bar, taking a more minimalist approach. I used multi-level dropdown menus and common ecommerce icons to fit all of the necessary links in the same row. I also added a notification badge to the shopping cart icon, which tracks the number of items that users currently have in their carts.
  2. Filters
    Originally, the search filters on the mobile site mirrored the desktop version and made heavy use of checkboxes. However, users reported having trouble differentiating between some of the options and finding the checkboxes to be repetitive on such a small screen, so I revamped the filters section by adding sliders and circles to select.
  3. Checkout
    My mid-fi checkout screen consisted of a list of textboxes for users to fill out with their shipping, payment, and personal information, but user testing revealed that the checkout process felt long and tedious. To solve this issue, I added options that let users select addresses and payment methods that they had previously saved or add new ones with a simple click.
After testing my prototype, I went back to Figma to refine a few more parts of my design. I had originally went with the font Poiret One for my headings in order to evoke feelings of elegance and beauty, but it proved to be too hard to read, so I switched to Rosario, another graceful font that was more legible. I also redesigned the layout of my checkout and order confirmation pages to be simpler to navigate and easier on the eye. The feedback that I received proved to be invaluable and allowed me to create something that better served my users.

The Final Product

After 3 weeks of researching, designing, testing, and refining, my prototype was complete.

The design challenge was over and I now had a fully interactive prototype for my responsive website.
Hi-fi prototype

The Final Design

My final high-fidelity prototype makes use of pink, green, and dark violet theme colors and rounded corners to evoke feelings of elegance, serenity, and nature. As users browse through the website, they are presented with modern-looking rectangular cards of the shop's products, which can be sorted and filtered for more specific needs. After clicking on a card, users are presented with more information about the floral arrangement, including color choice and shipping options. Users choose their preferred delivery option at checkout and can track their orders after purchase.
My mobile design closely follows the desktop layout. Users are presented with columns of cards as they browse through floral arrangements and a linear checkout page. However, I shrank down the navigation bar with a slideout menu and changed the order tracking progress bar's orientation from horizontal to vertical.
demo

Check Out the Desktop Website!

Demo

Check Out the Mobile Website!

Design system

Floral Theme

Reflection

Closing Thoughts

I completed this project on my own as part of the Google UX Design course and it was challenging, yet rewarding, and I learned a lot about responsive design. My website had to be accessible from both computers and phones, which meant designing a lot of my screens to fit multiple screen sizes. During this project, I gained a greater understanding of Figma's auto layout feature and learned how to make responsive designs using the same component.

Ideation was the most intensive part of this project, and I worked hard to find the balance between taking the tried-and-true elements from existing online shopping websites and coming up with my own unique designs. Doing so pushed me to really think about the design choices I was making and my reasons for making them. I brainstormed and scrapped many ideas before I was happy with my final decisions.

Going forward, I'd like to conduct more research on how customers want to go about their transactions and expand the payment options on the website. Allowing users to pay for their flowers in advance or in installments would make the florist shop more accessible to a wider range of customers.
AggieRide →
copyright © 2023 Jennifer Tso. All rights reserved.