Arctic Buffalo

Responsive Web E-commerce Redesign concept

Overview

Arctic Buffalo is an online shop specializing in jewelry for stretched earlobes, body jewelry, and fashion jewelry. These specialized types of jewelry are sold mainly in tattoo shops, and are hard to find in a brick and mortar shop. This type of jewelry comes in a variety of sizes and materials, making it hard to find exactly what you’re looking for when sifting through items online.

 

The Solution

Arctic Buffalo has a wide selection of quality jewelry varying in sizes. With simple navigation and a filtering system, customers will be able to find quality jewelry in their preferred material and size.

The Problem

People who wear custom jewelry have a hard time finding items in the correct size at a good price. They need an easy way to shop online for unique styles that won’t break the bank.


Tools

  • Sketch

  • Invision

  • Zeplin

Scope

  • Individual project

    • 2 weeks - research, synthesis, wireframes

    • 1 week - reactive web mockups


Challenges

 

CLEANING UP THE NAVIGATION AND ADDING A FILTERING SYSTEM

 
 

The original navigation had three levels, and listed out all the sizes available making the site difficult to navigate and find specific sizes and styles. The site also did not have a filtering system which allowed the user to see items that fell under multiple categories.

 
 

FINDING THE PROBLEM

 
 

While I was able to find a good amount of interviewees, most told me that they had only good experiences ordering jewelry online. It took a few unscripted questions in each interview to finally identify the pain points in the online shopping experience.

 
 
ABMock5.png

Empathizing with users

Research

METHODS

  • Competitive Analysis

  • User Interviews

  • Heuristic Analysis

  • Affinity Mapping

  • Card Sorting

While in interviews, I found that many users didn’t see any glaring issues when ordering their jewelry online. I shifted my interview guide to question the way that users shopped and what’s really important to them, rather than issues they face. From the data I gathered in interviews, I created an affinity map to gather greater insights into the specialty jewelry online shopping process.

I also conducted an open card sort to ensure the learnability of the navigation. I provided users with photos of products and asked them to create categories for the items, helping me to decide what to include in the site’s navigation bar. The final navigation links turned out to be Stretched Ears, Body Jewelry, Fashion Jewelry, Aftercare, Hair Dye, Merchandise, and Sale.

 
 

Insights

I like to shop online to find the best price
I want to be able to find what I’m looking for quickly and easily
I value a good customer service experience
I have a very specific style
 

The Users

 
Suzy Thumb.png

SUZY

“It’s important to have good filter and search options so that I don’t have to trawl through stuff I'm not interested in.”

 
 
Cory Thumb.png

CORY

“Having good and quick customer service has been crucial to my enjoyment of online plug retailers”

 
 

Design

PHASE 1

METHODS

Starting with paper sketches of user flows, an updated site map, and potential screens, I eventually moved on to creating wireframes in Sketch.

Focusing on the insights I gathered, I created a simplified navigation and search system, and created a filtering tool. Drawing inspiration from clothing sites, I created a filtering systems that allows the user to filter by price, size, material, style, and color.

See the low-fidelity prototype here.

PHASE 2

METHODS

  • High-Fidelity Mockups

  • Mobile-First Design

  • Responsive Web Design

The second phase of this project focused on creating high-fidelity mockups of a few screens in a responsive web format.

Starting with mobile first, I used my desktop wireframes as a guide. Once I created the mobile screens, I scaled up the designs to desktop formats.

I chose a light color scheme and simple sans-serif typography to keep the design simple and use the colorful photos of the products as the key visuals on the pages.

 

Testing

After design phase 1, I tested a low-fidelity prototype with users. Testing mostly showed small details that could be updated including

  • Adding an edit or remove button on the cart page

  • Specification if items were sold as a single, a pair, or more; and

  • Updating sizing of certain elements to show better hierarchy

 

Next Steps

Updating the drop down menus

The current drop down menus in the mockups feature arrows pointing up or down. In a review of the mockups, I received feedback that the arrows should be pointing different ways, depending on whether the menu was opened or closed. Moving forward, I would remove the arrows to avoid the confusion and change the icon to be a plus (+) or minus (-) to indicate whether you can expand or collapse the menu.

Building out the reviews section

In the tight timeframe of this project, I wasn’t able to build out all of the features I intended on including. On the product description page, I would incorporate a reviews section where customers would be able to leave a rating and explanation on products they have purchased. This would allow for sizing help and verifying the quality of the product.

Updating the buttons

Another piece of feedback that I received was about the “Add to Cart” and “Checkout” buttons. They don’t seem to fit in with the theme of the rest of the site. Moving forward, I would like to update the colors to a dark purple, or a slightly darker shade of blue. I would test each with users to see if there is a preference for either.

Want to see more?