Dallas Flower Florist
An Online Flower Shop
Website Redesign
Project Overview
The Dallas Flower Florist project aimed to redesign the florist's website to enhance usability and create a seamless user experience. The project focused on addressing key pain points, such as disorganized navigation, unclear product categorization, and hidden delivery information, which added friction to the user journey.
Role
Tools
Team
Duration
UX Researcher
UX/UI Designer
Figma
Miro
Zoom
Paper
pencil
Group of 4
2 Months
Part-time
Research Process
1) Discover
2) Define
3) Develop
5) Deliver
4) Design
Discover
Results of Heuristic Evaluation:
The categories on the homepage were disorganized, making navigation confusing.
Overuse of the color red in the fonts created a sense of error and alarm for users.
The types of floral arrangements were not clearly labeled, requiring users to perform additional searches to understand their options.
Delivery information (availability in Canada, Mexico, and the US) was only revealed during the checkout process, which complicated the user journey and added unnecessary friction.
Several other usability issues were noted, which we addressed during the redesign.
Results:
After kicking off the project, we outlined our research strategy and objectives, prioritizing a deep understanding of the target audience and their challenges. We started by creating an online survey and distributing it across relevant communities. Within just a few days, we gathered 38 responses. These insights helped us uncover user preferences, guiding us seamlessly to the next phase of the project.
Preferred Search Methods on Websites:
By categories (e.g., bouquets, arrangements, plants): 39.5%
By occasion (e.g., birthdays, weddings): 39.5%
By price range: 18.4%
By flower type:
Importance of Product Reviews and Ratings:
Extremely important: 42.1%
Cart Sorting Results:
We organized product categories into intuitive groups based on user input to enhance the navigation and usability of the Dallas Flower Florist website. We divided the categories into three main sections: Flowers, including popular options like orchids, roses, and seasonal bouquets; Occasions, tailored to events such as weddings, birthdays, and sympathy; and Plants, featuring items like green plants, flowering plants, and dish gardens. This user-focused structure allows us to streamline the shopping experience, ensuring customers can easily find products that meet their needs.
Heuristic Evaluation
To gain a deeper understanding of the business and evaluate the website's usability, we began with a heuristic evaluation as an initial step in our research.
Next, to gain insights into user needs and expectations, we conducted a survey to gather valuable data on their preferences and pain points.
Competitive Analysis
Here are some of the websites we referenced for our competitive analysis.
Some of the factors we took into account during our competitive analysis:
Imagery: Are high-quality images used to showcase floral arrangements?
Consistency: Is the design cohesive across all pages?
Use of White Space: Does it create a clean, spacious look?
Ease of Navigation: Is it simple for customers to browse products and find information?
Intuitive Layout: Are categories (e.g., bouquets, special occasions) easily accessible?
Search Functionality: Is there a search bar with filters like price, flower type, or occasion?
Product Descriptions: Are there clear details about flowers, sizes, and customization options?
Reviews & Testimonials: Are customer reviews visible on products or the homepage?
Contact Information: Is it easy to reach the florist (chat, phone, email)?
Return/Refund Policy: Are policies clearly stated for damaged or delayed deliveries?
Survey
Cart Sorting
Define
Main Goals:
To easily find and purchase beautiful flower arrangements for various occasions (birthdays, anniversaries, celebrations, and condolences) without hassle.
To have reliable, on-time delivery with options for same-day or next-day service.
To access a user-friendly, visually appealing website or app that offers seamless navigation and a straightforward checkout process.
Sophie, a 35-year-old assistant professor, is overwhelmed with work. She suddenly remembers that her friend’s birthday is tomorrow. She feels nervous and unsure of what to do.
Sophie talks to a colleague about her situation. The colleague suggests ordering flower and recommends Dallas Flower Florist, mentioning that she has used it several times and always had a good experience.
Following her colleague’s advice, Sophie visits the Dallas Flower Florist website. She is pleased to see a wide variety of flowers and arrangements.
Sophie applies filters based on price, color, arrangement, and delivery date to narrow her options
Sophie selects the flower box she likes the most, adds it to her cart, proceeds to checkout, enters her payment information, and places the order successfully.
After placing the order, Sophie tracks the delivery status to ensure the flowers will arrive on time.
To outline the tasks for our design and present the user information obtained from our research, we developed a persona and a scenario.
Persona & Scenario
Story Board
All images are generated by AI
Develop
Site Map
At this step, we designed the user flow for the task – This flowchart illustrates the step-by-step journey a user takes when ordering flowers online, from opening the website and selecting the occasion to filtering by flower type, color, and price, adding the product to the cart, completing payment, and confirming the order.
We then redesigned the site map to create a more intuitive and user-friendly structure. Our goal was to simplify the browsing experience for user.
User Flow
Design
Some of our sketches and low-fidelity designs
To ensure a consistent and uniform design, we created a comprehensive UI kit that includes a color palette, typography, buttons, and other essential design elements.
Here are some of our initial design pages. We refined and redesigned them through continuous iterations to enhance usability and visual consistency.
UI Kit
Deliver
Next Step
Usability Testing: Conduct additional user testing with the redesigned site to gather more feedback and identify any remaining pain points.
Enhanced Product Imagery: Introduce high-quality images and possibly 360° product views to provide a clearer representation of the flower arrangements.
Order Tracking Improvements: Refine the real-time order tracking system with clearer status updates and delivery notifications.
Prototype Additional Website Sections: Expand the scope of the project by working on other key areas of the website