Designing a Website to Promote the #shopsmall Movement
A Designlab capstone project: Responsive Web Design
This project was completed through Designlab’s UX Academy. I led this project solo end-to-end and took on the roles of researcher, designer, and tester. The estimated project length was 80 hours.
The Opportunity 🌟
I host a podcast called “Virtual Coffee.” I interview small business owners from around the world to showcase their stories, perspectives, passions, and advice. My mission is to expand awareness of why shopping from small and local businesses is important, not only to the people behind the businesses but for the world.
How might we support the small business community by showcasing the people behind the businesses and spreading awareness of the shop small and shop local movements?
The Problem 🔍
About a year ago, I created a basic Wix website for Virtual Coffee. There is an opportunity to improve and evolve the podcast’s website to grow Virtual Coffee’s audience and expand its reach and impact.
For this project, the focus was to grow Virtual Coffee’s audience of podcast listeners and shoppers. While small business owners were explored as a persona group, an intentional decision was made to design the evolved website based on the primary personas of podcast listeners and shoppers.
There lacks a solution in the small and local business space to educate shoppers on the importance of shopping small and local. While websites, such as Etsy, exist to provide a centralized online shopping experience to shop from small businesses, there isn’t a website that deeply showcases the people behind the businesses.
Virtual Coffee’s goals are to:
- Showcase the people behind small and local businesses
- Educate shoppers on the importance of shopping small and local
- Create a beautiful experience for shoppers to purchase from, learn about, and discover small and local businesses
These goals can be achieved through an evolved website.
The Who 👫
Through three virtual consumer interviews, a LinkedIn survey, and an Instagram survey, two primary personas and one secondary persona were created.
The Research 🔍
User interviews
In-person and virtual user interviews were conducted. The interview questions focused on the interviewee’s podcast and shopping habits. This is because Virtual Coffee’s current main offering is a podcast, but the brand wants to expand into other offerings, such as a centralized place online where consumers can shop from small and local businesses.
Topics explored during the interviews included:
- How often do you listen to podcast(s)?
- How do you find/discover new podcasts?
- Are you interested in supporting small and/or local businesses? Why or why not?
- What’s preventing you from supporting small/local businesses? Why?
- How do you prefer to shop for non-essential items (e.g., self care items, home decor)?
- Which type of learner are you? Visual, audio, hands-on, etc.?
User interview synthesis
After synthesizing the insights gained from the user interviews, several themes arose:
- Discovery of Virtual Coffee and acquiring new listeners will be challenging
- For hands-on learners, podcast transcripts are important
- Most people probably won’t binge/listen to every episode of the podcast
- Most people don’t know how to get involved with small and local businesses
- Some people dislike browsing when shopping online — they’d rather browse in-person
These themes led to several how might we questions:
- How might we entice people to discover the podcast?
- How might we group episodes/shops based on locations and neighborhoods for easier access by consumers?
- How might we help shoppers make a decision when shopping small online?
- How might we help shoppers evaluate the quality of a product when shopping online?
- How might we make shopping small more accessible and available?
How might we educate consumers on the importance of shopping from small and local businesses?
Getting consumers to understand the importance of shopping from small and local businesses is key. Once they are bought-in to the Why behind shopping small and local, then they will be looking for a way to discover small and local businesses. After they discover the businesses, they will want to shop and support them.
Virtual Coffee’s goal is to help consumers through the consumer lifecycle, ultimately promoting the #shopsmall and #shoplocal movements.
Competitive analysis
A competitive analysis was conducted to discover current websites in the market — particularly, websites that showcase podcasts and websites that showcase small/local businesses were explored.
I was inspired by existing podcast websites, specifically the “Him & Her Podcast” website. Their feature of “Choose A Topic…” is interesting, as it allows the user to explore their podcast episodes via topics of interest, rather than having to scroll through hundreds of episode titles. This inspired me to do something similar but for exploring products from small and local businesses — how might we allow shoppers to explore products by product type or recipient type?
While websites exist that showcase products from small businesses (e.g., Etsy), these websites typically emphasize the products over the people behind the businesses. It’s also not obvious whether or not the businesses featured are vetted for sustainability best practices, no animal testing, leveraging locally sourced ingredients, etc.
Virtual Coffee has the opportunity to not only showcase products from small and local businesses but to tell the story of the people behind the businesses. There is also an opportunity to vet and promote businesses based on their sustainability best practices.
Online survey
Through LinkedIn and Instagram, online surveys were posted to gather insights on consumers’ opinions on shopping from small and local businesses.
In summary:
- Most people listen to podcasts on a weekly basis
- There is high interest in supporting small and local businesses
- Shoppers prefer shopping online over in-person, but the margin is small
- Most people prefer to learn via multiple platforms (e.g., visually and hands-on, not just hands-on)
The online surveys validated my assumption that consumers are interested in shopping from small and local businesses. They also validated my assumption that listening to podcasts is a popular way to consume information and be entertained.
Site map
A site map was designed to visualize the information architecture of the website.
Crafting the site map helped me visualize the possible offerings of Virtual Coffee, beyond the podcast. I focused on creating the site map based on the prioritized actions of users:
- Learn: learn about the importance of shopping from small and local businesses
- Discover: discover small and local businesses to support in your area and around the world
- Support/Shop: shop directly from small businesses — a one-stop-shop
- Engage/Listen: engage with the people behind the featured businesses
Low-fidelity wireframes
Before jumping into Figma, low-fidelity wireframes were designed to visualized the layout of the evolved Virtual Coffee website. Insights based on my research and user interviews were leveraged to create the wireframes.
The Design 📱
Home
When users first navigate to the Virtual Coffee website, they will immediately see a primary call-to-action that allows them to enter their zip code and browse/shop from local businesses in their area. This was an intentional design decision based on my research and user interviews. I want to make it as easy and straightforward as possible for shoppers to discover small businesses in their area.
Shop
On the Shop tab, users are greeted with a quick blurb of a featured small business. Having this featured business at the top of the page supports Virtual Coffee’s goal of promoting and showcasing the people behind small and local businesses. It also helps shoppers get to know more about the businesses they may be shopping from.
Also on the Shop page, users are able to select from suggested categories based on product type and recipient of the product. This helps shoppers browse products online easier, rather than having to sift through pages of products that have no relevance to one another.
Search
When shoppers search for a product, they are shown a grid of products — this design follows typical UI/UX patterns.
Shoppers can also filter and sort the products shown — another UI/UX best practice. Having the ability to sort and filter products gives the shopper control over their shopping experience and makes browsing for products more efficient and accesible.
The Branding ✍️
Brand elements for this project were based heavily off of Virtual Coffee’s existing logo. A mood board was also created to gather elements of inspiration for the website’s color palette and imagery.
Brand principles:
- People-centric
- Bright colors
- Showcases the people behind small/local businesses
- Showcases products from small/local businesses
The Feedback 🎙
Throughout the design thinking process, feedback was gathered from potential users as well as design mentors and colleagues.
The feedback that stood out to me the most was insights around the look and feel of the website as well as the primary call-to-action.
Look and feel
Through feedback sessions, users expressed feedback on wanting to feel happy, uplifted, and not rushed when exploring the Virtual Coffee website. I focused on balancing the color palette between darker blue hues and brighter pink hues.
Based on research and feedback, it’s important to showcase not just the products from small and local businesses but the people. When creating the mood board, I ensured images of people shone through.
Call-to-action
I received helpful feedback regarding the website’s primary call-to-action (CTA) and ensuring that CTA is properly displayed and easily accessible by new users/viewers of the website.
My Reflection 💭
Highlights
This was more of a personal project for me, as it involved evolving and redesigning my own podcast’s website. I am passionate about the small and local business communities, and I’m glad to have had this opportunity to think through how to grow my business so I can support those communities even more.
Next steps
In terms of next steps, I plan on implementing this website. I want to grow Virtual Coffee into more than just a podcast. While the podcast will remain a piece of the overall business, I want to expand the offerings of the business, such as having an online place to shop from small businesses, to discover local businesses in your area, and to learn about the importance of shopping small and local. Hence, the primary driver for designing the screens showcased above.
I do not consider this project “complete,” as there is more opportunity to add to this website and the experience it provides its users. I’m looking forward to pivoting my focus to Virtual Coffee after completing this Designlab bootcamp.
