You didn’t come this far to stop.
Dallas Flower Florist
A floral business website
PROJECT OVERVIEW
Redesigning the Dallas Flower Florist website was a project we were assigned to in a team of four at UX-Land school.
Problems
Outdated look
Inconsistent visuals
Confusing navigation
Hidden shop button
Goals
Designing a user-friendly interaction with smooth navigation
Featuring a swift selection option for delivery time and location
Ensuring instant visibility of the shop button upon site entry to encourage user to purchase
DESIGN PROCESS
Our team of four implemented a Double Diamond Design approach inspired by the Design Thinking Methodology.
DISCOVER
In the discovery phase, our priority was understanding problems rather than assuming them. We utilized methods like heuristic evaluation, comparative analysis, and interviews to delve into the challenges needing solutions.
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.
What did we find?
The homepage displays various visual styles, using different color schemes and fonts.
The current navigation lacks intuitive organization.
Product descriptions are text-heavy and less compelling.
Some buttons on the website are non-functional.
Requiring an account to order can be frustrating for first-time users.
What we can do?
Include a breadcrumb trail to assist users in tracking their location and navigating with greater ease.
Incorporate infographics, icons, and bullet points to enrich product descriptions and other information.
Revise language and description for different size options of bouquets and flowers.
Allow users to share their email without creating an account to receive and send order confirmation and tracking information.
Competitive Analysis
We conducted an in-depth competitive analysis of nine flower and plant shops to evaluate their product offerings and e-commerce experiences, aligning the findings with our project objectives.
In our competitive analysis, we discovered strengths unique to "Dallas Flower Florists" that only a few minor competitors offer. These include features like:
a 100% satisfaction guarantee
customization options
same-day delivery for the Dallas area.
Despite these strengths not being readily apparent to users, we chose to highlight them in our design to enhance the flower shopping experience for customers.
Interview
During interviews with potential users and the subsequent creation of an affinity diagram, we identified key customer priorities:
freshness guarantee
customization options
reliable payment methods
Also birthdays were the most common occasion for purchasing flowers
DEFINE
Persona
Based on user research the persona is created. The website will be designed based on persona needs and frustrations.
We made a story board and a context scenario in order to have a more profound empathy for the users.
Story Board.
Card Sorting
We conducted collaborative card-sorting sessions with 13 potential users to understand their mental models and preferences for content organization.
The findings from our card sorting analysis informed the redesign of the information architecture and site map
How should the website be arranged according to users?
Site Map
Informed by our research findings, we redesigned the information architecture
User Flow
Develope
Sketch & 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
Chosen Flower
UI Kit
Our mood board features dark and light greens, cream, and pale pink tones, evoking natural beauty and warmth. Dark green signifies sophistication, while light green adds vibrancy. Cream brings elegance, and pale pink adds charm, creating a harmonious atmosphere for the flower shop redesign.
UI Kit
Usability Test & Iteration
User feedback prompted us to revamp the header for improved usability and add a zip code search area to cater to users' needs for localized navigation.
After conducting a usability test, we refined the website for a more visually impactful experience. The header section was transformed with vibrant colors and a redesigned logo. Responding to user feedback about the zip code area's accessibility, we expanded its size and strategically placed it within the hero section for enhanced user convenience.
We also identified issues with product card visibility due to cramped information. In response, we resized the product cards and adjusted the layout to ensure better visibility and an improved user experience.
Home Page
Product Page
We responded to user feedback by not only changing the filter's boxes, resizing cards, and updating their design but also by introducing additional filters tailored to meet the diverse needs of our users.
Payment Page
After analyzing the usability test results, we recognized the need to enhance the experience for guest users who prefer not to create an account. As a solution, we introduced an email follow-up feature on the payment information page. Now, users can input their email to receive order tracking information, ensuring a seamless and convenient experience for those who opt not to register.
Confirmation Page
