Happy Stems
Happy Stems is an online flower shop that allows users to send floral arrangements to their loved ones. The typical user is between 21- 60 years old, and most users are career professionals. Happy Stems’ goal is to make ordering floral arrangements quick, enjoyable, and accessible.
Project Overview
CHALLENGE
Other online floral shops are cluttered, offer too many options and can be overwhelming to users.
ROLE
UX Designer leading the Happy Stems responsive website design.
RESPONSIBILITIES
GOAL
Design Happy Stems’ website to be user friendly by providing clear navigation and offering a fast ordering process.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on responsive designs.
PROJECT DURATION
September 2021 to October 2021
TOOLS
Adobe XD
Research
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users consider online shopping to be a relaxing and enjoyable activity. However, many websites are overwhelming and contain too much information which frustrates many users causing them to leave websites without ordering. This in turn can make a seemingly enjoyable task one of tedious nature.
PAIN POINTS
-
Navigation: Floral shop websites are often very busy and contain a lot of information, which makes navigation frustrating for users.
-
Interaction: Buttons should be clear and easy for users to locate and understand.
-
User Experience: The user wants the process to be enjoyable and not confusing at any point in the ordering process.
PERSONA
Problem Statement: Nadia is a busy website designer who needs to easily find a florist online because she wants to send flowers to her loved ones.
USER JOURNEY MAP
I created a user journey map about Nadia’s experience using the website to help identify any possible pain points she came across as well as opportunities for improvement.
Site Map & Wireframing
SITEMAP
Difficulty with website navigation was a main pain point for users, so that information was used to create a sitemap. My goal was to make specific information architecture decisions that would improve the overall navigation of the website.
PAPER WIREFRAMES
I sketched paper wireframes for the main screens of my app while keeping in mind the user pain points about navigation and checkout efficiency in mind.
Stars were used to mark the elements of each sketch
that would be used in the initial digital wireframes.
Refined wireframe.
PAPER WIREFRAMES (SCREEN SIZE VARIATIONS)
Because Happy Stems’ customers will be accessing the website on all different devices, I began designing the website for additional screen sizes to make sure the site would be fully responsive.
DIGITAL WIREFRAME
Transitioning from paper to digital wireframes simplified the ability to address and improve user pain points.
I made button placement and visual element placement a priority in this process.
The homepage of the website for a computer screen and a mobile phone.
LOW-FIDELITY PROTOTYPE
For the low-fidelity prototype, I connected all of the screens that were included in the primary user flow - selecting an item, adding it to the cart, and checking out.
I adhered to the feedback from my users involving button placement and page organization that directly addressed their pain points.
USABILITY STUDY PARAMETERS
The low-fidelity prototype connected the primary user flow of logging in or creating an account to selecting a floral arrangement and placing an order.
​
Study Type: Unmoderated
Location: Remote
Participants: 4
Length: 10 - 15 minutes
USABILITY STUDY FINDINGS
-
While ordering, users wanted to have options when selecting the product size and quantity when making a selection.
-
After checking out, users wanted a final confirmation assuring them that their order went through successfully. They also wanted to be notified of what to expect next with their order.
Mockups & High Fidelity Prototype
MOCKUPS
Based on the insights from the usability study, I made changes to the ordering flow. One of the changes I made was for users to have two instead of three size options to choose from. Another change that I made was adding the option for users to edit the quantity of the item they plan to purchase with a “+” and a “-”.
​
To improve the checkout process, a screen was added after checking out that informs users that their order was successfully received and gives them instructions on what to expect next.
MOCKUPS: ORIGINAL SCREEN SIZE
MOCKUPS: SCREEN SIZE VARIATIONS
In an effort to make this a responsive website, I designed it to fit both a computer screen and a mobile phone screen. This was important for me to consider as I designed the website because people access websites from a variety of devices, especially their mobile phones. I wanted users to have the an equally smooth experience across all devices.
​
HIGH-FIDELITY PROTOTYPE
My high fidelity prototype followed the same user flow as my low fidelity prototype but included visual changes.
ACCESSIBILITY CONSIDERATIONS
-
I used headings of various sizes to establish a clear visual hierarchy.
-
Buttons with a clear design were used to move users throughout the flow of the website.
Reflection & Next Steps
IMPACT
The target audience expressed that the website was easy for them to navigate and that the simplicity of the design was not overwhelming.
1. Conduct follow up usability testing on the new website.
WHAT I LEARNED
I learned that taking the time to design a website for multiple formats is so important for the optimization of the business. This takes into consideration the needs of users who oftentimes access websites on the go using their mobile devices.