Fiona Flor

It's easy to shop for beautiful florals.
Fiona Flor project image showing high fidelity website
Springboard UX/UI Design
Designer | Self-Led
3 weeks | 90 hour limit
Key Skills
UX Research

Research Synthesis

User Flow Diagram

Low-Fidelity Prototype

High-Fidelity Prototype

Usability Testing

UI Design


Visual Design
Project Overview
Springboard's second capstone project allows for students to explore their own topics of interest. Several scenarios were given, and my selection was an e-commerce shop that had been experiencing a high rate of abandonment of both cart and website. I selected this topic to gain a deeper understanding of the way design influences consumer behavior.

By understanding the browsing habits of users and the issues that lead to abandonment, my goal was to create a design that aligns with business needs and improves the overall user experience.
I’m not a big fan of ordering flowers online... I feel like depending on the season, whatever I selected will not look the same as what I saw on the website because they’ll go with what’s available.
The Challenge
An e-commerce shop focusing on flower sales has a major issue — the manager for Fiona Flor reported that 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Their hypothesis is that users are unable to determine which florals are best based on relative features. Data also shows that users abandon their cart at the registration page.
The Goal
This design aims to enhance browsing and checkout to improve the product's overall usability to increase Fiona Flor's e-commerce sales.
01. Research

This project began with the discovery phase, in which research was conducted to gain a deeper understanding of the issues that Fiona Flor is currently experiencing. Methods consisted of a screener survey to gain user insights, as well as one-on-one interviews that led us to fully grasp the needs and the pain points that users are experiencing.

Half of users expressed difficulty in buying flowers online, in addition to the following information...
All of the users interviewed expressed very similar frustrations when ordering flowers online. This points to major issues that need to be resolved in the next phase.
02. Synthesize

After the research phase, I began to synthesize the data obtained by seeking commonalities between user experiences. Here, we discovered that the issues the users faced were almost universal. The insights gained enabled me to create a persona and a problem statement from which to continue along the design process.

AFFINITY MAP — After conducting user interviews and re-reading the transcripts, I took the similarities and turned them into an affinity diagram. I used virtual sticky notes to write down observations and direct quotes from participants. These were then placed in clusters that corresponded to a theme. By organizing them in this way, I was able visualize the main issues that users typically face when buying flowers online.

RESEARCH INSIGHTS — Affinity mapping was a useful tool to identify patterns commonly experienced by users and organize common issues by importance. These patterns were turned into research insights, which enabled me to identify three pain points that require a solution:

No. 1
Product Accuracy
Users are often disappointed that arrangements shown online don't look the same in person.
No. 2
Seasonal Arrangements
Users expressed frustration that florists often change the arrangement by adding seasonal flowers without prior notice.
No. 3
Most users that purchase flowers for themselves create arrangements on their own.

PERSONA — Based on the insights gained in the previous exercises, similarities between our users were used to generate a persona. This is a representation that reflects the shared interests, goals, and concerns of the users identified during the discovery phase. This was extremely crucial in gaining an understanding of real needs and challenges faced by buyers and incorporates the unique issues experienced when purchasing flowers online.

PROBLEM STATEMENT — A problem statement was generated to guide the ideation phase of the design process.

Poppy is an architect with an eye for design who needs to order specific flower arrangements because she wants to make thoughtful selections for her friends and for her home.
03. Ideate

The affinity map and persona developed in the previous phase enabled me to identify the pain points that require a solution. Through this process, I was able to come up with a problem statement to guide the design process. Defining the issue in this way allowed for the ideation process to begin.

HOW MIGHT WE's — Keeping the insights acquired during the synthesize phase in mind, I used "How-Might-We" questions to continue ideating. By reframing these insights and turning them into questions, I began to build a proper framework for design thinking. This exercise prompted me to explore the challenges that were uncovered and turn them into design opportunities. The key questions posed during this activity were the following:
How might we facilitate the selection of flower arrangements for our users?


How might we enable users to customize their own flower arrangements?


How might we make users feel confident in their floral selections?

USER STORIES — In addition to How-Might-We questions, two user stories were created to reflect our users, their desires, and their goals. These were largely inspired by our persona, Poppy, and go as follows:

As a person with many friends, I need to send the right flowers to my loved ones so that I can thoughtfully acknowledge their life's biggest moments.


As an architect with an eye for design, I need to order custom arrangements so that I can complement the spaces I create with florals.

MINIMUM VIABLE PRODUCT — Once our user stories were developed, I created two epics to further examine user pain points. This consisted of outlining the steps required to complete the user goals laid out in the stories. This exercise revealed potential features that users can benefit from, as well as improvement opportunities to incorporate in the design for Fiona Flor's website. Defining these steps enabled me to establish the minimum viable product to be created.


The ideate phase enabled me to identify potential design solutions by reframing the problem space, as well as recognize potential gaps and opportunities. How-Might-We questions and user stories were tools used to start thinking about the actions needed to help users achieve their goals. This phase will take these ideas and turn them into a functional solution.

RED ROUTE DIAGRAMS — Once the minimum viable product was established, I created red route diagrams to help users accomplish important tasks. Here, I identified key actions and pages that users will take when using our product. They consist of purchasing a single species of flowers, ordering a flower arrangement, and creating a custom arrangement. The red routes — seen in the form of a user flow — establish the most critical tasks for our product's success.

PAPER SKETCHES — The user flow diagram became a tangible digital product in this design exercise, where I used paper sketches to implement the critical tasks defined in the previous step. Concepts in these drawings include ways to customize floral selections and facilitate product selection, as well as techniques to make buyers feel more confident in the look of their purchases in order optimize their shopping experience.

LOW-FIDELITY PROTOTYPE — Drawing on the design used in the sketches, a low-fidelity prototype was created to test the usability of our digital product. The success of this prototype was measured by analyzing the ease or difficulty in performing the critical tasks identified in the previous steps.

GUERILLA USABILITY TEST — The final step in the design phase was conducting a guerrilla usability test. We recruited people at a coffee shop to test our paper prototype in order to identify pain points and ensure that our product is easy to use. We sought to find out if existing features are useful and if there are any issues with our red route user flows. The findings were compiled into a report and consist of the following:

4 out of 5 users had difficulty locating the page to order a single species of flowers
We need to change the wording from "Stems" to something more intuitive
2 out of 5 users asked how they can select their desired color for custom flowers
We need to add a color selection option to the custom arrangement page, as well as the "Stems" page

The previous phase enabled me to realize the ideas that were generated during ideation and turn them into a design solution. By identifying critical tasks and turning them into a low-fidelity prototype, I was able to identify pain points that need to be resolved. In this phase, I will be refining the design of our product by incorporating visual design elements to our updated high-fidelity prototype. This iteration is based on combining our brand identity with the feedback gathered from the guerrilla usability test.

VISUAL DESIGN — Once the screen layouts were established using wireframes, the process of visual design began. Because Fiona Flor is a floral e-commerce shop, I made color selections according to those found in florals for the product interface. This includes shades of green — which are reminiscent of stems and leaves — as well pink — a bright, contrasting color that is found in many flower species. We wanted the store to be modern yet classic, so we used a combination of serif and sans serif fonts.

MOCKUPS — The visual design elements in the previous section were applied to our digital wireframes. In doing so, we created high fidelity mockups that enabled us to see what our next prototype is going to look like.

HIGH-FIDELITY PROTOTYPE — To create a high-fidelity prototype, I took the mockups and connected the screens using Figma. This iteration adheres to our visual design guidelines and incorporates changes based on feedback from the guerrilla usability test.

06. Test

The previous phase enabled me to refine the design to better accommodate user needs. Using feedback from the guerrilla usability test, I was able to make design changes and incorporate UI elements to optimize our prototype and turn it into a more user-friendly product. In this phase, the high-fidelity prototype was used for the final part of this case study — user testing.

4 out of 5 of users wanted to see an image of the updated custom arrangement based on their selections
We need to make sure customers can view the arrangement they are customizing prior to placing their order
3 out of 5 of users did not notice the updated subtotal after add-ons were selected
We need to make the updates more visually apparent, since pricing changes based on customization options
1 out of 5 asked if the price increases when selecting a larger arrangement
We need to add prices to size selections so that updated pricing is reflected in the subtotal

MODIFICATIONS — The usability test data enabled me to use these insights and create an updated design for the Fiona Flor website. These modifications were made according to user feedback to make a more useful product for buyers. To accomplish this, I added pricing to the different arrangement sizes and moved the updated subtotal to the "Add to Cart" button. In addition to this, interactive elements were added to update the product photo based on customization selections. These changes can be seen below:

REFLECTION — The next step would consist of a further round of usability testing and applying design solutions based on our findings.

This project has shown me how design influences user behavior, as well as how thoughtful solutions can align business goals with user needs. I aimed to facilitate Fiona Flor's shopping experience by resolving pain points —  primarily by enabling users to search for flowers efficiently, finding ways to make them feel well-informed about the look of their purchases, and giving them greater control of their purchase by incorporating customization options.

Part of this project was also preventing cart abandonment, which was accomplished by prioritizing guest checkout. Because this project had a 90-hour limit, I wasn't able to spend as much time finding solutions as I would have liked to. Although Fiona Flor's design works, I would have loved to spend more time making checkout a unique and efficient experience.

Thanks for reading!
Screens of Fiona Flor e-commerce site