Artist & Craftsman | Iris Minji

View Prototype

Artist & Craftsman Supply Store

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.

Role: User Experience & Interface Design

Project Team: Iris Minji

Tools Used: Pen/Paper, Sketch, Photoshop, InVision
Platform: Desktop

Timeline: 2 weeks

Overview

The Challenge

Artist & Craftsman is currently not well-equipped to succeed in the ecommerce market. Many online art supply stores offer efficient features that help customers in completing the checkout process. Artist & Craftsman has an outdated website design with very few of the features that consumers expect.

“Consumers struggles to purchase art supplies on Artist and Craftsman website because it is overwhelming.

Our solution should deliver an easy way for our costumers to shop & proceed to an efficient checkout so they can be prepared for their upcoming art projects.”

Integration & Research

Heuristic Evaluation / Site Mapping / Competitive & Comparative Analysis / Persona / User Flows / Interviews / Survey

I first had to understand what users thought of the current site. I tested the site on multiple people to find out how the site flowed, whether they could achieve certain tasks, thoughts on the design and whether they have bought art supplies online. Different people rely on different features to gain confidence that their online shopping meets their expectations.

How might we help the users have a better online shopping experience?

Research

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 was to locate an item and purchase it through the check out process.

I used Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.

Match between

System & the Real World

The system should speak the users' language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

4 Aesthetic & Minimalist Design

Sometimes, the interface is too cluttered with a lack of hierarchy. Which makes it very difficult for us to focus or function properly.

4 Flexibility & Efficiency of Use

Accelerators, unseen by the novice user, may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

4 *severity rating 0-4, 4 being most severe

Current site map to show you how the site is "organized"

Current Site Map

Persona

To synthesize my research findings, I created a persona, Melody Monet, as a reference to the user I was designing for. She usually buys her supplies in-store, but occasionally buys online when she knows what to exactly buy. She is a busy modern day woman and doesn't want to spend too much time shopping.

Journey Map

Melody's Journey Map shows her struggles throughout her online shopping experience. She struggles to find the items she needs and is frustrated without the checkout process.

Featured Prioritization

Improve visual design & aesthetics of the overall website.

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

An overall smoother and more efficient checkout experience.

Design Process

Design Studio / Sketching / Wireframes / Paper

Prototypes / Inspiration / Hi-Fidelity Mockup

"Accessible design is good design." Steve Ballmer

Conducting usability testing with paper & medium digital prototypes helped identify problems that led to solutions. I did testing on 5 people in-person for each test and made adjustments to the design based on feedback.

Design

Low-Fidelity Prototype

Low-fidelity wireframes & prototypes helped me explore and redesign more concepts, interface alternatives, and screen layouts.

I learned that users often wanted to search the item(s) they were looking for and

have related products and popular products as options.

Medium-Fidelity Prototype

Medium digital prototypes helped me redesign the user journeys and the flow.

I got to test my medium digital prototype at the Artist & Craftsman store in DTLA with 3 employees. They were aware of the current A&C website being very outdated and hard to use. I tested my mid-fi prototypes and made adjustments to the design based on their feedback- which was to really emphasize the search engine bar as well as some minor adjustments on the checkout process.