Responsive Web E-commerce Redesign concept
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.
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.
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.
2 weeks - research, synthesis, wireframes
1 week - reactive web mockups
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.
Empathizing with users
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.
“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.”
“Having good and quick customer service has been crucial to my enjoyment of online plug retailers”
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.
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.
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
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.