Kristy Cline
ux ui designer
eCommerce Website Redesign
Flower Fairy Skin Care
Role: UX Researcher, Marketing, UI Designer, Developer
Tools: Figma, Photoshop, Illustrator, Canva, Google Forms, Shopify
Timeframe: 4 weeks in 2023
Overview
Flower Fairy products have been hand-crafted & produced by a herbalist for over 30 years. They are all made in small, frequent batches to preserve & promote freshness & quality.
Challenge
-
Design an ecommerce website that is intuitive and allows customers to browse through all the different products and services Flower Fairy offers
-
Design branding that compliments the company's vision
Solution
From research to high-fidelity design and prototyping, I created a responsive website on Shopify's platform which compliments Flower Fairy's vision and the user's needs.
Original Website
Improvements:
• Organized information architecture
• Clearly defined CTAs
• Highlighted UVPs
• Featured products became more prominent
• Improved UX
• Updated photos
• Responsive
Redesign
Understand
Research Plan
To learn how users currently search for skin care products online so that we can create a suitable platform.
Methodologies
-
Market Research
-
Competitive / Comparative Research of Competitors
Research Objectives
To determine:
-
How users go through the process of finding skin care products online and off
-
What motivates users to buy from a specific source: what is their why
-
What information users are looking for when searching for skin care products
-
Which features are most important for users when searching for skin care products
-
What users’ pain points are when searching for skin care products
Findings
%
88
Feel the experience a company provides is as important as its products / services
%
73
Expect companies to understand their unique needs and expectations
%
62
Feel an emotional connection to the brands they buy from the most
Market Research and Competitive / Comparative Research of Competitors
Clean, modern UI
Trusted brand
Eco-conscience
Busy UI
Close product shots
Eco-conscience
Engaging UI
Trusted brand
Eco-conscience
Explore
Ideate
Next it was necessary to create a Feature Roadmap based on the previous research.
App Map
Based primarily on priorities 1 and 2, I then contemplated the flow of the site and decided on this structure for the sitemap. Its navigation is quite simple as that is a goal of the company owners and research users.
Task Flow + User Flow
Wireframes
Based on the sitemap, user research and competitive analysis, wireframes for the website were thoughtfully sketched out before the high fidelity wireframes were then created.
High fidelity wireframes for user flow
Participants: 5 - 7 participants, all genders, 25-50 years old
Test Goal: The user is able to complete the flow with no/minimal issues
Materialize
Method: Usability Testing
Test Objectives:
-
To understand how easily users can navigate the website design
-
To understand how easily users can find a specific product
-
To identify any errors users encounter during the process
Task Flow Description
You would like to redo your dining room floors and have just heard about the benefits of wide plank flooring.
Find more information about this type of flooring and then request a sample box and fill out the form.
After you have finished ordering, contact Nova however feels the most natural.
Usability Testing Recommendations
Insights:
The flow was fairly straightforward and the assumption was it would be quite easy for most users. The results from the test confirm this with a misclick rate of 11% and direct success of 100%.
Recommendations:
"I would have perhaps liked the checkout flow to be broken into steps with a progress indicator at the top rather than one long form"
Overall how difficult or easy was this task to complete?
Annotated wireframes with usability testing recommendations
Implement
Once I had the structure of the new site tested, it was time to sift through the old Peerless website and filter out the complimentary content and imagery which would become Nova's new branding. Wording would have to altered and images updated. Of course the limitations and constructs of SquareSpace would have to be taken into consideration when designing and changes would have to be made accordingly. Because the actual website design would be an evolution from the wireframes and recommendations, another round of usability research is recommended on the live site in order to further create an effective user experience.
Chatbot
It was also noted from research that customers wanted to quickly and easily chat with someone regarding their project, therefore a chatbot is the desirable feature to solve this user desire.
Future Recommendations
Sample Box
Nova originally wanted to offer a sample box of wood for customers so they could more easily order the correct wood type and finishes. The company has not yet implemented this feature, however hi-fi wireframes were designed for it.
Conclusion & Reflection
Coming from a graphic design background I have designed many websites before, however this was the first time creating a live website with the Design Thinking Process model and an actual client. I found the collaboration with the client very helpful in creating a product that solved a real world problem. They were impressed with the level of detail and research needed to create a product with user experience in mind and it reaffirmed in my mind as well the importance and necessity of the steps involved.
At the time of writing this, the website is in its MVP stage but as I have an ongoing contract with Nova, I will be further evolving and designing as the company grows. I look forward to the further collaboration with the owners and have more ideas about features that will both challenge my design learning and bring value to the company's image.