UX CASE STUDY
CONCEPT PROJECT
Bringing small online shops to in-person markets
Within a team of four, we designed an app that empowers online sellers by making in-person markets accessible to them so they could build trust and emotional connections with their customers and products.
The concept...
There are many barriers to entry for small businesses to sell products in person such as high startup costs.
As a result, many small businesses start by selling on online platforms such as Etsy or Amazon.
Overview
There are some things consumers prefer to shop for in person, especially when it comes to one-of-a-kind items. With online shopping becoming easier and more convenient, it’s becoming increasingly hard to make human connections with local makers and their products. Consumers want to see, feel, touch, smell, and sometimes even hear certain products before purchasing, especially if the product is unique. Consumers want meaningful connections to the items they are buying and to the stories about them.
Problem space
COVID-19 uprooted the way people shop. Many small businesses had to embrace eCommerce or close their doors. This is problematic for a few reasons. First, since the pandemic started, data shows that two-thirds of consumers have changed the way they shop due to COVID-19. Yet despite recent changes, 90% of US commerce still takes place in the physical world. This suggests that people really prefer to shop in person. Second, our reliance on shipping has drastic consequences for our planet. Disconcerningly, packaging accounts for 40% of the global demand for plastics. And third, shipping is an evergrowing, complex, and often problematic logistic. Returns, shipments, globalization, sustainability, and labor shortages, are just a few intricacies that affect a business’s bottom line.
My role: Big ‘D’ | UX designer
Throughout the sprint, I led a team of four UX designers (Elena Lugo, Gabriele Dobbins, Jordan Cantor, Lester Li) and applied my design thinking to our process. We were deliberate with everything we did which also included embracing ambiguity. We blocked out time to be intentionally unintentional.
Methods
Created topic maps, conducted business research, competitive feature analysis, user interviews, conducted an email survey, created a screener survey, affinity maps, user personas, user journeys, MUSHCOWO map, feature prioritization, sketching & design studio, prototyping, and moderated & unmoderated usability testing.
Tools-not done
Figma, Zeplin, G Suite, Keynote, Trello, Zoom, & Slack
Timeline
2-week sprint + post-course reflections & learnings
2/3
of US shoppers changed the way they shop
90%
of US commerce still takes place in the physical world
↑↑↑
Direct correlation: eCommerce x problems with shipping logistics
40%
One such problem is the global demand for plastics
Our goals
Learning goals: Product team workflow
Every stakeholder has their own focus and goals. In this project, we learned how to craft impactful stories for different types of stakeholders. Executives, engineers, designers, and other team members might have different understandings of the UX process. We designed our app and then told our story with this in mind.
Research & project goals
With our insights from research, we created a platform that modernizes local markets for small business owners so they could have access to the features of a storefront, without a brick & mortar location.
Our user research sought to find out: (1) what buyers expect when shopping for unique items; (2) shopping patterns and habits; and (3) what are the struggles of starting a business and selling at markets.
Our challenge
A startup incubator simulator
The design prompt was to explore a problem space of our interest along with a potential strategic partner that supports our project. In other words, as a faux startup, design a standalone app with a potential business partnership in mind and pitch our concept to them.
With Flea, online-only sellers can have a physical presence, without a brick & mortar location.
_
A seller's app
To find local markets to sell at
Click through my seller's prototype below!
Our solution for local makers and sellers
Pickup & return options for sellers without storefronts
Manage reservations to sell at local markets
Imagined API integration so Etsy & Flea shops are automatically synced and managed on a single app
_
A buyer's app
To foster serendipitous purchases of unique items
Click through my buyer's prototype below!
Our solution for local shoppers
Pickup & return options to avoid shipping fees
Ability to shop locally, both online and in person
Modernizes the local market experience and makes the ability to shop locally more accessible
Pickup with Flea, ship with Etsy
New APIs & seamless syncing
A single source of data for:
Updating product details such as inventory
Updating geolocation data
Product reviews and ratings
We imagined a cohesive platform where buyers could shop on Etsy with a pickup option.
End of TLDR
I created the final screens shown above after the 2-week sprint as a personal UI challenge. Placement and content remained the same. I changed the color scheme, interactions, and the theme of the design.
I also learned some very valuable lessons from this exploration:
1. Accessibility
Phone ergonomics vs. accessible touchpoints
While scrolling through LinkedIn one day, I came across a post about Apple's new dynamic island accessibility issue. And the more I researched, the more I learned. I plan to continue to learn and incorporate inclusive design into my process.
2. Audience
Who am I talking to?
WIRED has a series called 5 Levels in which expert scientists explain concepts with varying degrees of difficulty. The biggest lesson for me in this project was similar to this. That is, I learned the importance of knowing who the audience is.
_
My UI update was inspired by the apps I love to use. And we created a series of flows that help our users reach their goals.
Here's how my team and I did it.
↓
The process
First, designing the right thing → Second, designing things right → Evaluate & iterate
After topic mapping, our team decided to explore small businesses and sellers. We discovered various problems and create a product backed by research. After the program finished, I revisited the UI design of the project. I studied UX/UI solutions from apps that I love to use to see how and if those concepts could improve our app.
2-wk sprint
Discover
Define
Develop
Deliver
Post sprint
Study
User research & interviews
Listening to sellers' & buyers' experiences
We also found it important to validate the problem space through user research. Our team conducted interviews with 5 sellers and 5 shoppers. We created a screener survey to find sellers who sell physical goods without a brick & mortar shop. We asked questions that aimed to uncover our users' pain points, frustrations, and past experiences with selling unique, one-of-a-kind, or handmade items.
We then synthesized our findings through affinity mapping and distilled insights from strong groupings and themes.
Sellers' key takeaways
Operational conflicts affect the growth of small online & in-person businesses
An emotional connection helps vendors sell their products
Shipping logistics and fulfillment create indirect challenges for the vendors
Shoppers' key takeaways
Shoppers like to browse in person when they don't know what they want
Shoppers feel guilty and embarrassed when they don't support small businesses
The ability to return items is a strenuous necessity
Personas + user journey
Designing for our target audiences
After we gathered our thematic insights, we created two personas that reflect our target audiences: one for our sellers and one for our shoppers. And with our newly crafted personas, we mapped out a user journey that shows the stages with the greatest opportunity. We noticed that the areas for the highest digital impact were the stages where Tara and Jamie are not interacting in person. The moments before and after a market is when we can best aid in the process.
Ideation
Sketch & ideate. Evaluate & sift. Rinse & repeat.
Revised Problem Statement
Shoppers like to shop in person and stumble upon cool and unique items. The ability to talk to makers and sellers helps build an emotional connection to the product, seller, or brand. In part, this is because interpersonal moments help bring a story to life. So we set out to build a platform with this question in mind.
How might we help online sellers interact with customers at in-person markets to build trust and an emotional connection to their products?
Design studio
We held various design studios throughout our process. For the design studio that led to the MVP of our redesign, we used a MUSHCOWO map and feature prioritization matrix. We distilled features from our insights that address pain points we uncovered during our research.
We prioritized these new features & changes...
Sketching on Cr@zY 8'$
As a way to generate and explore a lot of ideas and concepts quickly, we ran rapid-fire timeboxed design studios. Our team sketched, ideated, iterated, and debriefed on what works and what doesn't. We focused on addressing the insights we got from our research. In particular, we focused on...
Chat feature
Pick-up/return options
Shop management & logistics processes
A flow for reserving a booth at a local market
Featuring local trending products and shops
Usability testing
Mid-fidelity → high-fidelity
In order to ensure our product met the expectations of our users, we had 2 rounds of usability testing with 10 participants. After testing our mid-fi designs, we revised the project to address the issues we surfaced. Check out our process below.
Reserve now was hard to find
Many of our participants didn't understand the location of the reserve now button was at the end of the horizontal scroll bar.
So we moved the button
We relocated the reserve now button from the end of the available dates to a permanent button below. This had a significant effect and raised our overall success rate by 80%!
Most people tap on the photo
All of our participants initially clicked on the photo to move to the next screen.
A humbling learning experience
We fixed this glaring oversight and made the photo a touchpoint to move to the next screen. This increased our success rate by 10% to 100%!
Introducing...
Flea
Bringing technology to antiquated models of organizing
Flea brings in-person markets to the 21st century. After the 2-week sprint as a personal UI challenge, I updated the UI with solutions inspired by the apps I love to use. Apps such as Resy, Duolingo, Nike, Lyft, Etsy, and Square. And I created a cohesive series of flows that help our users reach their goals.
_
Flea 3.0
I created these final screens/flows as a post-course UI challenge, inspired by the apps I love to use
The shopper's interface
Standardized design language
Standardized spacing
Standardized 4-column grid
Flow of reserving a booth
Less information at once
Buttons instead of dropdowns to gamify and improve the flow experience
Consistent design system
Designing for accessibility
CTAs attached to the bottom
Confirmations attached to the bottom
Optimized for single-handed use
Contextualizing stats & chats
Easy-to-read stats
Relevant listing stats
Reimagined notifications to be shown in the message box for contextualized chatting
Etsy integration
Find sellers that are participating in a nearby market
Shared reviews
Shared inventory information
Post project reflections
The art of telling a Pixar perfect story
Stories enable shops to connect with their community. They provide narratives of meaning, purpose, history, and direction. This lesson was also realized when crafting our project's story. The importance of learning how to articulate design decisions, design processes, and the whats and whys was made clear to us.
For me, storytelling is more than a well-crafted presentation. In addition to that, it can help us remember the values we hold dear. And for future projects, we can retrospectively think of well-told stories as a method of wayfinding. In other words, stories help us remember what's important so we can more easily repeat successes or avoid failures.