Project Overview
As part of the Google UX Design Certificate, I designed a website for ordering flowers online. Florist is a website that enables people to purchase flowers and delivery them to another address.
My Contributions
My role in the project as a UX designer comprised UX research consisting of a competitive audit, persona creation, a research study plan, an unmoderated usability study with 5 participants, an affinity diagram, customer journey map and a sitemap. Research informed the creation of a website that took users through the entire booking process.
1. The Problem
Buying flowers online can be a lengthy process. Completing delivery details can be confusing and delivery prices are often not upfront.
The Goal:
To enable users to easily order flowers online for delivery to another address.
Research
User research comprised a competitive audit of 3 direct and 1 indirect competitor. An empathy map was produced as well as a research study plan and a usability study involving 5 participants.
Florist
UX Designer
Feb 2022
1. Usability test
An unmoderated usability test was conducted with five participants, two females, two males and one non binary individuaA script was prepared in advance to ensure I wasn’t asking any leading questions.
Research Objectives:
- Identify user behaviour
- Identify mental models and user expectations
- Identify pain points
- Identify areas for improvement
2. Analysis
Now it was time to gather all the data together in one place. To do so I created an affinity diagram and grouped the data into themes. I also produced a customer journey map, noting the users' actions, tasks, feelings and opportunities for improvement.
Key Findings
After analysing all the date many pain points and room for improvement were uncovered as outlined below:
- Confusing Delivery: Delivery details can be confusing as certain items are only available for certain locations. Going forward users will be able to select location upon adding an item to their bag.
- Hidden Prices: Delivery prices are only shown after the item has been added to the bag. Going forward prices will be upfront so that users can see how much delivery will be prior to checkout.
- Messages & Notes: Currently there is no way to add a special message or notes for delivery. Going forward this will be incorporated into the checkout process.
- Unclear Status: Users are not sure where they are in the process and how many steps are left to complete the process. Going forward there will be a progress stepper so users know where they are in the process.
3. Design
Prior to sketching wireframes, I needed to get a good overview of the information architecture. To do this, I produced a sitemap showing the hierarchical structure as seen below.
Sketching
Using the Crazy Eights method I produced many diferent variations of each screen and for different screen sizes as can be seen below.
Wireframes
It was now time to create some digital wireframes. Designing the frames, I took into account that the content should be easily discoverable and users should be able to access the homepage as they scroll. Users can enter the flow from multiple locations including from the menu, the hero image, the search bar and the trending menu.
Mockups & High-Fidelity Prototype
After refining the design, it was now time to produce the final mockups and connect the screens. You can view the prototype
here Going Forward
After completing the mockups and hi-fi prototype it was time to look at the key takeaways and the next steps in the process.
Want to work together?
If you like what you see and want to work together, get in touch!
orla@portfolio.com
