What if buying art supplies didn't have to be so intimidating?

Screenshot 2021-04-07 at 10.17.24 PM.png
Free_MacBook_Pro_1 (1).png
Executive Summary
Whether you're a beginner or expert, the infinite varieties of art supplies can be daunting. I made conceptual improvements to the e-commerce store for a local art supplier to make it easier to buy and learn along the way.

Their large product inventory, cluttered site navigation and intimidating product information makes it difficult for artists (skilled and new) to find what they need and complete transactions online. 

Challenges:

  1. Make it easier for customers to find what they’re looking for.

  2. Help customers make better informed buying decisions.

 

Outcomes:

  1. Improved System Usability Scale (SUS) score from 73 to 77 (above industry average of 68).

  2. Improved users' ability to find items they were looking for and complete transactions.

My Role 

UX Designer

Project Timeline

2 weeks (mid-March 2021)

Platform

Desktop

Starting Point

Painting A Clearer Picture

I spoke to ten users ranging from casual hobbyists to accomplished artists to learn about how they shopped for art supplies, and online in general.

The following insights distinguishing offline (brick and mortar) and online shopping behaviours were uncovered:

 
Offline Shopping

Main motivation

In-store experience and feeling and comparing product quality

Typical behaviours

“I can spend hours browsing the aisles and end up buying things I didn’t intend to”

“I find it easier to shop in a store when I am familiar with the layout and I can find everything in one place"

Online Shopping

Main motivation

Convenience of delivery and cheaper prices

Typical behaviours

"If I know specifically what I want to buy, I will buy online directly"

"I like being able to save items to cart because I tend to sit on a decision before I buy"

"I like a filtering features that will help simplify my online search"

From there, I drew up a couple of personas to guide design decisions. 

Enthusiastic Eric

Eric is a DIY extraordinaire and creative soul. Whenever he's inspired to try a new craft, he's raring to start right away. He can’t resist a bargain.

Frame 1.png

Tech saviness

Trust in buying online

Behaviours

  • Always compares prices between different sites when shopping online.

  • Enjoys buying things on offer.

  • Avidly researches online before buying a product.

Active on socials

Needs & Wants

  • A seamless checkout experience.

  • Clear and consistent product reviews.

  • Entry-level supplies to experiment with.

Frustrations

  • Spends too much time sifting through endless options.

  • Struggles to find reliable sellers on the marketplace.

  • Can't meet the minimum spend for free delivery.
     

Artsy Amira

Amira is a creative executive in an ad agency. Making art relaxes her. She prioritises the quality of her art supplies - it affects her final work.

Ellipse 2.png

Tech saviness

Trust in buying online

Active on socials

Needs & Wants

  • A one-stop shop to buy all her supplies.

  • Plenty of clear product information so she can make informed  buying decisions.

  • A loyalty program at her regular store.

Behaviours

  • Spends hours in the art shop browsing and inspecting supplies.

  • Once she knows what she wants, she buys directly online.

  • Discovers new products via friends' word of mouth recommendations.

Frustrations

  • Can't inspect a product’s quality online.

  • Can't compare different brush sizes online.

  • It's costly to buy supplies from online shops abroad because of high shipping costs.

Art Nemeses

I also did sussed out Art Friend and Spotlight - art supplies stores that were name-checked significantly by interviewees.

artfriend - transp - logo.png

Done Well (+)

  • Main categories are broken down by techniques, shapes, use and more.

  • View all product variants easily in one product page and add desired quantity to cart directly.

Could be better (Δ)

  • Main page prioritises offline shop information.

  • Main page is cluttered with brand logos.

spotlight%20logo%20png_edited.png

Done Well (+)

  • Very clear product info on product description page.

  • Shopping cart is easily accessible without leaving your page.

Could be better (Δ)

  • Overwhelmed by categories in the primary navigation.

  • Doesn't show if a product is out of stock early enough.

Always Sorting Out Stuff

When asked about their favourite e-commerce sites,  interviewees frequently lauded ASOS for their endless products and how easy it is to find specific items in spite of the variety.

ezgif.com-gif-maker (1).gif
Free_MacBook_Pro_1.png

Comparing Apples and Bears

To understand how other companies helped users compare their products when shopping online, I analysed the best-in-class comparison tools of Apple and GoBear.

 

Their interfaces help users compare the technical specifications of multiple products simultaneously by making information clear, consistent and well-structured.

Apple-logo.png

Compare

iPhones​, iPads, MacBooks

How To

  • Select up to 3 models.

  • Technical specifications are displayed instantly.

Best Practices

  • Visual comparison of models.

  • Uses icons and text to communicate information.

  • Instantly view colours and storage.

  • Can buy directly from page.

  • Easy to glance side-by-side comparison.

  • Comprehensive & detailed product information provided.

GoBear-logo.png

Compare

Credit cards, insurance policies, etc

How To

  • Select up to 4 products.

  • Pick from listings page to be redirected to comparison table.

Best Practices

  • Sticky bar shows you selection whilst you pick products to compare.

  • Benefits categorised based on use case.

  • Easy to glance side-by-side comparison.

  • Comprehensive & detailed product information provided

Which Begs The Question

How might we bridge the gap between the offline and online shopping experience to help users find the art supplies they’re looking for easily, whilst also inspiring confidence in the quality of the products they’re buying?

 
The Redesign

Back To The Drawing Board

The main redesign priorities were 

  1. Improve site navigation. 

  2. Help users make better informed buying decisions.

Improve The Site Navigation

ezgif.com-gif-maker (4).gif

The current website's global navigation bar contains a whopping 27 categories consisting of product and non-product pages!

This overwhelms users as the site lacks information architecture. 

Endless scrolling, no indication of where you are on the page or how far you have to go until the end, no sorting or filtering, and big chunks of text. 

The product listings page layout is not optimised to help users find what they're looking for.

ezgif.com-gif-maker (6).gif

To improve the information architecture of the current website, I had 17 participants take part in a card sort.

 

I suggested three categories for the global navigation bar - Tools, Mediums and Surfaces based on common industry terms.

“Tools” and “Surfaces” are self-explanatory, whilst “Mediums” can be defined as how artists describe specific materials that they work with to create a piece of art. For instance “Oil on canvas” or “Gouache on paper".

I discovered that:

  • Most participants classified similar items under “Tools” and “Surfaces”.

  • They mainly struggled with classifying items under “Mediums”.

  • Most of the new categories created (24 to be exact)  were for products that would technically be classified under “Mediums”, hence indicating that they needed more specific sub-categories for these products.

Guided by these learnings, I streamlined the product categorisation in the global navigation bar. I also relocated several tabs to the supplemental navigation in the footer. These were for pages that were still crucial, but not directly sales-related.

Vibrant Art New Sitemap

Vibrant Art's new, streamlined sitemap

For the product listings page, I adopted an e-commerce grid layout that is familiar to many users.

The introduction of filters and sorting also allows users to find what they're looking for more specifically.  

ezgif.com-gif-maker (7).gif

Vibrant Art's new product listings page layout

Help Users Make Better Informed Buying Decisions

As we want the website to be accessible to artists of all capabilities and skill levels, the website needed to impart information that was relevant and helpful, whilst also providing the necessary details to better inform buying decisions.

 

This was intended to be achieved in following ways:​

Updated Product Information
Screenshot 2021-04-06 at 9.38.02 PM.png

Looking for a paintbrush?

The current website's product description lists information like the bristle type, how the bristles are attached to the handle and handle material.

In my interviews, most users  said they could not appreciate such information - it shed little light on what brush to buy based on their needs.

With that, I updated the product description to include details about the product's  usage:

  • Medium suitability.

  • Technique suitability.

  • Skill level suitability (eg. beginner or advanced).

Screenshot 2021-04-06 at 10.41.25 PM.png

New product description page

Ratings and Reviews

From my interviews, users who shop online regularly say they rely on ratings and reviews for quality assurance.

 

This is important as they cannot physically inspect products before buying.

 

As physical inspection is a major factor as to why interviewed users still preferred shopping for art supplies in-store, it would be helpful for Vibrant Art’s website to bridge that experience-information gap between the offline and online shopping experience by including ratings and reviews. 

Screenshot 2021-04-06 at 10.45.18 PM.png

New addition of ratings and reviews

Product Comparison

In continuing to bridge the experience- information gap, I also designed a product comparison feature modelled on the best-in-class tools from Apple and GoBear.

 

This tool will allow Vibrant Art’s online customers to select up to three products (within the same category) to compare technical specifications. 

ezgif.com-gif-maker (5).gif

New product comparison tool

Usability Testing

Back To The Drawing Board

Over the course of this project, I conducted two usability tests with eleven users. They were tasked with:

  1. Buying the cheapest acrylic paintbrush in the store.

  2. Comparing the technical specifications of three paintbrushes.

From the tests, I uncovered several key usability issues:​​

 
 

Product Names Are Unfamiliar

Despite adding new product sub-categories, users were still unfamiliar with specialised terms like "binders", "solvents" and "additives".

Next steps for improvement

  • Add clarifying microcopy like tooltips when a user hovers over the product name.

  • Create educational content.

Comparison Tool Not Intuitive to Use

Users didn't know how to use the tool. The interface made them think they had to drag and drop products to the tray, instead of click to pick.

Next steps for improvement

  • Be more explicit in instructional microcopy.

  • Update the product tray's design to reflect the call to action.

Checkout Journey Not As Expected

Users are used to the e-commerce journey where promos and shipping are calculated at checkout, not cart.

 

Next steps for improvement

  • Move promo and shipping fields from cart to checkout.

  • Indicate clearly to users what they can expect in the coming pages.

Design System

A Fresh Lick of Paint

We spend so much time glued to our electronic devices, exposing ourselves to the cold hardware and invasive blue light.

I wanted to create a digital atmosphere that would soften that exposure by paying homage to the warmth and wonder in an art supplies store. 

I was inspired by the tones of paper and sienna and opted for a neutral colour palette.

With orange being a bold colour, I reserved it for use as an accent colour.

Psychologically, orange is known to inspire creativity - and appetite.

An appetite for creativity. How fitting! 

For the typography, I decided to bland sans serif and serif fonts. The sans serif font Work Sans conveys approachability and aims to put users at ease as art is meant to be for all. I complemented it with Libre Baskerville to preserve a professional air to Vibrant Art.

Primary

#F2CC96

Pri. Variant

#F2A230

Text

#333333

Text Variant

#999999

Secondary

#814906

Sec. Variant

#814906

Accent

#D35823

Background

#FCF8EC

Panel

#F9E2C2

Error

#FF4040

Work Sans (H1)

Libre Baskerville (Large body)

Work Sans (H2)

Libre Baskerville (Regular body)

Work Sans (H3)

Libre Baskerville (Small body)

Work Sans (Subtitle)

Libre Baskerville (Tiny body)

Work Sans (Big button)

Work Sans (Small button)

 
The Impact

The Final Show

With the redesign

  1. All users were able to successfully find what they were looking for with the new site navigation.

  2. 9 of 11 users commented that they would find reviews helpful, especially if they were beginner artists and shopping online.

  3. 8 of 11 users used the filter tool immediately after browsing to help refine their product search.

Between iterations, the System Usability Scale (SUS) score increased from 73 to 77, giving the site a B, or Good rating (the industry average is 68). 

 

Not quite the big leap I had hoped for, but an improvement nonetheless. It's healthy to celebrate the small wins. 😌

Check out my prototype on Figma!