Artist & Craftsman Supply

Where the online shopping experience is carefully tailored for artists

Client

Artist & Craftsman Supply is a 100% employee-owned Company. It is one of the largest art material suppliers in the United States. Their goal is to continue to shape their company as a vital resource in support of the creative spirit.

Overview

Project Duration

2 weeks

Role

UX/UI Designer

Customers have been complaining about the online shopping experience not being smooth enough. The goal of this project was to redesign the website and improve user experience.

 

The project lasted two weeks and it was a solo work. As a UX/UI Designer, I conducted user research to understand the customer's need and pain point. I ideated solutions, defined information architecture, transformed concepts into graphics, validated ideas with testing, and delivered the design with a beautiful and interactable prototype.

User Survey

As part of the research, I conducted a user survey to learn about the type of art supplies people would shop online. It helped me better understand the user goal and user behavior.

 

87.5% of the survey takers will not purchase art supplies they haven't used online

12.5% of the survey takers would like to try art supplies they haven't used before through online shopping

According to the result of the survey, it appeared that the majority of people who shop for art supply online prefer to buy products they have used before. 

 

 

Heuristic Evaluation

To understand the user complaints regarding the shopping experience. I ran a heuristic evaluation on the current website. The heuristic evaluation was focused on the key task flow which is to locate an item and purchase through the check out process.

 

Step1: Homepage

I started on the homepage trying to locate an item through the navigation. The first impression I got was that there are a lot of categories and each has even more subcategories.

Step2: Add different colors of paint into shopping cart

After I found my item, I tried to add different colors with different amount into the shopping cart. And I realized I could only add one color at a time.

 

Step3: Edit my items in the shopping cart

Before going to the checkout, I wanted to review my shopping cart and made some change, and only found out that I cannot edit the cart in the current window. If I click the edit button, the website will open a new window.

 

Step4: Check out

When I was ready with my shopping cart, I clicked the checkout button and entered the checkout process. And the first thing I saw was that there were seven steps for me to complete the process. It was intimidating and discouraging.

 

In conclusion, the shopping experience, and the checkout process definitely were not optimized enough. And by running this heuristic evaluation, I had a better understanding of the user's pain point and created an empathy with the user.

 

User Interview

To further study the user's pain point and need, I conducted three in-person interviews. With each of the interviewee, I went over the type of product they usually shop online to validate my survey result. And I asked other questions to study their behavior pattern. Below are some of the quote I took from the interviews:

I use the online store when I'm in short of supplies like paints.

I usually purchase art supplies in bulk so I don't have to shop again soon.

I like online shopping. It saves me a lot of time.

Key Findings

I conducted an affinity mapping after the user interviews to sort out trends. According to the affinity mapping results, artists do enjoy the option of online art supply shopping. However, they follow a specific behavior pattern:

They usually buy products they have used before.

They buy art supplies in bulk.

They try to complete the process as fast as possible.

Persona

To synthesize my research findings, I created a persona Dopa as a reference to the user I was designing for. He only buys art supplies that he has used before. He prefers to buy in bulk and he doesn't want to spend too much time shopping.

persona_1x-min (1).png

User Scenario

I also created a journey map which illustrates Dopa's emotion during a user scenario that highlights one of the major issues the current website has. 

 

As you can see in the journey map, Dopa got so upset when he realized that he had to add different colors of paint into his shopping cart manually.

journey map.png

Problem Statement

Considering Dopa's behavior pattern and his interaction with the current website, I concluded a problem statement:

Artists usually online shop for art supplies that they have used before in bulk. They believe it saves them time. 

 

Dopa believes he is spending too much time finishing his purchase. How might I help him complete his order as fast as possible so he can get back to his art creation?

 

Hypothesis

With the problem statement in mind, I realized that Dopa's frustration mainly revolved around efficiency. And as I recall the heuristic evaluation I did, it appeared that the navigation, the item adding, the shopping cart editing and the checkout process are the major places that were causing efficiency issues. As a result, I proposed my solution:

I believe by providing a redesigned navigation which allows the user to find their trusted brand easier, a feature that allows the user to purchase art supplies in bulk, and a shorter checkout process; I will build a more efficient shopping experience at "Artist & Craftsman Supply."

 

I will know this to be true when I see users find their items faster and complete checkout in a shorter time compare to those who use the current website.

Key Features

Based on the hypothesis, I have decided the three prioritized key features this redesign should aim to accomplish:

Navigation that allows users to access their trusted familiar products quickly.

A feature that allows users to add multiple colors of paint in their cart all at once.

An overall smoother and more efficient checkout experience.

Card Sorting

After confirming the prioritized key features, I planned to redesign a sitemap to structurize the information architecture. But before doing that, I conducted a card sorting with my interviewees to organize the categories of the items.

Sitemap

With the card sorting result, I redesigned a sitemap to organize the information architecture so the user can quickly access to their familiar and trusted products.

sitemap.png

User Flow

I have also defined a user flow which highlights the key user interactions of the website. Both the sitemap and the user flow served as guidance as I drew the low-fidelity sketches. 

Users realize they are out of art supplies

Check out

Users search for products they have used before

Users buy in bulk so they don't have to shop again for a while

Sketches

Following the sitemap and the user flow, I drew out my redesign in the form of low fidelity paper sketches. 

 

Usability Testing

To validate my solution and to discover other potential usability issues, I built a paper prototype with my sketches and conducted usability testings on it.

 

I was pleased to learn that new users loved the "buy in bulk" feature. However, I have noticed two potential usability issues:

In the shopping cart window, "Apply code" button and "Update all" button have similar signifier, users could potentially get confused between the two.

 

The issue was addressed in the mid-fidelity wireframe by assigning distinguished signifier to the two buttons and separate them on two sides of the screen.

On the product purchasing page, after adding one color of the paint, users need to click the check mark to confirm. However, users could potentially try to click the "Add to cart" button down below.

 

The issue was addressed in the mid-fidelity wireframe by greying out "Add to cart" button until at least one item is confirmed to prevent user error.

 

Wireframes

I converted my paper sketches into mid-fidelity wireframes with improvements based on observations I made from the usability testings.

Mockup/

Implemented Features

To demonstrate what the functional product would look like, and how my proposed features can interact, I built an animated prototype.

Redesigned navigation

The redesigned website has narrower but deeper navigation with less redundant subcategories. It allows users to access their trusted brands and products quickly.

"Buy in bulk" feature

This feature allows users to select different colors with the amount they want, and add them into the shopping cart all at once. Since each artist has his/her own demand regarding colors and the amount, this feature gives maximum freedom to artists and requires significantly less effort.

Redesigned checkout process

The redesigned checkout process reduces steps from seven to three while still providing full transparency regarding tax and other fees. The design concept is to allow users to complete checkout fast and smooth.

 

Prototype

Below is the prototype which demonstrates the complete flow of locating an item, adding it to the shopping cart, and completing the checkout.

Next Steps

In case the client wants to continue refining the website, I have also included a next steps section with features that will help improve the user experience.

A history feature which allows users to make quick reorder.

A favorite feature which allows users to create and manage their shopping list.

PREVIOUS

© 2019 Tianyu Li