The Flower House Website Design - Case Study
Responsive Website Design for The flower house website - Ashish Oza
The product:
The flower Hosue is a Mumbai based Flower shop that offers affordable flower pricing options with scheduled delivery. The primary users are busy working people and people living outside Mumbai who can schedule the delivery of quality flowers and get them delivered to their loved ones. The goal of the flower house is to provide solutions for simple shopping, scheduling and gifting.
Project duration:
Feb 2022 To March 2022
The problem:
In our initial research, we found that not many florists provide flower delivery service online and scheduling of delivery with other gift items. we would like an online ordering process for our customers so that they can order from their comfort zone.
The goal:
Create a mobile and desktop experience for The Flower House so that its customers can order flowers online from the comfort of their homes.
My role:
Lead UX/UI Designer from conception to delivery
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding
the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research: summary
I conducted user surveys, which I then turned into empathy maps to better understand the users needs when ordering flowers. I discovered that many users enjoy being able to view beautiful images and shop from their devices in quick steps. The ability for The Flower House customers to be able to order flowers online would mean ease and joy brought to people's lives from anywhere in the world.
User research: summary
1
No online ordering system
2
National functioning delivery service to deliver the flowers anywhere the user desires
3
Ability to send personal messages and other gift items(chocolates, cards) with the flowers.
4
Ability to browse flowers for any occasion
Persona: Chaitali
Problem statement:
Chaitali is a Busy software developer living in California
who needs to order flowers online
because she wants to wish her friend on her birthday who lives in India.
.jpg)
User journey map
I created a user journey map of Thabo’s experience buying flowers to help identify possible pain points and improvement opportunities
.jpg)
Starting
the design
-
Sitemap
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Sitemap
My goal here was to make a simplistic web navigation system for people to easily and quickly shop for their favourite flowers
.jpg)
Paper wireframes
Wireframes for the desktop experience to discover how to make a responsive web page.
Paper wireframe
screen size variation(s)
Wireframes for the desktop experience to discover how to make a responsive web page.
.jpg)
Digital wireframes
Moving from paper wireframe to digital was quite simple. Prioritizing useful and clear button location and creating visual elements was part of my design strategy.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
View The Flower House Low Fidelity Prototype
.png)
Usability study: parameters
Study type:
Unmoderated usability study
Location:
remote
Participants:
5 participants
Length:
5 to 10 minutes
Usability study: findings
These were the main findings uncovered by the usability study
Findings:-
On the desktop version, users had no way to process payment or how payment would take place
Refining
the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Mockups
Based on feedback from the usability test, i added the Login section for users to be able to see their account and other details.
Before Usability Study
After Usability Study
Mockups
Based on feedback from the usability test, i added the cart section for users to be able to see what’s in their cart.
After Usability Study
Before Usability Study
Mockups: Original screen size
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for online orderingof flowers and checkout. And visual representation of final design layout.
View The Flower House Hi Fidelity Prototype
.png)
Accessibility considerations
1
Using headings with different sizes for clear visual hierarchy
2
Using a lot of images as cues for those that may be struggling with vision
3
Alt text for smooth screen reader access.
Going forward
-
Takeaways
-
Next steps
Takeaways
Impact:
Users are excited about the prospect of being able to make orders for their favourite flowers and have them delivered to their loved ones.
What I learned:
I learnt the importance of accessibility and I have learned that because of the 4th industrial revolution, most communities are looking at moving towards remote resources that offer the same services as they would physically which means designing apps and websites for different causes is crucial and important in this day and age to help people communicate with their favourite services.
Next steps
Conduct research on whether or not most people are able to navigate the website and the mobile application for their intended use.
Let’s connect!
Thank you for your time reviewing my work on The Flower House Website! If you would like to see more or would like to get in touch, my contact information is provided below.
ashishoza.com