top of page

The Flower House Website Design - Case Study

Responsive Website Design for The flower house website - Ashish Oza

MOCKUP 1.png

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


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.

mockup 3.png
mockup 2.png


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


No online ordering system


National functioning delivery service to deliver the flowers anywhere the user desires 


Ability to send personal messages and other gift items(chocolates, cards) with the flowers.


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.

florist persona (1).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

User Journey Map the flower house (2).jpg


the design

  • Sitemap

  • Paper wireframes

  • Digital wireframes

  • Low-fidelity prototype

  • Usability studies


My goal here was to make a simplistic web navigation system for people to easily and quickly shop for their favourite flowers 

Web 1920 – 1.png
theflowerhouse (1).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.

theflowerhousemobile (1).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. 

Google Pixel 5a – 1.png

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

Screenshot (7).png

Usability study: parameters

Study type:

Unmoderated usability study




5 participants


5 to 10 minutes

Usability study: findings

These were the main findings uncovered by the usability study  


On the desktop version, users had no way to process payment or how payment would take place


the design

  • Mockups

  • High-fidelity prototype

  • Accessibility


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

cart – 1.png
Login Page tdh.png


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

cart tfh.png

Before Usability Study


Mockups: Original screen size

Product Page.png
About Us.png
Contact Us.png
Confirmation page.png

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

Screenshot (14).png

Accessibility considerations


Using headings with different sizes for clear visual hierarchy 


Using a lot of images as cues for those that may be struggling with vision 


Alt text for smooth screen reader access.

Going forward

  • Takeaways

  • Next steps



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.

bottom of page