Recycled Paper

Great Lake Flowers

UX Design Case Study

Role: Principle UX Researcher & Designer
Summer 2021 (6 Weeks)

Green Flower Paper
1. Home.jpg
1. Home.jpg

Exposition

"Design a specialized app for a florist in Michigan."

This UX case study began with a randomized UX prompt. That I used to develop a profile for "Great Lake Flowers": a fictional florist in Ann Arbor, Michigan. I used target audiences from real-life floral services to develop the company profile and made educated inferences as to their clientele in order to develop personas.

Client

Great Lake Flowers is a small business in Ann Arbor, Michigan that has been serving its community for almost two decades. Lately, they've noticed more and more phone calls asking about ordering flowers via mobile app, and they decided it's time to give their customers what they want. 

Challenge

GLF has a dedicated customer base, many of whom did not grow up with smart phones. The application must be accessible for them and allow the human touch they have come to expect from GLF. 

Additionally, research insights suggested that about half of end users want to order pre-made bouquets, while the other half want to customize. The design must make either approach as simple as possible for the user.

Approach

The good news is that GLF has a solid brand identity, and there are lots of similar, though not local, services that can provide clues for best UX practices. Research began with persona development of GLF clientele and a competative audit of national floral arrangement delivery services. 

Research

Before I could begin thinking about the UX for this product, I had to take a look at what features similar services offer. A competative audit of 5 top online floral services was conducted to assess current practices for balancing ordering pre-made, customizable, and completely custom floral arrangements.

Methods

After collecting basic information on the competitors, each company was assessed in terms of

-General Impressions

-Interaction Design

-Features

-Brand Identity

-Accessibility

Critical Findings

This competative audit of 1-800-Flowers, Edible Arrangement, Urban Flowers, ProFlowers, and FTD revealed three major gaps in the market: ​

1. Few-to-no options to customize arrangements online

2. No options for in-store pick-up

3. No accessibility considerations for neither the online ordering process nor the delivery process

Competative Audit

Floral color source imae_edited.jpg

Usability Study 1

After the audit, research was on hold until I completed a low-fidelity prototype of the user flow outlined in the next section. After I made the GLF low-fidelity prototype, I conducted an unmoderated usability study paired with a system usability survey. After the data was cleaned into an affinity map, this study revealed four actionable insights:

Affinity Diagram

GLF Affinity Diagram.jpg

Critical Findings

3. Quick order filter.jpg

1. Shopping by best sellers should be promoted as a feature of the app.

2. There should be more obvious visible indications when a user is browsing with a filter enabled

3. Buttons need to be larger and uniform visually

4. The quick order feature should be balanced with other key features presented on the home screen.

Usability Study 2

As I wrapped up my high fidelity prototype for the GLF app, I began to design another usability study to assess the effectiveness of my design element choices. I needed to be sure that my interface design choices enhanced the experience of using the app while maintaining ease of use. 

Research Questions

  • How easily can people find action buttons throughout the user flow?

  • How easily are users able to undo actions?

  • Did the order of inputting information make sense to users?

  • Were users able to easily interpret what icons mean?

  • Were users able to distinguish between sections on pages through visual design elements?

Key Performance Indicators

  • User error rate

  • SUS questionnaire immediately following usability study

Insights

  • Action buttons should be uniform in size and color

    • Action buttons should be uniform in screen position whenever possible, ​

  • Users were able to undo erroneous actions easily in every part of the prototyped user flow.

  • Users wanted more explanation of the rationale behind their actions when prompted for a delivery ZIP before seeing the available arrangements. 

3. Quick Order Filter (1).jpg

Process

To address the challenge of balancing pre-made floral arrangements with custom arrangements in the ordering process, I designed this user flow that uses components of both, taking a pre-made arrangement and adding customizations to it.

User Flow

Floral User Flow.jpg

Sitemap

With a working user flow for the GLF app, I started work on the sitemap of the entire application including the "Build-a-Bouquet" feature  and different ways to browse the great inventory GLF has to offer.

Site map.png

Wireframes

Paper Wireframes

First I went screen by screen from the tentative sitemap and developed some rapid iterations of possible designs. I made sure to list what components each page needed and used checklists as guides as I designed.

GLF Home Wireframe 1.png
GLF Home Wireframe 2.png
GSF Browse by 1.png

Low Fidelity Digital Wireframes

After I identified specific components and iterations of those components on paper, I made the below digital wireframes. 

1. Home.jpg
2. Quick Order input.jpg
2a. Quick order results.jpg

Design Decisions

Sticker Sheet

Since GLF doesn't have a notable digital presence, I adopted their brand standards from print media to develop the design system for the app. With this as my starting point, I made alterations as needed to account for the interactive affordances of digital technology. 

Color Palette.png
Sticker Sheet.jpg

Mock-Ups

I completed design system development and the second usability study around the same time, which together informed my first iteration of mockups. 

Great Lake Flowers.jpg

Results

Design

From the first screen (left) to the last (right) I tried to emphasize clarity and easy of use while balancing the aesthetics people enjoy when they visit GLF in person. 

1. Home.jpg
10. Thank you.jpg
6. Add to cart.jpg

Accessibility

As someone with vision impairments, I am particularly attuned to text that is too small or fonts that are hard to read. I made sure to keep text as large as I could without sacrificing usability. Not only will this benefit users like me, but also the elderly who frequently find need for larger texts. 

4. Quick Order Best Sellers.jpg
7. Delivery & Payment.jpg
5. Selection Details.jpg
3. Quick Order Filter.jpg