1-800-Flowers UX Case Study

ux research and wireframe prototypes for 1-800-Flowers.com

Cover Image: Stock Image by Earl Wilcox on Unsplash.

Overview

The following case study was practice at constructing a UX design plan from start to finish. This project focused on improving the current design of the 1-800-Flowers.com using UX research methods and wireframe prototyping to build a fresh, modern take on the website.

Challenge

Why do people order from 1-800-Flowers.com? Perhaps they want to send a long-distance loved one a pick-me-up, or they’re looking to spruce up an office space. We wanted to create a simple, modern online experience for customers when they shop on the 1-800-Flowers website.

This project aimed to determine how to improve the online experience of 1-800-Flowers.com and create new prototypes designed to reflect the findings from our research.

toolbox

• Figma & FigJam

• Usertesting.com

• Optimal Workshop

  • Card Sorting

• Google Workspace

  • Docs, Calendar, Sheets, & Meet

the team

Rachel and Nick.

UX Consultants from The Center of Digital Experiences @ Pratt Institute, Nick and I split the work on this project equally.

my role

I led user interviews, crafted user personas, composed task lists for unmoderated user testing, and designed low, medium, and high-fidelity wireframes alongside a style guide.

research

User Interviews

This method was ideal for our research. We directly spoke with potential or existing customers about their thoughts on 1-800-Flowers and online flower ordering. A script was developed to direct the overall conversation, but additional questions were asked based on the interviewee’s answers. To qualify as an interview participant, the user must have purchased flowers in the past year. Participants shared their desire to find beautiful, moderately priced bouquets and didn’t mention being interested in including additional gifts with their purchases.

User Personas

We developed user personas from the interviews to represent a few of our participants and their wants/needs. This method helped us determine what features to focus on for improvement or creation, such as making browsing easy and presenting diverse search results; showing customers more than the traditional bouquet offerings of roses and tulips. From our personas, we also conducted user story mapping.

Competitor Analysis

We examined some of 1-800-Flowers’ business competitors to understand what other flower delivery companies were doing with their websites. Our team chose major themes across the websites that we believed were beneficial to their sites’ purpose and could possibly be implemented for 1-800-Flowers.com. Such as the inclusion of a Send to/Delivery Date set of form fields on the homepage, and simplify the website’s featured navigation bar links.

Card Sorting

The current 1-800-Flowers website has many product options for customers to choose from. It’s possible that so many links at the forefront of a customer’s journey can be intimidating. To better understand the content structure of the 1-800-Flowers website, we conducted an open card sorting study.

Labels were created from our team’s competitor analysis and comparison to 1-800 Flowers’ current navigation structure. 5 participants were recruited for the survey and completed the activity. We used the results of the card sorting exercise to make recommendations about the content structure of the website.

Our activity results reinforced our decisions for the site map layout. Necessary navigation categories include Shop Flowers, Occasions, Shop Plants, Sale, About Us, Subscriptions, and Contact Us. We also realized that including the Upcoming Holiday (Valentine’s Day, Easter, Mother’s Day, etc.) as a top-level navigation link is beneficial for driving customers directly to bouquets if they’re only on the website to holiday shop.

Wireframes & Prototyping

After reviewing the responses from our card sorting participants, we began building wireframe prototypes featuring a few of 1-800-Flowers.com’s webpages. The assembled web pages reflect some of the site’s current pages alongside re-imagined pages based on our competitor analysis.

We performed moderated user testing for the low fidelity wireframes and unmoderated user tests with Usertesting.com for the medium-fidelity wireframes. The medium-fidelity wireframe prototype included interactive mockups and allowed test participants to navigate some of the website’s pages.

User feedback for both low and medium-fidelity wireframes versions was mainly focused on the terms used, and how they could be misleading or confusing. For example, our medium-fidelity wireframe includes a Subscription page for flower delivery and a form field for the mailing list. Multiple users were confused over whether viewing the Subscription page would allow them to sign up for the mailing list. So, when I began building high-fidelity wireframes I made sure to flesh out the descriptive text on the Subscription page to empasize that it was for a monthly delivery service.

style guide

The final stage of this project was to create a style guide for our 1-800-Flowers redesign and three mobile/desktop high-fidelity wireframes. The color scheme for the website is inspired by the rich, vibrant colors of purple pansies.

I wanted the tone for the website to be modern, casual, and easy-going. Therefore, all header text is lowercase by default, and exclamation points are used sparingly. My design influences include flower companies and a variety of other brands that I feel embody the style I was going for, like Fresh Sends, Glossier, and Samantha Pleet.

high-fidelity wireframes

Closing Thoughts

This project was a great experience in understanding how the UX design process works. My first foray into full-on UX design, I had to exercise a lot of patience and learned how vital all of the steps involved with this process help create a polished end result.

One of the most interesting and greatest challenges was deciding what pages and features were a necessity. If given the chance to continue working on this project, I would be interested in creating more high-fidelity wireframe pages and once again ask users to test the prototypes’ usability.