top of page

FLOWERSHOP

The Product:
A responsive website for a local flower shop: FLOWERSHOP
​
The Purpose:
To create a flower ordering flow for a local flower shop that allows users to easily purchase flowers on their desktops, tablets or phones. 
 
My role: Lead UX Designer
​
Duration: June 2021 - July 2021
​
​

​

UX Research 

Five participants were interviewed on Zoom for one hour. The participants were screened by answering in the affirmative that they had purchased flowers more than once either online or on their phone.
 
 
From the UX Research I aggregated interviewee responses into two empathy maps and two personas.
 
 
Screen Shot 2021-07-03 at 10.59.46 AM.png


Problem Statement:
Aden is a Busy MBA student who needs to buy flowers online so that he can send gifts to his family and friends.
Aden 2.png
Screen Shot 2021-07-03 at 11.00.22 AM.png
Screen Shot 2021-07-03 at 10.59.33 AM.png


Problem Statement:
Mary is a therapist and gardener who needs to order flowers online because she wants to decorate her house and office to make people feel warm and welcome.
Screen Shot 2021-07-03 at 11.19.52 AM.png

User Journey Map:

Mapping Mary‘s User Journey revealed areas for improvement in the flower ordering flow process.

Starting the Design

Sitemap

For the flower purchase flow the website follows a hierarchical structure.



 
Screen Shot 2021-07-03 at 11.22.58 AM.png
Paper Wireframes

To address various sizes I began with a top-down approach. To move from a desktop to a mobile I added elements such as a hamburger menu.


 
Screen Shot 2021-07-25 at 4.55.24 PM.png
Digital Wireframes

One of the goals was to ensure the homepage was simple, easy to navigate and not overcrowded. Deals and flowers to purchase are the focal points on this page.

.
Home Page.png
Screen Shot 2021-07-03 at 12.06.47 PM.png
Low-Fidelity Prototype
 
It was important to ensure that users could recognize action buttons and navigate easily through the app.

 

Screen Shot 2021-07-03 at 11.56.34 AM.png

Usability Studies

Screen Shot 2021-07-03 at 12.14.02 PM.png
Screen Shot 2021-07-25 at 4.38.58 PM.png

Refining the Design

Mockups

During the second usability study users commented on how the action buttons all seemed the same on the flower ordering page.  We enlarged the "Add to Cart" button and changed the shape of the delivery vs. pick up buttons. These made the page more accessible and easier to navigate.








 
2B Flower Order.png
1A - Home Page – 1.png
7A Payment.png
9 Gallery.png
Sm - Flower Order.png
High-Fidelity Prototype

The final high-fidelity prototype provided an easy way for users purchase flowers online.
 
Screen Shot 2021-07-03 at 12.49.25 PM.png
Accessibility Considerations
 
  • Accessibility Labels were added to all action buttons.
  • Hierarchical headings were added to help user more easily navigate pages.
  • Icons with text made up the menu bar to facilitate understanding.

Moving Forward

Impact:
 

The FLOWERSHOP responsive web page allows users to easily purchase flowers on their desktops, tablets or phones.

What I learned:
 

I continue to learn how important the user experience  and accessibility is in building software. I gained great insights into building responsive web pages. I attained experience in Adobe XP creating low and high-fidelity prototypes.

Next Steps:
​

  • Conduct more UX Usability Studies to determine what users want when ordering flowers.

  • Continue to increase the accessibility of the app.

  • Address P1 themes that arose in the usability study such as understanding the difference between standard, premium and deluxe.

Back to top
bottom of page