ANTO YUKON: selling natural beauty online— a UX case study

Alberto Jannarone
Jun 2 · 6 min read

- 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.

C&C Diagram — Who we like and why

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.


We loved how this website used imagery to connect their product to nature and to its roots.


The About page layout really inspired us. Their use of imagery surrounding key information was straight forward, elegant and informative.


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.

User Flow from Instagram to buying a product

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.

Low-Fi sketching on paper

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.

Our Scope consisted of 4 main mid-fi designs

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.

Call To Action button placement is key

2. Making the product page less cluttered

You don’t always need breadcrumbs

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. —

Our final mood board

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.

Some of our screen captures — Home Page, About Page, Shop Page

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.

Home Page
Shop Page


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.

Alberto Jannarone

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade