Grin original landing page
Context
Redesign the Website for Optimizing online shopping experience
Grin Natural toothpaste is made in New Zealand from the best natural ingredients. From 2018, Grin helped more than 20,000 families benefit from better oral care education.
Project result
-
With some of the redesign going live, the user engagement increased by 16.4%, while the click rate of the Add to Cart button increased by 23%. The overall score of the User Satisfaction Survey increased by 32%.
-
Refined brand awareness and optimized workflow efficiency by creating a style guide and sets of reusable UI components for future developments.
Understand the business problem
The Stakeholders,
Grin Nature team
I met with the team to identify problems and objectives of the project. So I can choose my design process to achieve the best results.
Here are some key questions and answers I collected:
Q: What is Grin’s target market and why Grin will be a good choice for its potential customers?
A: Consumers are increasingly seeking natural alternatives in oral care, prioritizing plant-based ingredients over artificial additives. Grin wants to elevate its brand awareness by upgrading the existing website and utilizing it to benefit more families by using its products.
Q: How’s the current conversion rate?
A: The website has only a 30% conversion.
Q: What kind of potential constraints does this project come with?
A: The timeline for this project is one month, so all the design solutions need to be completed by then. The brand identity needs to be improved and retain a similar look & feel.
Project Goal
The Task,
User's Shopping journey
I defined the scope of the redesign project. Given the tight one-month timeline, I had to prioritize tasks strategically. To ensure alignment with the team, I conducted the usability test and crafted a journey map that visually highlighted the most pressing areas for the initial focus.
The User,
Current Grin Customer
To better understand the needs of primary customers,
I collaborate with the team and collected 32 survey results.
Then I put these users' insights into a persona to represent the needs of the user in all decision-making.
User Persona
Understand user's context
Understand how Grin website visitors engage with the current website and their behaviours related to browsing the products and purchasing.
Rachel's Onboarding Journey
Creating this journey map allowed me to dive deep into how the current user arrives at the Grin website and identify high-level problems that users encountered.
Research Insights,
Current problem
Grin's high bounce rates signified a confusing navigation system, a puzzle we were determined to solve.
The current design failed to provide essential information to covert users and help them make decisions.
How might we help users save time on browsing and decision-making in online shopping experience?
Usability inspection
Heuristic Evaluation
I chose Heuristic Evaluation as the next step, considering the limited access to users. because it helps to find likely issues without having to test with participants.
This evaluation focused on identifying glaring problems in the interface.
On the product page, the card design lacks a clear visual hierarchy and brand identity.
The product filter tags are messy and aren't efficient enough to help users choose product categories and narrow down their options.
The page layout lacks a good visual balance to help users consume the content more easily and access the relevant content they need.
Problems
Insufficient keywords,
Disorganized tag elements,
It is difficult for users to navigate, resulting in repetitive interactions.
Many users often share their experience online by quickly scanning for specific keywords and applying filters to narrow down their options. This helps them to determine which products are the best fit for their needs.
Define design goals
After research stage, I gathered all the necessary data that were crucial to my design solution. I identified the project goals to ensure that the decisions I make in the following steps are solving the right problem.
Design Goals
Evolve the visual elements to create a recognizable and consistent visual language.
Refine how users discover and interact with content on the website to increase engagement and dwell time.
Elevate the overall experience to align with the iconic reputation of the brand and the quality of the content It produces.
Constraints
The brand places a high value on maintaining
brand colours and the overall brand identity while seeking enhancements to the original design.
Research Insights
Potential Solutions
Providing customers with a better categorization feature throughout web pages, they will be able to switch channels and sort out irrelevant results more efficiently.
Providing customers with an intuitive and scannable design will help them build quicker connections with the brand and develop trust to urge purchase.
User Flow Optimaiztion
The architecture of the website had a major impact on the discoverability of useful information.
Based on user insights, I optimized the current user flow by removing unnecessary steps before their purchase to shorten the decision-making process.
In the optimized user flow, I made crucial information easier to access, allowing users to reach their desired pages or categories with fewer clicks.
Orignal flow, hover over to see the change.
Competitive Analysis
In order to gain insights from competitors' websites and their design solutions,
I compared elements of their designs to identify missing features or areas for improvement on Grin's website.
Design Opportunies
From the research results, It helped me to refine features that needed improvements.
Improving the product navigation experience to help users locate
their desired product type and save time.
As the takeaway, I chose to focus on optimizing these features:
-
Navigation menu
-
Product card's Layout & Sorting
-
Less content-heavy product description
-
Free shipping indicator
Defining Brand Style
I established a basic style guide based on Grin's original visual elements, understanding that this design guide would be revised as I move forward.
Grins brand's goal is to help more families improve their oral health by experiencing their natural products. So the brand style needed to bring a refreshing, modern and trustworthy sense.
Design Solution
Revise the Product Page,
To Improve Page Organization and Scannability
Product secondary navigation
By facilitating a more intuitive category
menu, users can choose the sorted
products with quicker purchases.
Product card
A clear visual hierarchy with keywords helps people scan information and focus on areas of interest. It also improves aesthetics by creating a sense of order.
Enhance the filter feature
For Improved Product Discoverability
A well-structured filter to assist users navigate and sorting out their options.
Increasing product discoverability.
Product Filters
The Rollover effect
While hovering over each product, two options will appear. These will provide shortcuts for different types of users to complete their ideal flow faster.
Shopping Cart Menu
In the original design, One of the pain points is there's no shopping cart function. By implementing a shopping cart menu. It enables users to shop multiple items at the same time. They can simply hover over the icon to see what's in their cart, without any interruptions to their shopping experience.
Free shipping indicator
To prompt customers to take advantage of the free shipping offer, I added a progress bar to display the amount a customer needs to spend to qualify. This will encourage them to increase their order total and take advantage of the free shipping.
-
Added a navigation tab that enables customers to select sections they want to access quickly. This feature helps to save customers time than scanning through the entire page.
The product detail page & navigation tab
An optimized product description that caters to the customer's primary concern.
Improve accessibility of the CTA button
In the existing design, while users read through the product description, they lost access to the Add to Cart button.
-
As customers scroll down, I added a floating menu, ensuring they always have access to the "Add to Cart" button.
-
More visualized content design to highlight the brand's mission and foster a sense of trust.
Final Design Outcome
Grin Optimized Landing Page
A better outstanding
primary navigation.
Intergated the honeycomb shape as a visual element in the design to construct a fresh, more intuitive brand identity.
Adults' products page
Kids' products page
Product Detail Page
