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.
SCREENER SURVEY — In this step, a research plan was generated to list goals, methods to accomplish these goals, and to identify the target audience. These objectives include understanding the browsing and buying habits of customers with regard to online flower purchases. A survey was then sent to eleven people that have experienced ordering floral arrangements online. I discovered the following information:
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.
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:
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.
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.
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:
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:
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.
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.
USABILITY TEST — The next step consisted of conducting the first usability test using the Fiona Flor website high-fidelity prototype. A usability test plan was created in order to test the efficacy of the design and obtain feedback to further refine the website. Testing on 5 new users allowed for us to gauge whether the product suited the needs of our audience. We asked them to perform three tasks: purchase a single species of flowers, order a flower arrangement, and create a custom arrangement. The findings consisted of the following:
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.
