ANTO YUKON: selling natural beauty online— a UX case study
- Anto Yukon is successful selling to stockists, but has difficulty selling directly from their website to the consumer -
A little about the client — Anto Yukon
Anto Yukon is a 100% soap and body care company committed to ethical and sustainable small-batch production. Products are inspired by beautiful Canadian landscapes and are packaged in unique and contemporary art prints by artist Meghan Hilderbrand.
The Solution — Solving the issues at hand
Solving the clients B2C problem would require some additions and redesigns to their website. These new elements would add more product and company information and better reflect the aesthetics and philosophies of their consumers. Ultimately the goal would be to increase the customer conversion rate and overall online sales.
— specifically creating a Home page, revamping the About, Shop and Product pages —
The Process — From empathy to prototyping
The Research — Empathizing with the user
It is very important to understand the needs and wants of current and potential customers. We started our research by interviewing and surveying current and potential customers, and current stockists/retailers. From this research we deducted several things.
Survey and Interview Feedback
We gathered information to help us better understand what was important to the customer. This info would later be used to help us create a customer persona, user stories & scenarios and start our sketching process.
The Customer — Maritza
A user persona was created to help us keep track of and address, the core needs and motivations behind potential customers.
Maritza’s Motivations
As a…
I want to…
So that…
Here we explored different contexts in which a user would purchase Anto Yukon products and to understand their motivation and desired outcome.
The Competition
The internet was searched high and low and many competitors and inspirations were found. The competitor analysis helped us identify style trends, to do’s and don’t do’s currently in the same market place.
— we found that all competitors looked and felt the same —
We wanted Anto Yukon to stand apart from the rest and moved on to find some inspiration from companies not directly in the natural bath and body segment.
The Inspiration
Since all the soap companies looked and felt the same, we searched elsewhere for inspiration to help our client stand out and be unique.
Findings — Something to draw inspiration from
Companies such as Canada Goose, Helly Hansen and more provided us with some great inspiration. They way they connected their product with its purpose and with nature was particularly intriguing and connected directly to helping us solve our underlying problem. We took elements from various companies and applied them to our design.
CANADA GOOSE
We loved how this website used imagery to connect their product to nature and to its roots.
HELLY HANSEN
The About page layout really inspired us. Their use of imagery surrounding key information was straight forward, elegant and informative.
LUSH
The product pages had an attractive and informative top banner and the product snapshots below contained brief info and immediate “add to cart” options.
The Design — Putting ideas to paper
It was now finally time to start designing. Before we could start sketching a User Flow had to be created. This is essential in making sure our design addresses the users needs in real life situations.
What would Maritza do?
Based on our research we came up with a flow showcasing the steps our user, Maritza, would take to make a soap purchase on the Anto Yukon website.
Divide, Sketch and Conquer
To start this process the team divided up and set off to start sketching and get our own interpretations of the facts onto paper. The team then converged and brought together the best from each of our sketches. We made sure each design element was addressing the original problem and pain points.
Turning Sketches Into Wireframes
Once we finalized our scope and settled on a design direction the wireframing began. We took to sketch and laid it all out. Our focus was the Home page, About page, Shop pages and individual Product pages.
Testing — Trying it out on real users
Having completed our wireframes we now set out to test our design layout and functionality. Each test had a goal and task for the user to achieve. We used Invision create a clickable MVP and interviewed each tester after the test was complete.
Testing Round 2 — Update and test again
After our first round of feedback we adjusted our designs and went back out to confirm we could move on to the next phase, Hi-Fi Prototyping.
- Some minor home page adjustments to ease user confusion
2. Making the product page less cluttered
Visual Identity — Look good, feel good
A wise man once said:
… a good user experience can’t just be a functional UI — designing an interface that’s attractive as well as functional is worth the resources. — https://www.nngroup.com/articles/aesthetic-usability-effect/
The Final Step — Implementing the visual aesthetic
The last stage in our project was the Hi-Fi Prototype. Using the conclusions from testing we then added all the visual and interaction elements to our key pages.
Parallax — Button Animations — Hover States
We threw our Hi-Fi’s into Principle and created some distinctive visual elements that would tailor to the users shopping experience. You can have a taste in the videos of our Home page and Shop page below.
Conclusion
This project has taught me how important the team, and not only the process, is to solving problems and creating a great product. Having confidence in my team and their abilities was key in providing the client with a great product that addressed both their issues, and the users.
