© 2019 Tianyu Li

A redesign of the shopping experience at "Artist & Craftsman Supply"

 

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.

PROJECT OVERVIEW

Client's Concern:

Customers have been complaining about the online shopping experience not being smooth enough.

Project Type:

Solo Project

Project Duration:

 

3 weeks

My Primary Role:

 

Researcher and Designer

RESEARCH CONDUCTED

Heuristic Evaluation

To better understand user complains, I conducted a heuristic evaluation of the shopping experience on the current website.

Surveys

I did user surveys to learn about the type of art supply users usually shop online.

Interviews

I conducted interviews on artists who purchase art supplies regularly to learn about their purchasing pattern. 

 

Heuristic Evaluation

he1.png

There are too many categories with some of them being redundant.

he2.png

Users can only add one color of paint to the shopping cart a time.

he4.png

The checkout process has too many steps.

he3.png

Users cannot update their shopping cart in the current window.

Surveys

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

Interviews

Artists use online art supply store to make sure they have enough paint

They usually buy paints in bulk so they don't have to shop again so soon

They believe online shopping saves time

KEY RESEARCH FINDINGS

People who online shop for art supply tends to:

  • Buy products they have used before

  • Buy products in bulk

  • Try to complete the purchase as fast as possible

placeholder

persona_2x.png

To synthesize the 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.

journey map.png

I also created a journey map which illustrates Dopa's emotion during a user scenario where he got so upset when he realized that he had to add different colors of paint into his shopping cart manually.

Based on the persona and user scenario, I concluded the......

placeholder

PRIORITIZED KEY FEATURES

  • 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 once

  • An overall smoother and more efficient checkout experience

 

placeholder

INFORMATION ARCHITECTURE

cardsorting.png

I conducted a card sorting to reorganize the information.

sitemap.png

Based on the card sorting, I designed a narrower but deeper sitemap so users can quickly access familiar items and brands.

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

Then I defined the user flow which highlights the key user interactions of the website. Both the sitemap and the user flow served as guidelines as I drew my low-fidelity sketches.

placeholder

EXAMPLE LOW-FIDELITY SKETCHES

I made low-fidelity sketches referencing the sitemap and the user flow.

placeholder

USABILITY TESTING

  • Users could get confused if they should click check mark or add to cart after entering the quantity

  • Users could get confused between apply code and update cart

Later, I converted low-fidelity sketches into a paper usability test and discovered two issues.

 

placeholder

EXAMPLE MID-FIDELITY WIREFRAMES

I then made wireframes based on results gathered from usability testing.

placeholder

EXAMPLE HI-FIDELITY MOCKUP

hifi1ws.png
hifi2ws.png
hifiws4.png
hifiws3.png

I kept the same color scheme from the original site to keep the branding consistent.

placeholder

IMPLEMENTED KEY FEATURES

Navigation that allows users to access their trusted familiar products quickly

 

IMPLEMENTED KEY FEATURES

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

IMPLEMENTED KEY FEATURES

An overall smoother and more efficient checkout experience

PROTOTYPE

NEXT STEPS

  • A history feature which allows users to make quick reorder

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

placeholder

PREVIOUS