ID Art Supply is an art store in Miami, FL. Currently, their eCommerce experience makes it very difficult for a customer to find what they need and check out successfully. The goal of this project was to understand why and design an experience that would allow customers to shop through the online store successfully.
Timeline
2 Weeks
Tools
Figma
Role
Solo UX Designer leading end-to-end process
Problem
Original website was very difficult to navigate with shoppers confused and overwhelmed about where to find things, and where they were on the website.
Solution
Clear navigation options supported by product imagery that allows for several ways for the most experienced and the least experienced artist to find what they need.
Users on Original Website
I conducted usability tests of the original website and these were some of the user’s reactions.
“This is giving me anxiety”
“I would have left the page a long time ago”
“I can’t navigate this”
Patterns Found From Users
I dug deeper into the why’s behind users’ reactions through open questions and interviewing during the initial usability test. After affinity diagramming the data from the usability tests and interviews I was able to identify the following:
Behaviors
- I instinctively use search to find what I need.
- I’m used to looking for categories based on the type of art.
- I value sales and recommendations from other artists.
Pain Points
- I felt overwhelmed by the amount of text and lack of hierarchy.
- I didn’t understand what I was buying. Need clear descriptions and images.
- I felt the checkout was sketchy and out to scam me.
User Types
From the research two, very distinct types of users emerged, which I summarized through the following archetypes each with their own defined problem.
The Art Professional
Needs an easy way to shop specifically by brand because he already knows what he likes.
The Art Hobbyist
Needs guidance during her shopping experience because she doesn’t know much about art supplies.
The Art Professional's User Flow
The Art Professional is given 3 different ways to find the brands they want:
- Using search and filtering by brand
- Using search to input the product and brand
- Using the nav bar to choose the type of brush they’re looking for and then being able to filter by brand
The Art Hobbyist's User Flow
The Art Hobbyist is given 3 different ways to find the brands they want:
- Use the main nav to search brushes and then see them prioritized by best sellers
- Use chat to talk to an expert and get product guidance as they would at the store
- Use artist-curated lists of supplies to find guidance on what’s best to buy
Design Decisions
Main Nav
The main nav serves our two user types in two main ways:
For the Art Professional: a large search bar is provided so they can search what they need, and can also shop by brand within mega nav.
For the Art Amateur: The category by medium allows them to search based on the type of art they’re looking to do, which is a starting point they usually know.
More decisions were also made based on research insights.
Guidance for the Art Hobbyist
In interviews, the Art Hobbyist types emphasized how they chose to go to art supply stores instead of other more general stores to get their supplies because they knew they would get expert assistance from the staff.
I looked to recreated this experience in digital through a “Chat with an expert” support functionality and a series of curated lists of supplies preferred by professional artists in different mediums to orient them in their purchasing decisions.
Filters for the Art Professional to easily get to the specifics of what they need
Once the user clicks into the product inventory the Art Professional would have the opportunity again to filter further by either brand, brush shape, or type in the case they didn’t do it before.
Product selection in a way that is not overwhelming
On the original website selecting a product was very overwhelming.
I looked to competitors such as BLICK and Jerry Arterama to see how they did it and found that they also lacked an elegant solution for selecting a product when it came in large quantities of variety such as color, shape, and size.
I found the most elegant solution in a pattern used by Amazon, which uses dropdowns to select the specific product type.
A Checkout process that is easy and feels trustworthy
On the original website, users described the checkout experience as “sketchy and overwhelming.”
I did a comparative analysis to find examples of checkout processes that communicated trust and ease and implemented the following design patterns:
Order Summary: provides reassurance of what the user is paying for at all times.
Accordion Layout: shows only what part is relevant at that moment.
Testing & Iteration
All testers were successful in finding what they needed and checking out without errors. They described the website as very intuitive and pleasant to navigate, showing that the goal was met of improving navigation.
“It’s so easy and the images are so clear, it makes me want to keep browsing and adding to cart!”
– User during a usability test
Mobile Wireframes
Because at least 50% of eCommerce occurs through mobile, it was important for the website to be responsive. I designed mobile wireframes to show what these would need to look like.
Learnings
- Next time I would like to also do usability testing of the competitors’ websites.
- Started a habit of writing my learnings as I went along, now looking to implement a process to document decisions and decision rationale very consciously at each step.
- eCommerce benefits largely from redundancy as it provides the users different avenues to achieve their goals.
- I would do competitive and comparative analysis even before I go into any sort of user interview or observations.