Exquisite Florist Store Responsive Website
- aaliafazal0207
- Nov 28, 2023
- 6 min read
Updated: Nov 30, 2023
Author & Tools:
Aalia Fazal | UX researcher
Miro | Online Whiteboard for Visual Collaboration
Google Slides/Forms/Sheets/Docs
Adobe XD
Project Overview
The Product:
Floral Bounty is an exquisite florist outlet focused on people who are nature & peace lovers, to relax and enjoy their free time after their hectic work schedules.
Project Duration:
November 2022 to April 2023.
The problem:
Nature & peace lovers and busy managing their hectic work schedules in the tech world (at times even household chores) find it difficult to order and get all delivered including exquisite flowers/bouquets & naturally scented ornaments/artifacts perfectly on time and at ease.
The goal:
Our Exquisite Florist Website (Floral Bounty) will let users order and receive exquisite flowers/bouquets & naturally scented ornaments/artifacts at ease which will affect those who nature & peace lover but are also busy managing their hectic schedules in the tech world & family chores by delivering all orders perfectly on time at ease.
My role:
UX designer designing responsive website for Floral Bounty from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Understanding the user
User research: summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to order exquisite flowers/bouquets & naturally scented ornaments/artifacts, etc...
This user group confirmed initial assumptions about Floral Bounty (Exquisite Florist Outlet) customers, but research also revealed that time was not the only factor limiting users from ordering at home/workspace. Other user problems included obligations, interests, or challenges that make it difficult to order without getting tensed & waiting in long queues.
Project Background:
The reason for choosing this project is my love for exploring every aspect related to nature, especially since I am a nature-lover. I am a big fan of exquisite flowers/bouquets & naturally scented ornaments/artifacts, which excited me to choose this project. The idea of the app is to cater to the needs of a wide array of people of all ages who are bound by the love for exquisite flowers/bouquets & naturally scented ornaments/artifacts to celebrate (simple and precise), to enjoy every moment of life while also, receiving quality customer service at their fingertip (during their hectic daily schedules) & for those who feel connected and productive to work sitting in a calm space away from family and office.
Research Goals:
I would like to determine if users can easily order and receive exquisite flowers/bouquets & naturally scented ornaments/artifacts. These findings will measure the effectiveness/impact on those who are nature & peace lover, but are also quite picky & perfectionist and busy managing their hectic schedules in the tech world by having proper coordination when orders are placed and picked up with efficient customer care support.
User research: study details
Research Questions
Open up our Exquisite Florist Outlet website on your desktop/tablet/phone and customize flowers/bouquets order for yourself. Do your best to talk me through your thought process. How easy do you feel it is to customize a flower/bouquet the way you like it? What was easy and what was challenging?
If I were to say, “start a new group order”, would you know what to do? Try it out now, please. Did you find anything confusing?
From the existing group order screen, customize your order with your desired add-on preferences (naturally scented ornaments/artifacts) and proceed to the checkout screen. How do you feel about the process of purchasing multiple items in the same order? What was easy and what was challenging?
Finally, checkout and complete the group order. How do you feel about paying for different orders in the same transaction? What are your feelings about the amount of time it took to complete?
How do you feel about our Exquisite Florist Outlet’s Website overall? What did you like and dislike about it?
Participants
5 participants
4 Females, 1 Male
Participants include full and part-time workers, students, caretakers, and parents.
KPIs
Time on task
User error rates
System Usability Scale (SUS)
Methodology
5-10 minutes per participant, based on a list of prompts
Remote (Each participant will complete the study in their own home)
Compensation: NIL
Unmoderated usability study
Users were asked to perform tasks (lists of prompts) in a low-fidelity & high-fidelity prototype
User research: pain points
too many elements on a page and users find it a little confusing
Navigation was a bit complex and confusing
hard to complete & very confusing
Users were totally confused (couldn't find the place to start a group order)
checkout process seems easy (not for multiple orders)
Users felt the order completion process was a bit complicated (as they need to log in first at the end)
Persona: Danny
Problem statement:
Danny is a fresher in the tech world. He is quite picky and perfectionist who works round the clock. His colleagues depend most of the time on him during hectic schedules. His craze for nature & peace makes him often to take a stroll and experience scenic beauty as a mark of destress routine with hectic schedules and the teamwork pressure.
User journey map
Mapping Danny’s user journey revealed how helpful proper communication regarding the timing aspect of preparing and delivering exquisite flowers/bouquets & naturally scented ornaments/artefacts, would be for users to have access to a dedicated Floral Bounty: Exquisite Florist Outlet’s Responsive Website.
Persona: Heer
Problem statement:
Heer, an author is a focused woman who very well knows how to manage family life. She maintains a balance between work schedules and family chores, without making a mess together. She loves calm environment where she can concentrate easily on work.
User journey map
Mapping Heer’s user journey revealed how helpful timely deliveries, and proper customer care to solve delivery and payment issues, would be for users to have access to a dedicated Floral Bounty: Exquisite Florist Outlet Responsive Website.
Design Iterations
Sitemap
Difficulty with website navigation 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. The structure I chose was designed to make things simple and easy.
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritised a quick and easy ordering process to help users save time.
Paper wireframe screen size variations
Because Floral Bounty’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes (Case 1)
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.
Prioritising useful button locations and visual element placement on the home page was a key part of my strategy.
Digital wireframe screen size variation(s)
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected for ordering and customising exquisite flowers/bouquets & naturally scented ornaments/artifacts, so the prototype could be used in a usability study. View the Floral Bounty (Exquisite Florist Outlet) low-fidelity prototype
Usability study: parameters
Usability study: findings
These were the main findings uncovered by the usability study:
Refining The Design
Mockups (Case 1)
Early designs allowed for some customisation, but after the usability studies, I added additional options to choose exquisite flowers/bouquets & naturally scented ornaments/artifacts. I also revised the design so users can see all the customisation options when they first land on the screen.
Mockups (Case 2)
The second usability study revealed frustration with the checkout flow. to streamline this flow, I consolidated the “current order” and “add-ons / customization ” to one “My Cart summary” screen with arrows to how many items are added in the cart and each items details (in concise format). I also added products billed option to this screen (for users to cross-check too).
Key Mockups: Original screen size
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for ordering exquisite flowers/bouquets & naturally scented ornaments/artifacts and checkout. It also meets user needs for a pickup or delivery option as well as more customization. View the Floral Bounty (Exquisite Florist Outlet) high-fidelity prototype
Accessibility Considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Used detailed imagery for exquisite flowers/bouquets and add-ons to help all users to customize according to their preferences.
Takeaways
Impact:
Our responsive website makes users feel like Floral Bounty (Exquisite Florist Outlet) really thinks about how to meet their needs.
One quote from peer feedback:
“I believe the website feels complete around the ordering experience of custom flower/bouquets. With just that aspect alone, I think this responsive website is all set and successful. Your customization experience is great and has a nice flow.”
What I learned:
While designing the Floral Bounty (Exquisite Florist Outlet) website, I learned that the first ideas for responsive website are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the website’s designs.
Next steps
Conduct more user research to understand what new features might be implemented in the future so we can further create a true experience for users
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Let’s connect!
Thank you for your time reviewing my work on the Floral Bounty (Exquisite Florist Outlet) responsive website!
If you’d like to see more or get in touch, my contact information is provided below.
Email: aaliafazal0207@gmail.com
Behance: https://www.behance.net/AaliaFazal
Comentarios