UX Case Study

Petals & Allure

Unique Floral Arrangements for Every Occasion

Project Overiew

Petals & Allure is a Minneapolis boutique floral shop that offers unique floral arrangements for daily occasions and also caters to weddings and special events. Their objective is to develop a responsive website to make online access to unique and custom floral arrangements quick and easy.

Faced with the issue of cluttered and inefficient designs of existing floral websites, my goal was clear—to design a streamlined platform that simplifies the ordering process and provides clear navigation to order floral arrangements. 

Project:  This project within the Google UX program and with a prompt through Sharpen allowed me to delve into user research, persona development, competitive analysis, ideation, wireframing, prototyping, usability testing, and responsive design.

Rooted not only in academic exploration but also in a personal connection—inspired by my mother’s real-world challenges of having a low-quality website lacking advanced ordering options for her floral business—I aim to create a digital solution that not only meets industry needs but resonates with local florists seeking an accessible and elegant online presence.

Team: Individual Project

Role: UX Strategist | Researcher | Designer

Tools: Figma, Miro, Google Suites

The Problem

Challenge: Minneapolis’ online floral platforms face cluttered designs, inefficient product browsing, and confusing checkouts, lacking essential details and user confidence.

 

How might we create a seamless and straightforward ordering flow while creating an engaging experience?

The Solution

Solution: Petals & Allure’s responsive website serves as an accessible and reliable platform, featuring clear navigation for ordering, customization, and enjoyment of high-quality floral products, with the aim of becoming a premier destination for hassle-free shopping and distinctive arrangements.

Design thinking phases

DESIGN THINKING : A non-Linear Process

 

The Process

Phase 1 — Empathize

User Interviews — Empathy Maps — User Personas — User Stories — User Journey Maps = The Foundation of a User-Centered Design Process

Defining the Opportunity Areas

Embarking on the Petals and Allure website development, I saw three opportunities for improvement:

  1. Enhanced User Experience

  2. E-commerce Functionality

  3. Visual Appeal and Brand Representation

 

The primary goal was to enhance user experience through easy navigation and intuitive interaction, additionally integrating seamless e-commerce functionality to streamline transactions and improve the shopping process. The final objective was to encapsulate Petals and Allure’s brand essence as a reliable and unique local business specializing in creative floral arrangements.

 

Foundational Research

I interviewed 10 individuals in Minneapolis to uncover pain points in their online flower ordering experiences, a crucial step in user-centric design. Understanding user frustrations, preferences, and expectations is vital for the redesign of Petals & Allure’s platform.

Interview Questions:

  1. What aspects do you find most frustrating or challenging when using current online floral platforms?

  2. Can you recall a specific instance where you faced difficulties while navigating or placing an order on an online floral website?

  3. What features or details do you believe are lacking in existing online floral platforms?

  4. How important is clear and detailed information, including images and reviews, when choosing floral arrangements online?

  5. Have you encountered any issues with the checkout process or delivery options when ordering flowers online?

  6. In your ideal online floral platform, what features would you prioritize for a seamless and enjoyable experience?

Key Insights

The initial interviews revealed four user pain points related to ordering flowers online:

Empapthy Maps & Personas

PA Empathy Map - User Julia
PA Empathy Map - User Emili

Empathy Maps — Interview answers were organized and categorized based on shared characteristics, goals, and needs to create two aggregated user personas to represent two target user groups.

User Personas — Converting empathy maps into user personas enhances empathy and understanding, translating key insights into actionable representations for a more user-centered design approach.

Problem Statement: Alex is a 28-year-old marketing consultant from Vancouver Canada who recently visited Sayulita Mexico and fell in love with the town. Alex needs a streamlined remote adoption process because he wants to adopt a pet from Sayulita and bring it back to Canada.

 
User Persona - Emili

Problem Statement: Jasmine is a 27-year-old bartender with a music degree living in Sayulita who needs a simple and straightforward pet adoption process because the current lack of traditional adoption platforms in Sayulita makes it difficult for her to find information about available animals.

 

User Journey Maps — User personas were used to create a user journey map to visualize and understand the customer’s interactions with Petals & Allure’s flower arrangement viewing and ordering process to understand key touchpoints, emotions, and interactions throughout their user flow.

Julia´s User Journey Map
Emili’s User Journey Map

Phase 2 — Define

— Problem Statements — Hypothesis Statements — Goal Statements

Question: Which of my user needs are most important in my design to address?

By determining the goal statements for my two personas, I was able to take the action and outcome of the hypothesis statements and expand them to articulate specific and measurable goals for the restaurant app. The goal statements are also a vital tool for honoring a project’s business requirements.

 

Goal Statement: Julia —The Petals & Allure website will enable swift and straightforward online flower ordering, benefiting busy event planners like Julia who seek efficient access to fresh, unique floral arrangements. The impact will be measured by tracking the average order placement time and user satisfaction.

Goal Statement: Emili — The Petals & Allure website will offer a user-friendly online flower ordering platform, enhancing Emili’s living space with fresh flowers and creating a rejuvenating atmosphere at home. The effectiveness of this goal will be measured by assessing user satisfaction and ease of platform navigation.

Phase 3 — Ideate

Competitive Audits — How Might We — Rapid Sketching — User Flow Diagram — Storyboards

 I conducted competetive to understand the current market and multiple usability studies during the prototype and testing phases to iterate on designs based on user feedback. Initially, I assumed that users primarily seek wedding and event-specific flower arrangements. However, the research revealed that our target audience, which includes those seeking flowers for daily life or special occasions, values not only high-quality arrangements but also the convenience of the online ordering process and the significance of supporting local businesses.

Competitive Audit Report

How Might We…

How might we translate user problems, needs, or pain points into opportunities for design?

  • Amp up the good?

  • Change the status quo?

  • Break the point of view into pieces?

how might we ideation

Rapid Sketching

“Crazy Eights” is a great way to ideate in a visual and tactile way. I sketched eight different ideas quickly and without judgement for ways to solve user painpoints.

Phase 4 — Prototype

Site Map — Wireframes — Mockups — Prototypes

Site Map

  • Organization

  • Hierarchy

  • Sequence

The site map serves as a visual guide to organize and include essential features such as pet browsing, adoption processes, virtual meeting coordination, and international adoption information. The goal is to provide all users with an intuitive and efficient navigation system following a intuitive path.

 
PA Site Map

Paper Wireframes

I sketched 5 iterations of the homepage to explore various designs. Stars mark features to integrate into the final paper wireframe version.  

The primary goal of creating paper wireframes was to visualize the initial layout and structure of the website, focusing on the arrangement of key elements. Through paper wireframes, I sought to establish a clear information hierarchy and user flow.

Responsive Design — In the final paper wireframe iteration of the homepage, my focus was on combining the most effective design elements from the five iterations. The goal was to create a unified, responsive home page that offers an intuitive and visually cohesive experience across devices.

Lo-Fidelity Wireframes

PA Low Fidelity Wireframes

Using wireframes, I put my ideas on paper first and then started to make high-fidelity wireframes.

 

Lo-fidelity Prototype

The low-fidelity prototype connected the primary user flow from logging in viewing a pet to set up a meeting with a prospective pet. The Low-fidelity prototype was tested in the first unmoderated usablity study.

PA Lo-Fidelity Prototype

Design Systems

I created a series of reusable elements to develop the app more quickly and consistently, following predetermined brand standards.

Color Scheme

PA Color Design Theme

Typography

Phase 5 — Test

Usability Testing — Organize Data / Affinity Diagram — Analyze and Synthesize Data — Turn Data into Patterns and Themes — Translate Patterns and Themes to Actionable Insights — Prioritize Insights — Modify Designs — Repeat

 

Research Questions:

  1. Can users find the product they are looking for?

  2. Do users understand how to add items to their cart?

  3. Are there any parts of the checkout flow that users struggle with?

  4. Can users easily navigate to different parts of the website from the landing page?

  5. Do users think the webpage  is easy or difficult to use?

Usability Studies

I conducted two usability studies to refine the Petals & Allure webpage. The initial unmoderated study assessed the lo-fi prototype, guiding revisions based on user feedback. Subsequently, a second moderated usability study aimed to validate the success of these changes and thoroughly evaluate the functionality of the hi-fi prototype. 

Gather the data in one place — Organize the data — Find themes — Translate themes into insights

 
Usability Study Round 1 Findings
Usability Study Round 2 Findings
PA Round 2 Usability Findings

Based on insights from the first usability study, the checkout process was unclear to all users. The checkout flow was improved to include a button to select delivery or pickup from the user’s cart page.  A field to input a delivery address was added as well as a checkbox to conveniently use the same shipping address as billing  address.


Find all themes and insights derived from the first usability study in Research Report 1.

Research Study Plan can be found here.

PA Insight from usability study 1
Insight from Usability study 2

Find all themes and insights derived from the second usability study in Research Report 2.

The second usability study revealed the insight that custom arrangement options were still unclear to users. A brief description of each of the four custom arrangement styles was added below each base flower option.


 

Hi-fidelity Mockkups

Hi-fidelity Mockups

Hi-fidelity Prototype

PA High-Fidelity Prototype

The final high-fidelity prototype showcased a more intuitive user flow for browsing, searching, and scheduling meetings with prospective pets. It also catered to user needs for clearer adoption guidelines for both national and international pet adoptions

Accessibility Considerations

Accessibility considerations PA

Color Contrast and Readability

I ensured sufficient color contrast between text and background elements to enhance readability for users with visual impairments by using Web Content Accessibility Guidelines (WCAG).

PA Color Contrast Accessibilty

Sequential Keyboard Navigation

I implemented a numbered annotation system to establish a logical traversal order, facilitating efficient keyboard navigation for users.

Hierarchical Headings

I documented hierarchical headings to order elements on a page and highlight their importance.

Inclusive design, essential for accessibility, ensures that products and environments cater to a diverse range of users, fostering equal access and usability for everyone, often resulting in improved design for all.

The Next Steps

To move forward with this project, the next steps would involve conducting another round of usability studies post-launch. This would help validate the effectiveness of the implemented design and address any unforeseen issues that might arise during real user interactions. Additionally, further user research would be conducted to identify new areas of improvement and potential features to enhance the overall floral ordering experience.

 

Takeaways—

Considering my personal connection to the floral business, I am eager to collaborate with local florists, including my mother, to bring this online platform to life. This would involve refining the website based on ongoing feedback and possibly expanding its functionality to better cater to the unique needs of local florists and their customers.

Moreover, I would continue learning about diverse user groups and explore ways to make the designs more accessible. This approach ensures that the platform remains inclusive, providing a seamless and enjoyable experience for users with varying needs and preferences.