Magnolia & Poppy

My Role: UX Designer

Date: October 2023

Duration: 4 Weeks

Prompt

Design a scalable website to order flowers from a high end local floral boutique.

Problems:

  • Difficult to navigate websites

  • Lack of customization online

  • Too many flower ordering site options

  • Overwhelming amount of options to look through

Solutions:

  • Simplified design for fast navigation

  • Highlight company values and customer service that sets them apart from the competition

  • Organize arrangements by theme and provide customization options to make each style unique to the customer

Research

Competitive Research

To begin my research I started by exploring flower ordering sites for local florists to compare key features and offerings. I discovered that high end florists, usually with three or more locations, relied heavily on large artistic imagery to provide inspiration and attract the users attention. Many local florists provided a unique story on what made them unique to their community.

Many florists provided minimal customization options, that did not allow for users to make their selections unique to their own budget and style preferences. I came to the conclusion that my design should have less options to make room for large inspiring imagery, but be able to customize each option by selecting different sizes, vessels, and colors.

User Interviews

  • “I spend too much time scrolling through endless options on flower sites"

    James

  • "Ordering flowers online would save me time, but I don't trust that they will come on time"

    Rachael

  • "I find it easier to just go to the florist and tell them what I want."

    Barb

Pain Points

  • The overwhelming quantity of floral arrangements make it difficult and time consuming to narrow selections.

  • Users would like to be able to customize arrangements they like to meet their budget and style needs.

  • Websites are difficult to navigate with too many buttons, and directions to go in.

Define

Age: 30

Location: Chicago

Occupation: Tech Sales

Persona - Julianna

Problem Statement:

Julianna needs a website to order customizable flower arrangements, because she wants to be able to send unique gifts delivered on time to her friends and family.

Juliana is a fashion lover with a hectic life in downtown Chicago. She has a big family and many friends to keep in touch with! She finds it difficult to find presents for everyone she cares about, but she really enjoys the thought of giving flowers to cheer someone up, regardless of the reason.

Goals

  • Find the flowers she wants to gift quickly and easily

  • Make gifting flowers feel special and unique

Frustrations

  • Flower deliveries sometimes feel impersonal

  • Endless scrolling through flower options

Ideation

Site Map

Rapid sketching of paper wireframes allowed me to explore many design solutions quickly. I added stars to all design elements that I felt were a must need to include in my final layout.

Test

Before Usability Study

Usability Study

After Usability Study

I eliminated the need to scroll during the checkout process so that the user has clear visibility to all of their information at once.

Before Usability Study
After Usability Study

I added arrows to the image carousels to help users better understand how to scroll through images.

High Fidelity Prototype

Design System

DESKTOP

Home Screen


inspirational imagery


highlight of services


hamburger menu

MOBILE


marketing of mobile app


shopping highlights


shop from instagram

DESKTOP

Shopping


inspirational imagery


hamburger menu

MOBILE

Letting the product be the main focus


DESKTOP

Product Details


Images of different size/vessel options


customization of product to meet user preferences and budget


hamburger menu

MOBILE

other similar product suggestions


DESKTOP

Cart


Simplified checkout eliminating the need to scroll


making the user aware of how many more steps they have to checkout

MOBILE

Accessibility Considerations

1

I provided clear hierarchy in my designs and used labels next to icons to make my designs accessible through screen readers.

I evaluated the level of contrast and hierarchy in my designs for users that are unable to rely on color.

2

I evaluated text size and readability for users with different visual abilities.

3