Floral Gifts is an application that allows users to create personalized floral arrangements easily and quickly. The app is designed to simplify the customization process and make it more personal.
When ordering floral arrangements online, they can sometimes feel static, impersonal and unable to be customized. Many websites are cluttered with ads and arrangements that the user isn't interested in. It can also be challenging to track previous orders or reorder them.
To address these problems, my goal is to create an app that enables users to easily find and personalize floral arrangements. It would also allow them to track their orders and make changes if necessary. Personalizing an arrangement to include or exclude specific flowers would give users the opportunity to show they care, even if they can't be available in-person.
I conducted my initial research using surveys and interviewing family and friends with the following goals in mind:
Based on that initial research, I created personas and user journey maps to represent the product's user base and their pain points to better empathize when thinking of design solutions.
This is an example of one of the personas and their problem statement.
Problem Statement:
Lisa is a traveling analyst who needs to know what her floral arrangements look like and when they arrive because she enjoys sending meaningful gifts while she travels.
I used ideation techniques such as Crazy 8's and How Might We questions to brainstorm ideas on how to simplify the purchasing process and allow users to customize their arrangements. To ensure that each concept had the necessary features, I created a list of essential elements for each screen and spent about a minute sketching each idea. Then, I picked my favorite layouts, which turned into my paper wireframes.
The initial design for the app showcased various arrangements based on upcoming holidays or browsing by meaning or color. This made it easy for users to find arrangements that align with their preferences for a particular occasion. The "Customize Arrangement" screen allowed users to add or remove flowers by selecting the flower's pictures, and the flower meanings were displayed alongside the arrangement's description. This helped users make informed decisions about the flowers and their meanings without leaving the app.
The digital wireframes were modified to consider how the app would connect with local florists. This meant that users had to input their zip code and delivery date before proceeding with the user flow. I updated the home screen to feature more types of arrangements, making it easier for users to find what they needed.
The arrangement details screen was also improved by listing the flower's meaning and pet safety information next to the flower picture. This made it easier for users to pick flowers that were more meaningful to them and the recipient. The icons for swapping or removing flowers from the arrangement were located next to this information.
The low-fidelity prototype using these digital wireframes include the user flow for browsing and customizing an arrangement, and going through the checkout process (the link will open in a new tab).
I conducted moderated usability studies after creating a low-fidelity prototype. The usability studies were conducted live in-person and over Zoom. I took notes during the study and while reviewing the user's actions again via a recording. Then I consolidated the information and organized it via an paper/sticky-note affinity diagram (seen below).
After determining themes from the information, the study had the following insights:
During the usability study, users went through 4+ screens to enter their zip code, date, and time for their order. Users would hesitate during this process during the study as it took too many clicks to complete. It also didn't allow them to confirm their information before proceeding to the next step. With user feedback in mind, I reduced the amount of necessary clicks, as well as added a spot to review the entered data before continuing to the flower selection.
As for the customizing process, users hesitated before selecting a flower to switch out. This was due to the wrong type of icon being used for the situation. Most users read the "swap" button as a "refresh" icon during the usability study, so it was changed to be a more traditional icon for editing based on the research findings.
To make the app warm, inviting, and natural, I chose a color palette and typeface that reflected these qualities. I also ensured that buttons and text were designed for readability and used WebAim's contrast checker for accessibility. Most buttons and menus included both icons and text to make the meaning of the action clear before the user interacts with it.
