UX Design | Social E-commerce | Responsive
OMI Live Shopping Platform
Redesigning and Responsive Design
OMI is a live shopping platform that aims to promote eco-friendly and sustainable brands/products through live streams
MY ROLE
I was the solo UX Designer of the project working with the owner of OMI.
I redesigned their existing e-commerce website and set up a responsive experience for tablet and mobile views.
Created their branding style reflecting minimal, eco-friendly and calm nature of the company’s vision
PROBLEM
Their current platform is lacking the understanding of how live shopping works, what the purpose of the brand is and being able to see live, past and upcoming streams.
They need consistency with their UI Design and the branding to reflect the vision of the company.
GOAL
I wanted to understand the concept of live stream shopping, live shopper’s needs and frustrations to provide them with a seamless shopping experience
Also, I wanted to understand my client’s needs and expectations to be able to improve their current platform and create effective brand kits through weekly meetings.
TIMELINE
RESEARCH
OBJECTIVES
Learn about the target audience and demographics
Measure how many of them are familiar with live shopping, what they know about it
Discover if online shoppers purchase a product that influencers/celebrities promote through live video and/or live streaming.
Explore what tools/features are necessary for shoppers/streamers that enable an efficient, easy, and accessible live shopping experience.
PRIMARY RESEARCH
1.SURVEYS to explore and define online live shoppers and their needs, and recruit participants who had prior live shopping experiences for user interviews.
I conducted the survey online through Google Forms.
With participants who prefer online shopping over in-store shopping that I recruited through my circle of social networks and slack channels.
I created 16 questions to find answers for my initial research questions: Survey questions
-
As my client stated during the interview, live shopping in the US has recently started gaining popularity and being commonly used as a new marketing strategy. So, for my user research, I made it clear about what live shopping refers to, to be able to collect reliable data.
The purpose of the brand is to reach out both online shoppers and streamers. So, for my user research, I initially planned to understand needs and behaviours of both shoppers and streamers. However, I couldn’t reach out to streamers/influencers due to time constraint of the project. So, I took shoppers as only target audience of the user research.
-
I conducted the survey with 25 participants, which helped me primarily measure what percentage of online shoppers either had live shopping experience or were familiar with the concept. Also, surveys helped me to recruit interviewees with a live shopping experience for a user interview.
Based on survey results,
Only 8% of the respondents prefer going to offline store for shopping while others prefer online shopping mostly for clothing and personal care products
40% of them heard of live shopping, 12% of the total participants have experienced it.
For details: Survey results
2.USER INTERVIEWS to deep dive into live shoppers’ behaviors, needs and pain points mostly through survey results, and Slack channels.
Recruited participants who had live shopping experience before.
Conducted 3 online, 1 in-person user interviews, took approximately around 30-40 mins.
Combined similar information from the four interviews and came up with two distinctive empathy maps based on shoppers' motivations.
SECONDARY RESEARCH
1.STAKEHOLDER INTERVIEWS with the client weekly to discuss how to address user needs and improve the design.
These meetings helped me find relevant competitors, understand the company’s vision and branding better, improve the design by receiving feedback from the client for every stage, and include necessary features like the green coin collection as a reward program.
2.COMPETITIVE ANALYSIS to see what other existing live shopping platforms meet users’ needs, what they offer and if it is working or not.
I conducted my secondary research with indirect competitors - live shopping mobile sites, FLIP, ShopShops, and LitLive. This competitor analysis aimed to capture commonalities and differences between these sites regarding the opening page, homepage, sign-up process, bottom navigation bar, search feature, and showcasing upcoming, recorded, and live now events/streams.
Competitor Analysis
STRENGTHS & WEAKNESSES
2. DEFINE
USER PERSONAS
I created two persona samples based on their primary motivations and archetypes. The main distinction between these two personas is that one on the left is a fast shopper, has a time concern about shopping, and wouldn’t enjoy long shopping streams. On the other hand, other user persona likes taking her time to make a purchasing decision, is money-conscious rather than concerned about time, and wouldn’t enjoy being rushed and non-structured live streams. I planned to address both types in my design.
SITEMAP
Based mostly on competitive analysis, I created proposed screens/pages on my sitemap to allow users navigate easily within the app.
3. DESIGN
Based on research findings, sitemap and user flow, I sketched out pages necessary to complete a task and created wireframes.
I worked on a style tile, adding other UI elements to match their existing logo and branding.
WIREFRAME SKETCHES
I started by sketching out the sign in by using a phone number. It's a step that users can't skip if they want to use the app
I drew more sketches of the opening page, homepage, …
…live stream screen and checkout process.
MID-FI WIREFRAMES
I digitized my sketches of sign in by using a phone number.
Then the opening page, homepage, …
…live stream screen and checkout pages.
UI DESIGN
STYLE TILE
I brought UI design features together to represent the brand being eco-friendly, sustainable, and minimal. And I used the logo already created by another designer since the client wants to keep it. Then I came up with a color scheme complementing the color they have in the logo to make an impression of a calm and clean vibe.
RESPONSIVE WIREFRAMES
Tablet
Desktop
Mobile - Onboarding and Sign Up
Mobile - Homepage and Live Stream
5. TEST
I conducted 2 rounds of usability testing, one with mid-fi and the other one with high-fi prototypes.
Task #1: Being able to signing up easily by using phone number.
Task #2: Reviewing recorded, upcoming and live streams on the homepage. And searching for a stream going live at that moment and joining in one of them.
Task #3: Searching for other trips in the category of ‘Art/Architecture’ through using by interest dropdown menu.
-
I tested;
• the ease of the flow of signing up, and their preference to skip
• whether users can easily understand how live shopping works
• how easily do users join a live stream, navigate through the live streaming, interact with the host, browse through featured products, and add a product to the cart during the live stream
• if the design is created based on prioritizing user’s values and needs
• if there is any difficulty, confusion, and/or problem for users during their use of the app
-
Mid-fidelity and high-fidelity prototypes for OMI mobile app.
-
I tested my mid-fi prototype with 4 users online through Zoom, and high-fi prototype with 3 users online and 1 in-person.
-
Number of Participants: 8 (total)
Age Range: Young Adults (25-35)
Personality: Online shoppers who might or might not have a live shopping experience
-
I reached out to some of the respondents of the previous user interviews I conducted to get insights from users who had prior live shopping experiences. I also recruited participants through my contact list, social media channels, Slack, and Discord channels.
First round with mid-fidelity prototype
Based on synthesis of user testings with mid-fidelity prototype, I created affinity mapping to see improvements needed for high-fi prototype for second round of usability testing.
Second round with high-fidelity prototype
After conducting the second round of testing with improved high fidelity prototype, I created another affinity mapping and identified improvements needed for onboarding, sign up pages, homepage and live stream page.
Following that, I created a priority matrix and categorized improvements according to user value and time & effort.
Then, I worked on revisions of three prior improvements with high user value and low time & effort.
CHALLENGES, LESSONS LEARNED AND INSIGHTS
I gained many insights and experiences with the client meeting me once in every week throughout the project. First of all, I learned how to communicate my design thinking and findings with a company owner who isn’t familiar with the UX language. Second, even though live stream shopping isn’t widely known concept in the US, she helped me to explore the subject deep enough since she has a lot of knowledge in that area. And lastly, I was able to understand better the project’s business demands, and expected results, and learned how to meet client’s needs while still prioritizing mainly the user needs.