top of page
Rebranded and redesigned the HealthPost website to resonate more with the core values of the brand and connect to the mindful audience.

HealthPost is a leading online retailer in New Zealand, specializing in natural health and wellness products. They prioritize ethical sourcing and customer satisfaction.

Role:
UX Design, UI Design, Journey Mapping, Workshop facilitator, Graphic Design.

Date:
2022

Old-branding-HP.gif

Problem:

  1. HealthPost wanted to rebrand their Ecommerce website making it more aligned to a mindful audience.
    The exisiting branding wasn't able to convey the core values of mindfulness to the users.

     

  2. The homepage was converting poorly and the first time customers were not able to understand the offerings of HealthPost

Challenge

The rebranding of the entire website had a hard deadline of 10 weeks as the launch was expected in the new years. The style guide for the new branding and the newly designed homepage  needed to delivered to the external agency in 6 weeks

Homepage redesign Process:

Empathise

To gather comprehensive requirements, we initiated a Design Thinking workshop facilitated through a Miro Board, ensuring seamless participation from both in-office and remote team members. User research included collaborating with customer service and leveraging website surveys for direct feedback. We conducted competitor research to understand industry best practices in e-commerce, and subsequently refined existing user personas based on the combined insights. Additionally, heatmaps, Google Analytics data, and video recordings were utilized to pinpoint specific customer friction points and pain points, providing a holistic understanding of user needs.

Some of the issues found in user testing was:

  • Users were unable to determine whether the website was a store front or a blog.

  • The length of the homepage was also an issue as users felt there was an overload of information on the homepage.

In these interviews, I focused on asking open-ended questions, keeping the research goals that I set in my research plan in mind.
After gathering all the information gained from the interviews, it was time to do a deeper analysis by using an affinity wall.

HP-redesign-joirney-map.jpg

DEFINE AND IDEATE

Optimizing the HealthPost Homepage for User Discovery and Engagement

The HealthPost homepage initially presented challenges in user navigation and discovery. Customers relied heavily on the search bar, lacking alternative navigation options. To address this, we implemented a "Shop by Category" section highlighting top categories, alongside a "Mindful Brands" section allowing users to filter and shop by ethical values.


Additionally, a "Weekly Offers/Latest Trends" section combined content (top blog posts/new products) with commerce elements (weekly offers) for a more engaging experience.
 

Secondly, the homepage lacked social proof, hindering trust with first-time customers. We introduced a carousel widget showcasing customer reviews to increase brand confidence.

Finally, the existing blog widget occupied excessive space. We replaced it with a more compact version, enabling topic segregation for improved user discovery of relevant blog content.

Wireframe-HP-homepage.jpg

Prototype

  • Hand sketches were converted into low fidelity wireframes.

  • After multiple iterations two variants of high fidelity wireframes were created for A/B testing.

Mockup Desktop and Mobile with screens-02.jpg

Test

To validate the effectiveness of our design changes, we conducted A/B testing on the "Shop by Category" and "Weekly Offers" sections using a Visual Website Optimizer. We tested different variations (e.g., layout, visual elements), ultimately declaring Variant 2 the winner with a significant 12% increase in conversion rate. Additionally, heatmaps confirmed an increase in user engagement with both the reorganized category section and the weekly offers section, further solidifying the success of our design iterations.

Develop and Deploy

Following design approval, the finalized mockups were translated into a comprehensive style guide for the developers, ensuring pixel-perfect implementation. We employed a staged rollout process; designs were first developed on a staging site where a thorough User Acceptance Testing (UAT) identified any discrepancies. Issues were then reported back to the developers via Jira for resolution. Once I was confident the staging site mirrored the mockups and functioned flawlessly, the design was deployed live. A final UAT on the live site identified minor bugs which were reported back to the developers for estimation and rectification.

Results and reflection

As requested the new website was delivered well within the deadline. The new homepage helped improve the overall conversion rate to 12% compared with the website before the redesign. The customer care team also received great reviews on the website.
 

The user research really helped uncover some of the major issues in the homepage and this was one of my favourite part during the process. It was a challenge to conduct in person design thinking workshop with the wider team so I created a virtual workshop setup using Miro, this helped me to align the team on the core objectives. The AB testing team was based abroad so I had to work closely with them and the developers to ensure they understood the hypothesis for testing.

76505.png

© 2024 by Roshan Vinod

bottom of page