✿ ✿ ✿ ✿ ✿
— Life’s Short. Take Time to Smell The Roses. —
Flori is a trendy flower catalogue app for a florist located in a major city on the Pacific Coast. Flori aims to create a fun and unique experience for users to purchase flower arrangements for pickup or delivery. Flori’s arrangements are contemporary while remaining affordable. Flori’s flower catalogue app targets customers like young professionals who lack the time to pick out flower arrangements in person but still care about the quality and aesthetic of the arrangements.
Background
Purchasing flowers online is becoming more and more popular, as busy young professionals want to capitalize on the convenience that modern technology provides. The focus of the challenge was to streamline the process of choosing and ordering flower arrangements, which involves a number of tasks. When choosing a flower arrangement, multiple factors influence a users’ decision. For example, users are concerned about the price, longevity, and aesthetic of the flower arrangement. In order to address this challenge and design an effective solution, I wanted to understand more about my users and their attitudes towards current flower delivery services. I followed the user-centered design process from start to finish to ensure my design decisions were supported by research and tackle real user needs.
The Challenge
✿ EMPATHIZE ✿
I began the research process by creating an online survey with 10 questions that aimed to help identify the most common factors that influence a user’s decision to purchase flowers online. I recruited 15 participants from ages 22-40 to complete the survey. About half of the participants identified as females and the rest identified as males.
Foundational Research
All users have purchased flowers at some point in their life, whether it be for themselves or someone else. In general, users have positive feelings towards purchasing flower arrangements and view the process as an exciting experience.
As expected, price plays an important role in where users decide to purchase flower arrangements from. In addition, style and flower type are factors users consider.
Findings
What are the most important factors you consider when purchasing flowers?
To my surprise, more users (35%) prefer to buy flowers in person at a local flower shop and at the grocery store (28%) than online (25%), with few preferring to purchase flowers by telephone and at a local farmers market. When asked why, users provided a number of different responses:
If applicable, why do you not order flowers online?
As identified, price is a large constraint in a user’s decision to order flowers online. In addition, 27% of users expressed concerns about visual representation. Users are hesitant to order flowers online because they cannot see what the flowers will look like in person. Additional comments about flowers catalogue websites included: “they’re not user-friendly,” “they’re expensive and tacky-looking,” “they lack personalization” and “the websites can be overwhelming.”
On the other hand, those who do prefer to purchase flowers online rather than in person identified convenience as the most important factor that influences their decision. These users prefer to save time picking our arrangements in person, especially when sending flowers to someone who does not live close to them.
After collecting and analyzing the data found through foundational research, I began developing personas to identify target user groups and their needs.
Persona Development
I began to map out Adeline’s user journey in order to illustrate what users goes through to achieve their goals and address pain points they face. With this information, I identified improvement opportunities to create an obstacle-free path for users.
User Journey Map
Research helped identify various factors that contribute to users’ decisions to purchase flowers online in addition to a number of pain points that user face while interacting with flower catalogue apps and website.
Key Findings
| Time: Young professionals are busy and would prefer to save time physically visiting a flower shop and picking out an arrangement.
| Money: Users would like to utilize the convenience of purchasing flowers online but are concerned about the cost.
| Personalization: Users want the option to personalize flower arrangements according to their preference and be given a visual representation of what to expect.
| Information Architecture: Text-heavy and image-crowded apps and websites make it difficult for users to navigate and choose an arrangement.
| Accessibility: Platforms for ordering flower arrangements are often not equipped with assistive technologies.
Our user is a busy young professional who would like to send his mother flowers for her birthday. He wants to capitalize on convenience by ordering an arrangement through an online flower delivery service. He has never used a flower catalogue app before and is concerned about the price, quality, and number of customization options available. He would like a quick and easy way to order flowers for his mother that are personal to her while remaining within his budget.
✿ DEFINE ✿
✿ IDEATE ✿
To begin the ideation phase, I started brainstorming ways to address user pain points. I asked:
How Might We
| Provide users with better visual representations of what to expect?
| Allow users to customize a flower arrangement to make it unique and personal?
| Improve the ordering process by giving users accurate pricing?
| Offer enough options to cater to all user needs while maintaining a clean and simple interface?
| Ensure the app is accessible to all users?
How Might We:
I began sketching ideas on pen and paper for the user flow and design of Flori’s flower catalogue app. I first outlined user flows. Next, I create big-picture and close-up storyboards to connect insights uncovered during research with the user flow experience. Lastly, I began drafting wireframes. I created a list of elements to include on the homepage and combined the most important elements into one page that would minimize the amount of time it takes users to choose and purchase flower arrangements.
Sketching
✿ DESIGN ✿
After completing a full set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was choosing and ordering a flower arrangement. My initial design featured elements that address the pain points found in my initial research study. The ability to filter results was a priority, as price, style, and flower type were found to be the most important factors users consider when purchasing flowers. In addition, I added the option to build your own bouquet, as this would allow users to choose exactly which types of flowers they want and spend as little or as much money as desired.
Lo-Fi Prototype
I built a UX research plan to identify research goals, build research questions, and determine how to collect, measure and analyze data. I decided to conduct two unmoderated usability studies. I measured progress through a number of KPIS: time on task, user error rate, and system usability scale. The results from the first study were used to convert the initial digital wireframes into mockups. The second usability study was used to refine the mockups.
✿ TEST ✿
| Users want both pick up and delivery options.
| Users found the “reorder” button unnecessary and distracting.
| Users need clearer instructions on how to build their own bouquet.
Round 1 Findings:
Mockups
I iterated on my initial low-fidelity wireframes based on feedback from the first usability study. I added visual design to the wireframes and kept in mind Gestalt Principles to create my first round of mockups. I reflected on my progress before creating a high-fidelity prototype.
In this phase, my emphasis was put on visual consistency, navigation, and interactions. I added interaction details and animation to serve the core user flow:
High-Fidelity Prototype
1) Exploring Categories
2) Browsing and Filtering Results
3) Customizing Arrangements
4) Completing the Checkout Process
From the home page, there are multiple ways to view flower arrangements. There is a “shop now” button on the home screen, a preview of popular arrangements that can be clicked on, and a “categories” button on the main navigation bar. Providing multiple options allows users to quickly and easily browse arrangements for efficient shopping.
01. Open App & Explore Categories
02. Browse Arrangements & Filter Results
After selecting a category, there is the option to filter results. Users can filter arrangements by price, style, flower type, and occasion. Filtering helps maintain a clean interface while providing a large amount of options to cater to all user needs. Users can narrow down results based on personal preference, which speeds up the process of choosing an arrangement.
If users want to create a more personal arrangement, they can navigate to the “Build Your Own Bouquet” page. Users can choose as many primary flowers, secondary flowers, filler flowers, and add-ons as they please. The price updates as users add and subtract flowers. Customizing allows users to have complete control over the size of the arrangement, the types of flowers included, and the price. It is a great option for those who know exactly what they want and/or are on a budget.
03. Build Your Own Bouquet
04. Add Arrangement to Bag & Checkout
Once users choose a flower arrangement, they can easily add it to their bag with a click of a button. The bag icon updates with a notification next to it. Users are prompted to click on the bag, proceed to checkout, enter personal and payment details, choose pick-up or delivery, and place the order. A confirmation page is displayed with order details after the checkout process is completed.
Final Prototype
✿ EVALUATION ✿
In my final usability study, I recruited the same participants to test out the prototype and deliver feedback. Participants reacted positively:
Round 2 Feedback
| Users were able to complete the main user flow with minimal issues.
| Users felt the checkout process was simple and efficient.
| Users especially liked the “Build Your Own Bouquet” feature, as they found it unique and interesting.
| Users found the filter button useful and could see themselves utilizing this feature in real life.
There was one main iteration I decided to make on my design based on user feedback. Although users reacted positively to the “Build Your Own Bouquet” activity, there was still some frustration involved in the process. The meaning of size options “Single”, “Double” and “Triple” was unclear to users. In addition, users wanted descriptions of each flower, as they were not familiar with all flower types. I made sure to include this iteration in my final prototype, as seen in the previous previews.
Before
—>
After
In the initial prototype, users were prompted to select an arrangement size. After analyzing user feedback, I decided to add an information button next to "Select Size.” Users can hover over the information button, which triggers a pop-out window that explains the number of flowers included in each size. In addition, I added an information button next to each flower type. When selected, a brief description of the flower’s general appearance, scent, and estimated longevity is revealed.
When deciding the overall design of the app, I kept in mind my target audience and main challenges. I decided to keep the design simple, calm and delicate. I used mainly white and black to maintain a clean interface. I added light pinks and blues as accent colors to compliment the colors of the flower arrangements without overshadowing them.
✿ DESIGN ✿
✿ ACCESSIBILITY CONSIDERATIONS ✿
I revisited the Web Content Accessibility Guidelines throughout my design process to ensure my design decisions adhered to accessibility standards. I made a few small adjustments to my prototypes that could make a large difference to some users.
| Added alt text to images for screen readers for those with visual impairments.
| Used color contrast ratios with surrounding text that follow the Web Content Accessibility Guidelines.
| Used icons and imagery to help users navigate the app more easily.
✿ REFLECTION ✿
As Flori was the first case study project I worked on, I learned many important lessons. I learned the importance of following a user-centered framework. Following this design process continued to remind me to keep my users front and center and make design decisions based on research. I also learned the importance of planning. While I wanted to jump right into the design, planning allowed me to stay organized and focus on the main challenge. Creating a detailed research plan before conducting usability studies was very beneficial, as it ensured that I would receive valuable feedback to consider in my iterations. I am excited to learn more and revisit this project in the future.
Takeaways
| Conduct another usability study to identify additional pain points that users might face when using the app.
| Review accessibility standards and brainstorm more ways to ensure the app is accessible to all users.
| Conduct more research on competitors to determine how to offer new and unique features.
Future Steps