Bringing the joy of the in-store experience online
Creating a concept eCommerce website for a local arts and crafts shop.
Overview
- Sprint duration: 2-weeks
- Brief type: Concept
- Deliverables: Mid-fidelity prototype and project presentation
- Tools used: Miro, Trello and Figma
- Team: 6 for the research phase, solo for the define, develop and deliver phases
Context
2020. A year no one will ever forget. Retail shops in the UK were ordered to close for a staggering 103 days from March to July due to the Covid-19 pandemic.
These unprecedented closures proved to many brands that having an online presence had never been more important. But, many retailers were faced with the question, how do you bring the joy of the in-store experience online?
Brief
The brief for this project was to help Craft & Co, a neighbourhood art supplies shop, do exactly that. They were looking to create an eCommerce website to showcase their product range whilst still maintaining their ‘small shop’ appeal and quality customer service. The site had to cater for their key customer groups of local residents and small business owners.
Outcome
Using the double diamond design process, I learnt through research the importance users place on seeing and feeling art products before buying them. So, I developed a solution to bring the Craft & Co store to life online via a video shopping experience. This would connect website users with in-store staff so that they can preview products before purchase.
Discover: Learning about users through research
User Interviews
To kick off the discovery phase, my team and I conducted 12 user interviews to find out about users’ experiences towards shopping online, shopping in-store and more specifically, shopping for art supplies.
Our key findings were:
- Users generally prefer to shop online due to convenience, large product selections and discounts
- They prioritise websites with smooth checkouts, multiple delivery options and PayPal
- But, when shopping for art supplies, users prefer to shop in-store
- They want to see and feel the colour and quality of art products before buying them
“The thing about art supplies is that they’re very tactile, I want to see and feel a type of paper before I buy it.” — Isabella, 27, London
Competitor Research
To continue our research, we needed to understand the competitive landscape of the online arts and crafts industry.
We began by doing a feature comparison of 3 direct competitors who had an on and offline presence and 2 indirect competitors who are known for having efficient websites and services.
Our key findings were:
- The features, about us, wish list, reviews and recommendations were popular amongst both these competitor groups
- Only 2 competitors had a live chat function with customer service efforts being focused on email and telephone
From this research, I learnt that there was an opportunity for Craft & Co to explore a live chat feature to differentiate them from competitors. This feature would also be a way of maintaining their high standard of customer service online, whilst also bringing the in-store experience to their website.
Next, I mapped out the competitors on a quadrant map. This helped me visualise where they sat in the market with regards to their shop feel and customer service offering.
I positioned Craft & Co in the top left hand quadrant as the key features of their new website would be to celebrate their small shop feel and offer top quality customer service. This would help them stand out in the market.
Understanding how users categorise products
Next we conducted 12 open card sorts. We asked users to organise 38 of Craft & Co’s bestselling products into groups and label them. I then used these results to help me design the information architecture of the site.
Overall users struggled to categorise products due to the diverse range (from technical art supplies like studio lamps, to gifts like candle making sets). Users sorted all products by type and separated the art supplies, gifts and printing items into separate categories.
Using this research, I defined 6 key categories for the global navigation and built a sitemap.
After completing the discover phase with my team I then moved on to the definition stage alone.
Define: Defining the users core challenges
User persona
Based on user research, I developed a persona who represented Craft & Co’s small business customer segment. Meet Jane, she’s 27 and an art teacher from north London.
I found creating this persona really helped as it allowed me to stand in Jane’s shoes and really empathise with her feelings. I kept this in mind during my design process to ensure I was creating a useful solution to fit her needs.
Jane’s Problem
Then, to further aid my definition process, I defined a scenario for Jane which represents a key pain point which emerged from my user research. This scenario centres around users wanting to experience art products before buying them.
Jane needs to buy a marker pen set for her art classes. She’s got a budget of £200. She’d like to seek advice from an expert before she makes this purchase.
The solution
With Jane, her scenario and Craft & Co’s needs in mind, I developed an idea. What if Jane could have a live video call with Craft & Co’s in-store staff where she could seek advice about products and see them in action?
Not only does this answer Jane’s need of ‘virtually’ trying before buying but it also answers Craft & Co’s goal to maintain quality customer service and their small shop appeal by bringing their store to life online.
Jane’s user journey
To define Jane’s journey on the Craft & Co site, I created this user flow. It takes her through:
- Browsing for products
- Interacting with the live chat function
- Speaking to an expert via video
- Adding an item to her bag
- The checkout process
Develop: Ideating and testing different solutions
Putting pen to paper
For the first stage of my development process I put pen to paper and sketched out screen flows for Jane’s journey. I found this a useful exercise to focus my thinking on important features.
Moving to low-fidelity and testing take 1
Then I created low-fidelity wireframes and a prototype in Figma. I tested this on 3 users. I set them Jane’s task scenario to buy a marker pen set but to seek advice from an expert before purchasing.
My key findings were:
- Users were not sure what icons were for which function
- On the product details page, users struggled to notice the chat pop-up
Moving to mid-fidelity and iterating take 1
Then, I took my designs to mid-fidelity and made the following changes:
- Included a call out to the live chat service below the navigation to ensure users could find this feature on all pages
- Made the live chat popup stand out more by pinning it so that it would scroll with the user
Testing and iterating take 2
I then tested this iteration on 2 users and my key findings were:
- Users were able to navigate the site well through the navigation and completed the task scenario
- However, users still struggled to notice the chat popup on the product page
I then made the popup more prominent by including icons and shading to ensure it was more eye-catching and visible to the user.
Deliver: The final solution
Prototype
After 2 rounds of usability tests and iterations I ended up with my final mid-fidelity prototype. Let’s find Jane some marker pens!
Check out my prototype here or watch the video below.
Reflections
As I have a background in eCommerce, I thoroughly enjoyed this design challenge. I found the discovery phase eye-opening as it was valuable to learn about users’ true habits when it comes to shopping online.
I loved conducting the card sorts and think this would have been a really useful tool to use in my previous roles. When deciding how to categorise products and label navigations, we tended to base our decisions solely on business needs and neglected the user. If we had involved the user in this process, I believe it would have resulted in more effective navigation systems.
Reading recommendations
Whilst working on the project I spent some time researching the virtual shopping trends of 2020. Here are my favourite articles (and a podcast):
- Virtual shopping for retail stores > Shopify.co.uk
- Is Virtual Shopping The Future Of Retail? > Forbes.com
- Video-Streaming Firm’s 1,200% Surge Hints at Future of Retail > Bloomberg.com
- Resilient retail podcast: The Detox Market on rethinking the role of retail store associates > Shopify.co.uk
🙏 Thank you for reading!
👏 Clap if you enjoyed this article
💼 Visit my portfolio to see my work: katiechase.co.uk
