What if buying art supplies didn't have to be so intimidating?
.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:
-
Make it easier for customers to find what they’re looking for.
-
Help customers make better informed buying decisions.
Outcomes:
-
Improved System Usability Scale (SUS) score from 73 to 77 (above industry average of 68).
-
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.
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.
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.
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.
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.
_gif.gif)
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.
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.
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
-
Improve site navigation.
-
Help users make better informed buying decisions.
Improve The Site Navigation
_gif.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.
_gif.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.
.jpg)
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.
_gif.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
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).
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.
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.
_gif.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:
-
Buying the cheapest acrylic paintbrush in the store.
-
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
-
All users were able to successfully find what they were looking for with the new site navigation.
-
9 of 11 users commented that they would find reviews helpful, especially if they were beginner artists and shopping online.
-
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!