Dallas Flower Shop
Responsive Website Redesign
In this project, we showcase our work in redesigning 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.
Project Overview
Duration
Role
Team
Tools
Devises
10 Weeks - Part-time
User Researcher UI Designer
Group of 4
Figma, Sketch, Miro Canva, Photoshop
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 the Dallas area
Business Needs:
Improving the website's information architecture, enhancing product care, and updating the design is crucial for boosting sales. Additionally, there's a pressing need to enhance filtering capabilities on the website to meet customer expectations.
Our Approach:
We aim to understand prospective users and their needs better 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
Design Process
We took help from the design thinking method. It wasn't a linear path, we went back and forth between stages as the project progressed.
Discover
To understand the users' pain points and develop effective solutions, we employed a comprehensive research approach that consisted of the following methods:
Heuristic Evaluation
Competitive Analysis
Online Survey
Interview
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.
The 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 Competitors
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.
By doing this, we could design a more effective information architecture and discover what questions we needed to ask in the survey to more accurately capture our user needs.
Online Survey
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
Clear product descriptions and prices would enhance the experience.
Freshness and quality are crucial, and I always rely on customer reviews to ensure that.
The checkout process need to be straightforward for me.
Define
Persona
At this stage, summarizing the results of the research in a persona that was representative of our target users, helped us to get closer to our user's needs during the design process.
Meet Lily
Lily is a 38-year-old marketing professional with a busy schedule and limited free time.
Despite her hectic life, she values her friendships and makes an effort to keep her friends happy.
She loves using online flower shops with delivery options to save time.
Lily is always on the lookout for shops that offer fresh flowers and fast delivery.
Card Sorting
How do users think the website should be organized?
We conducted an open card sorting from competitive analysis and heuristic website evaluation. 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
Sketches
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.
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.
Mood Board
Our mood board showcases a palette of dark and light greens, complemented by soft cream and pale pink tones. These colors evoke natural beauty, freshness, and warmth. In psychology,
. Dark green is associated with sophistication
. Light green brings vibrancy
. Cream adds elegance
. Pale pink introduces charm
This color scheme aligns with the floral theme and leverages psychological principles to create a harmonious and inviting atmosphere for the redesigned flower shop.
UI Kit
Our UI Kit was refined to ensure consistency across all screens, align with the website's requirements, and meet user needs which is 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.
Test
A/B Testing
After several rounds of ideation, we conducted an A/B test with 13 participants to compare user satisfaction and functionality between two hero search box designs. Based on the feedback and recommendations, we refined the design in our final prototype.
Usability Test & Iterations
After conducting a usability test, we refined the website for a more visually impactful experience. The header section underwent a transformation 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.
1
2
After our usability test, we 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.
we adjusted filter boxes, resized cards, and updated their design. Additionally, we introduced extra filters to better meet diverse user needs.
Deliver
Delivered Pages
Prototype
Here is the last prototype, displaying what we've achieved through our design process.
Reflection
What did I learn?
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 can we do next?
Develop a mobile-responsive version of the website for better accessibility on phones.
Plan to enhance the website's accessibility to make it more user-friendly.
Following this, we'll enhance the user experience by conducting additional usability testing and iterations to refine the user flow further.
