My First Attempt at Designing a Responsive Website
Using Adobe XD was cooler than I thought
Product Overview
Bouquet Garden is an online florist store that offers affordable flower bouquet and plant options for people who want to gift a loved one or beautify their spaces. The target users are between 21–60 years old and are early to late-career professionals. Bouquet Garden’s goal is to make gift giving easy, fast and accessible for its users.
Project duration: September 2021
My role: UX designer leading the Bouquet Garden website design
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
The problem:
For my second project in the Google UX certificate, I chose to design a responsive website for a local florist store. I took on this project because I wanted to address the challenge of gifting flowers in a place where it is not usually considered a gift option. There are not a lot of options for ordering flowers and where they are, the options are often lacklustre.
The goal:
Design a website for a local florist by providing an incentive to buy flowers, clear navigation and offering an easy checkout process.
Understanding the user
The first step was conducting user research. For this, I conducted user interviews with 4 participants which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users didn’t consider flowers to be an affordable and practical gift option. However, many were not opposed to getting flowers alongside other gift items.
Pain points:
- Affordability: Flowers are often expensive and above users’ budget.
- Practicality: Flowers aren’t items that can be used or consumed like gadgets or food.
- Information: Users don’t have a lot of knowledge on care for flowers and plants.
Developing a Persona:
Compiling the empathy maps, I developed a persona for Lanre, a career professional who spends most of his days at work and was on the lookout for a life partner.
Lanre is a busy mid-career professional who needs affordable, practical, but luxurious gift options because he would like to show he cares without breaking the bank.
I created a user journey map of Lanre’s experience to help identify possible pain points and improvement opportunities. Some of the improvement opportunities included options to personalise gifts and creating different packages and options.
Sitemap:
Difficulty with choosing what to get for a loved one was a primary pain point for users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. I highlighted a section for collections (categories) of flowers so users could browse based on intent or occasion.
From Wireframes to Prototypes
Paper wireframes:
Next, I sketched out paper wireframes for each screen, keeping the user pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations focused on optimising the browsing experience for users. Stars were used to mark the elements of each sketch in the initial drawings to create the refined paper wireframes.
I decided to put the logo on the right because I wanted the same-day delivery to be highlighted more prominently.
I also thought putting the navigation for the shop items at the top would help to easily mix and match filtered results with the option to use the hidden filter menu.
I also started to work on designs for additional screen sizes to make sure the site would be fully responsive when accessed on a variety of different devices.
Digital wireframes: Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful groups of information on the home page was a key part of my strategy.
Lo-fi prototype: To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow. I implemented several suggestions in places that addressed user pain points. The homepage was optimized for easy browsing through collections and a quiz to personalise gift options.
At this point, I conducted a usability study and received feedback on my designs on things like the user flow and page organisation.
Usability Study
Parameters:
- Moderated
- 4 participants between the ages of 21–60
- Time - 20 minutes
- Location - Nigeria
Findings:
- Cart - Users were confused about the button to add items to the cart
- Checkout - Users were confused about the checkout button which was placed in the middle of the screen
- Account - There was no clear way for users to check their orders after placing them
Mockups
Based on the insights from the usability study, I made changes to improve the site’s navigation flow. One of the changes I made was repositioning the logo to occupy a centralised spot on all pages while placing navigation a step below that.
To reduce confusion on the cart function, I changed the add to cart button from a ‘like’ to a cart and a ‘+’ button, all while including considerations for additional screen sizes in my mockups based on my earlier wireframes so that users have the smoothest experience possible.
Hi-fi prototype: My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
Accessibility considerations
- From the onset, I ensured that colours I selected adhered with WCAG recommended contrast levels.
- I used landmarks and hierarchy to help users navigate the site, including users who rely on assistive technologies.
Takeaways
Impact: Feedback from our target users implied that the design was simple to use and had a clear way to navigate.
What I learned: Changing a way of navigating that users are familiar with to an unfamiliar method can impact the user experience in a negative way.
Next steps: Conducting usability studies to receive feedback on the accessibility site, and researching whether highlighting the options to purchase individual stems or tiny plants more prominently can help with the hesitancy in buying flowers for loved ones in Nigeria.
Tools: Adobe XD, Google Docs, FigJam
Thank you for viewing my work on the Bouquet Garden site!
Is there something you think I should know or do better? Let me know in the comments, or @ me on Twitter.
