Mo’s Art Supply Store
Launching an e-commerce extension for a small business
Client
Local art supplies store, Mo’s Art Supply
My role
UX researcher
UX designer
Information architect
Tools
Sketch
Axure
Miro
Duration
2-week sprint
Background
Mo’s Art Supply, a local art store in New Orleans, has an online presence but currently no e-commerce option for their clients. With the pandemic, they are re-thinking how they generate sales and want to offer an online shopping experience.
How might we help Mo’s Art Supply introduce an online shopping experience for their local clients?
High-level goals
Discover users’ expectations & needs
Will Mo’s loyal customers transition into online shopping? Can Mo’s attract a new customer base?
Build the information architecture
With an inventory of over 2,500 references, what is the best way to organize the inventory for the customers?
Create a tailored online experience
What services must be included in the e-commerce extension? What does shopping at Mo’s online look like compared to in-store?
Research: discovering who the user is
I started by conducting interviews of current in-store shoppers.
My goal was to learn about clients’ shopping habits, online experience expectations as well as their level of loyalty to Mo’s Art Supply store.
Insights from interviews were consolidated into an affinity map which then helped me define two user profiles.
Persona 1: the local artist
Wants to support local businesses
Likes recommendations from Mo’s artist community
Drives to the store only if he has checked stock availability prior
“I call the store before I go there to see if they have the stock. Between my work and my art projects, I can’t afford to drive up to Mo’s to learn they don’t have what I need.”
Persona 2 : the art teacher
Wants to track her supply expenses better
Loves the new project ideas that Mo’s team shares when she visits the store
Buys and reorder her supplies in bulk for her classes
“I craft the same type of projects with my students and for now I have kept a paper list of what I bought in the past. I wish I could track my purchases at Mo’s.”
Interviews’ insights turned into users’ needs
Preview stock
Mo’s store is small and knowing the stock level in advance saves time.
Product reviews
Trying new materials can be risky. Reviews help sorting out the best choice.
Order history
Shoppers tend to stick to the same brands. Reordering in a few clicks is crucial.
Home delivery
Shoppers stay more at home with the pandemic. Home delivery is a needed comfort.
Analysis : defining the minimum viable product
I researched other local art stores similar to Mo’s, and conducted some comparative analysis on the features they offered.
My objective was to discovered what essentials services they were offering as a small business with an online presence.
Were the first 4 features I had identified enough as an MVP?
Chart 1: Comparing local art stores
Chart 2: Comparing bigger players
Here are two features analysis I conducted.
Key discovery from chart 1: No local stores are offering online shopping. Their websites are only informative.
So I pivoted my research and selected some larger players in online sales.
My criteria for the selection was that they needed to carry a large variety of supplies, both in terms of depth and width of product type.
Usability testing: buying an item from a large art supply store
Here is a quick journey map representing one of the customer’s experience during shopping.
The goal was to identify key steps needed in the future user flows as well as potential pain points.
Insights - Extra adds-on to include on the MVP
Wishlists
To help customers sort and compare products according to their specific projects
Multiple ways of searching
To cater to both new users and regulars customers more familiar with the site
Curbside pickup
To offer a faster way for clients to get their products
Building the site map & user flows
With over 2,500 references, Mo’s Art Supply’s inventory is wide, diverse and complex.
With a stock list of current key articles, I organized an open card sort with users, including two of their current in-store shoppers.
The goal was to understand how users categorize products so I could define the product navigation.
Here is the final site map, build on the insights from the card sort:
Keep the current navigation that makes sense to current users
Incorporate the e-commerce extension directly in the navigation bar
Create sub-categories by art type, then type of product
I created 3 user flows: browsing the inventory, purchasing an item and editing a wishlist.
The goal was to test the site map and verify that the site was delivering a seamless shopping experience.
Building the solution: sketching & wireframing
I started by sketching some paper solutions and then moved into digital wireframes.
Wireframes are key in the iterative design process: they allow for rapid user testings that help refine the solution.
I focused in particular on the home page with search options, the product pages with the stock preview feature, and ratings and on the user’s profile with the wishlist feature.
The home page
Insight: the e-commerce extension must cater to new shoppers and regulars
Solution: including several way of searching for products
Search bar
Product category menu
Top sub-category sections
The product page
Insights:
Users want recommendations to ensure they are purchasing the right item for their project
Users need to know the stock available before coming in to buy
Solution: include a rating feature and a stock preview feature on the product page to help the purchase decision
Shipping and pickup options
Insight: users want access to special delivery services that can cater to their busy life
Solution: include 3 shipping methods on the check out page
Profile & wishlist
Insight: users want to compare, organize and track their purchases
Solutions:
create a profile section with a login that would keep all purchases history.
add a wishlist section to select, organize and compare products
Testing the design
I conducted several usability testings with Mo’s clients. The goal was to identify any problems in the designs.
All users were able to complete the tasks in less than two minutes, however some screens needed some clarifications.
So I ideated new ideas and implemented them into the grayscale wireframes before applying the final design.
Version 1 : Size selection menu is BEFORE the color selection drop down
Version 2 : Size selection menu is AFTER the color selection drop down
Product page issue:
Users kept trying to select the color before the size of the product, based on their shopping habits.
Solution:
I shifted the color selection menu to be first, followed by the size.
Version 1 / left: Shipping methods is ONE section
Version 2 / right: Shipping methods is split into TWO sections
Shipping method issue:
Users were confused with all the various methods available for shipping and where to put their address.
Solution:
I broke the section down into two part to make it clearer: first, select shipping method, then enter the address.
Version 1 / left: user must check the radio button before selecting payment option
Version 2 / right: payment option icons are now separated
Payment option page:
Users tried to click directly on the payment logos.
Solution:
I eliminated the check box and made the payment boxes bigger so they could select the payment method right away.
The final prototype
I conducted a visual design study to identify the colors, fonts, and overall mood of the website.
The goal was to ensure that the extension and changes needed would be in respect and integrate with their brand identity.
Color palette reduction:
The website currently uses five different colors. To stay in line with the brand identity, I used the three main colors to build the extension.
More space added:
Because the current site’s pages have a busy layout, I designed the new version with more white space in order to enhance the viewing of the products.
Mo’s Art Supply
Following the three users flows design, the prototype shows how to browse products, add them to wishlist or cart, and proceed to checkout.
As an additional step, I also added a way to check out store information on the contact page
Takeways
Make changes while keeping in mind the brand’s identity
Since Mo’s Art Supply has very loyal customers, it was important in adding the e-commerce extension that I ensured the customer would still feel they are shopping at Mo’s and not another large art supply distributor. They are a local store, and are proud to serve their community.
Guide and reassure your user at every step of their experience
User testing showed how important it is to break down processes for the user and show in the most obvious way that a task has been completed. The “added to cart” icon, doubled with the “added to cart” popup window provided crucial confirmation to the user. It’s the same with the checkout process: clearly separating the shipping options from the payment options with more white space helped guide the actions of the user.