Redesign of The Dallas Flower Florist Website

A local flower shop

Project Overview

Problem Statement

Timeline

Team

Role

Tools

8 Weeks

Group of 4

UX/UI Designer

Figma, Figjam,
Photoshop, Canva and
google Form

  • Navigation Issues: Users struggle to navigate the website efficiently, leading to difficulties in finding and selecting desired products.

  • Incomplete Purchases: The poor user experience often results in potential customers abandoning their shopping process before completing a purchase.

  • Low Customer Numbers: The current number of customers is less than expected, highlighting a gap between business goals and actual performance.

  • Product Offering Visibility: The website fails to effectively showcase the business's wide range of products and services, making it difficult for users to understand their full offerings. To address these issues, the business is considering a complete website redesign.

Redesign Process

My team of 4 ran a double Diamond method based on the Design Thinking Methodology. It was not a linear path, we bounced between stages as the project progressed.

Discover

Prior to conducting user interviews, our team of four performed a heuristic evaluation of the website to identify major usability issues and gain insights into key areas for user research.

Heuristic Evaluation

Survey

Birthdays and anniversaries are the most popular occasions for buying flowers. In response:

  • we've made these categories more accessible and noticeable in the navigation bar .

  • We've also placed these occasions as the first option in the filter.

Price and high-quality images are top priorities for customers. To address this:

  • We've implemented a price filter to help customers easily find products within their budget.

  • With the business allowing us to take charge of this section, we've provided insights on how the flower photos should be presented, ensuring that clear, high-quality images are displayed with the help of AI to generate the website photos.

Define

Interview & Affinity Diagram

Key Takeaways:

  • Prioritize delivery and packaging: This is the most critical aspect and should be the primary focus.

  • Categorize by occasion: Flowers should be organized based on different occasions for easier selection.

  • Provide filters: Include options for customers to filter flowers based on their specific needs and preferences.

  • Transparent pricing: Ensure that prices are clearly displayed and easy to find.

  • Highlight reviews: Make customer reviews readily accessible.

  • Include detailed descriptions: Offer comprehensive information, including care instructions, longevity, and size of the flowers.

Competitive Analysis

We performed a competitive analysis to identify key areas where our website can improve and gain insights from competitors.

  • We also noticed that businesses offering same-day delivery often feature this option separately in the navigation bar, so we've implemented this approach on our website as well.

Story Board

Lilly's primary concerns are finding a range of price options for bouquets, along with a trustworthy service that guarantees fresh flowers and timely delivery.

Persona

Site Map

User Flow

Develop

Sketch

Low- Fidelity

Mid- Fidelity

Mood Board

UI kit

Deliver

High Fidelity Wireframe

Here is the last prototype, displaying what we've achieved through our design process.

Prototype

Bright living room with modern inventory
Bright living room with modern inventory

Iteration and Usability Test

Before Usability Testing

After Usability Testing

Added a 'Same-Day Delivery' dropdown to clearly show where the service is available. Previously, this information was only in the 'About Us' section, which caused confusion. Some users thought same-day delivery included Canada and Mexico because those countries were mentioned at the top of the page. This update makes the details clear and easy to find.

The return policy for flowers was previously only mentioned at checkout. Since freshness and timely delivery are important to users, and they were actively looking for this information during their purchases, we’ve added it to the homepage, right after the review section, for better visibility

"Home Page"

After Usability Testing

Before Usability Testing

The postal code input box was moved to the filter section to ensure users consider both options together, as the postal code is essential for availability also a dropdown with days and dates was included to make selecting a delivery date easier and more intuitive for users.

Adjusted the category page to display more options and pictures with less scrolling, making it easier for users to browse and explore products quickly

Reordered the price filter in the filter section, placing it after the flower and plant filter. This adjustment was made based on user behavior, as they preferred to select a price range after choosing the type of product.

"Category Page"

Users wanted to confirm the selected delivery date before adding a product to their cart, so we incorporated this feature.

Users expressed a desire to see more product reviews before making a purchase, so reviews were added to the product page as well.

Before Usability Testing

After Usability Testing

What have I learned?

  • Research played a key role in making the product work better.

  • Working together as a team helped us deliver on time and stick to deadlines.

  • Testing and tweaking made the product easier and more enjoyable to use.

  • Building a UI kit kept everything consistent and made communication smoother.

  • Evaluating the current design and testing it with elderly users to check accessibility.

What can we do next?