Healing Moon Farm
Healing Moon Farm & Soapery is a small e-commerce business dedicated to natural and eco-friendly products.
Visual Web Design A/B Testing User Testing Information Architecture
The Problem
As a small business their main goal was to increase site views, leads and sales.
Constraints
Their website is using Shopify and had to work within the limits of their template.
The Solution
My goal was to improve site readability and address any UI improvements to create an easier experience for their users. After reviewing web analytics data, I also wanted to improve lead generation by redesigning the newsletter signup CTA, A/B testing marketing emails, and improving dissemination of product value information on site.
Usability Review
Their users expressed some pain points on the site via email feedback. Here were the top the pain points:
Confusing homepage, a lot to look at or scroll through.
Where is my account?
Hard to search for products.
Insights Gathered
Homepage information architecture can be adjusted to help with the scrolling. The search and account buttons need to become the focus in the header for users, providing intuitive search functionality to help users find what they are looking for.
The four banner images stacked non uniformly on mobile devices and layout was not mobile optimized. Analytics showed 80% of users visit the site on a mobile device.
Header Before
Header After
I added a clear account login CTA and search bar functionality. The cart contents are clearly displayed as a user moves through the Consideration to Purchase stages of the user buying journey.
Design System Creation
I created their backend colors and typography to match their brand design.
Design System Before
Site was not consistent with the branded colors. Text readability was compromised in areas and impacted accessibility for users with disabilities
Design System After
Adjusted the color system to increase brand recognition and make a more normalized design. Increasing icon image and font size may make information easier to read for users and highlight the brand’s value proposition.
Information Architecture
The homepage needed a few minor adjustments to the layout in order to keep the consistency I was going for in the design. Below is a screen shot at the bottom of the page.
After IA Adjustment
Moved Testimonials to the bottom of the page and kept their show CTA's together.
Footer Adjustment Before
Their footer IA also needed adjustment. Links in the middle column made the footer look inconsistent.
Footer Adjustment After
We brainstormed on what the footer would include and based on web analytics data, the team decided to add a newsletter option to improve lead generation as well as remove the supported payments section. We also removed unnecessary links that appeared overwhelming for the user.
Three key learnings
The value of user feedback that contributes to design ideas.
Building designs around the user organically aligns with the business goals.
Staying within the scope of the problem space in the design.
Next steps
The next step for this project is usability testing on the homepage and then a redesign based on feedback from the testing.
© Brady Myers 2023