Duration

Project Overview

Role

Team

Tools

Target Desktop

12 weeks - part time

UI Designer

Groupe of 4

Miro, FigJam, Figma, Zoom, Google Forms

Website

Business Analysis:

•A flower shop based in Dallas TX
•Shipping to USA and Canada
•Products: Flower baskets, flower bouquets, plants, flower stands, Fruits and sweets baskets
•Our value: 100% satisfaction Guarantee, customization, same day delivery for Dallas area

Brief of the Project:

In this project, we showcase our work in redesign an online floral boutique's website to provide a better user experience, covering everything from exploring the flower catalog to making purchases and scheduling deliveries.

Improving the website's information architecture, enhancing product caring, and updating the design are crucial for boosting sales. Additionally, there's a pressing need to enhance filtering capabilities on the website to meet customer expectations.

Business Need:

We aim to better understand prospective users and their needs so we can provide:

• Smooth and convenient navigation

• Interviewed potential users to understand their concerns and needs

• Float surveys to understand why users avoid buying plants online

Our Approach:

Design Process

Discover

Heuristic Evaluation

We applied the Heuristic evaluation model to conduct a thorough assessment of the business website, systematically scrutinizing its content across four main themes.

1. Lack of Clarity:
   . Product categories lack clear organization.
   . Goals of the website are not well-defined or prioritized.
   . Users are unsure about the desired actions to take.
   . Navigation terms are unfamiliar and confusing.
   

2. Lack of Consistency:
   . Language and categorization are inconsistent.
   . The homepage displays various visual styles, using different color schemes and fonts.
   . The design aesthetic appears dated and lacks consistency.
   . Untitled and randomly placed pictures on the homepage contribute to inconsistency.
   

3. Lack of Efficiency:
   . Popular categories are not easily accessible.
   . Some buttons on the website are non-functional.
   . Users face difficulties adding multiple items to the cart without starting over.
   . There is no option for users to change the quantity of items in the cart.

Understanding the Competition

In this case study, we conducted an in-depth competitive analysis of nine flower and plant shops. The primary focus was to evaluate their product offerings and e-commerce experiences, aligning the findings with our project objectives.

Surveys

Target Audience Selection:
Identified and targeted the primary audience for the flower shop, considering demographics, online behavior, and preferences.

Key Findings:
Identified usability pain points, guiding improvements in navigation and user interface.
Obtained insights into product preferences, influencing decisions on presentation and categorization.
Uncovered user expectations regarding delivery, payment, and overall shopping experience.

Interview

During interviews with potential users and the subsequent creation of an affinity diagram, we identified key customer priorities:

• freshness guarantee

• Price options

• reliable payment methods

• Also, birthdays were the most common occasion for purchasing flowers

Define

Persona

Story Board

Card Sorting

How do users think the website should be organized?

We conducted an open card sorting from competitive analysis and heuristic evaluation of website. 15 people participated in the online research and were able to create their own categories. The following is a result of our card sorting.

Site Map

How did we design the information architecture?

Based on the results of the competitive analysis and card sorting, we developed the site map.

Flow Chart

We aimed to simplify the user journey for floral purchases by streamlining search, selection, and payment processes. Through intuitive design, we ensured a seamless experience from choosing a bouquet to completing the purchase.

Develop

Sketching helps us to draw our ideas together and move forward in the next stage of the design process based on iteration and testing with users.

Sketches

Wireframing

After sketching our ideas, we turned them into digital outlines that were ready for testing. This step helped us find solutions for problems and meet user needs. We made improvements along the way, fixing any issues before creating more detailed versions of our designs.

Home page

Product page

Selection flower

Shipping information

Payment information

Confirmation page

Our mood board showcases a palette dominated by dark and light greens, complemented by soft cream and pale pink tones. These colors evoke natural beauty, freshness, and warmth. In psychology,
. Dark green associated with sophistication
. Light green brings vibrancy
. Cream adds elegance
. Pale pink introduces charm
This color scheme not only aligns with the floral theme but also leverages psychological principles to create a harmonious and inviting atmosphere for the redesigned flower shop.

Mood Board

Our UI Kit is a streamlined design toolkit featuring:

Typeface: A carefully chosen font for readability and brand consistency.
Colors: A cohesive palette for a visually appealing and memorable interface.
Input Boxes: Stylish and functional, ensuring a seamless user experience.
Buttons: Intuitive design, promoting engagement and clear calls to action.

UI Kit

Deliver

Our usability test evaluates the website's user-friendliness and effectiveness, conducted with real users to uncover insights and identify potential pain points. Through direct interactions, we aim to ensure a seamless and intuitive journey, fostering a positive online experience. See major iterations below.

Usability tests

(1) We updated the header for better usability and included a zip code search for localized navigation, meeting users' needs.

(2) We refreshed the header with vibrant colors and a new logo approved by stakeholder. Responding to user feedback, we enlarged and strategically positioned the zip code area in the hero section for easier access.

(3) We noticed problems with product card visibility. So, we resized the cards and changed the layout to make them easier to see and improve the user experience with adding delivery date option.

Before

After

(4) we adjusted filter boxes, resized cards, and updated their design. Additionally, we introduced extra filters to better meet diverse user needs.

58.4 S

100 %

0 %

100 %

Average Duration

Direct Success

Misclick Rate

Confidence Rate

Reflection

Deep understanding of a problem is crucial for solving it. In redesigning a flower shop website, we've gained valuable insights into user preferences, navigation challenges, and areas for improvement. When redesigning a platform, it's vital to balance business goals with user needs. Our insights have shown that simplicity and intuitiveness are the most effective solutions.

What did I learn?

What can we do next?

Moving forward, the team has identified several options for the next steps:
Strengthen Guarantee Policies: Clearly communicate product quality assurances.
Enhance Pricing Strategies: Propose adding pictures for different sizes of bouquets pending stakeholder approval.
We are planning to add a section where a user can see the selected plant in a specific part of his/her space. The need for the same was initiated in the early stages of the project when we were interviewing with our potential users.