OVERVIEW
Creating a brand new e-commerce experience: a social media e-commerce platform for online shoppers
The Snazz app is a social media e-commerce platform where users can explore fashion insights, discover lifestyle inspirations, and shop seamlessly—all within a single app. This project was completed entirely remotely over the course of two months.
TIMELINE
Two Month, Feb 2019 - April 2019
MAKE OF THE TEAM
Founder & CEO, two Front-end Dev, Myself
TOOLS
Adobe XD, Miro, Google Docs, Google Slides
MY ROLE
I'm the sole designer of Snazz ios app, in charge of UX design and UI design
I led the design process from customer personas to a high-fidelity prototype, covering research, MVP definition, user flows, wireframes, prototypes, testing, and interface design.
THE PROBLEM
A user behavior: shoppers need to swap between social media apps and e-commerce apps to make purchase decisions
Since around two-thirds of modern customers are receptive to recommendations from family and friends when shopping, it’s no wonder that people use social media platforms to discover new products. According to the recent survey: 60% of people discover products on Instagram and 78% of Americans use Facebook to find new products.
Snazz is an Ai based lifestyle start-up. We observed a user behavior: most shoppers are looking for inspiration for personal style on social media. They need choosing support when making a purchase decision. That swapping behavior dramatically increases drop-off rates and shows a disconnected user experience. By defining this user behavior we found there is an opportunity to build a platform where users can find inspiration and shop at the same time.
THE PROCESS
DISCOVER
Initial Stakeholder interview and user research
We kicked off by interviewing the stakeholder to understand Snazz's business goal for instance the target region, target audiences, budget, timeline and engineering sourcing and capability. We then move on to design screening survey to find our target audience to participate user research survey, interview and testing.
Early Adopters
-
Male 20%, Female 80%
-
Mainly medium and high-income group
-
People who purchase clothing online
-
Age between 20 - 40
-
Have mid to strong connection with social media
-
Primarily shop with mobile apps
After we found our target audiences for user research, we started to design questionnaires to understand the following questions:
-
What is the target audience's typical purchasing behavior?
-
Why do they prefer purchasing clothes online?
-
How is their online shopping experience?
-
Their attitude and usage of social media
-
What is the magic feature they want for a clothing shopping app
Through interviews, I gained an understanding of the target user’s online shopping motivations, goals and pain points. Five shoppers participated in the interview.
Persona
Based on the research result, I create 3 personas that could help me in the process to better understand their needs, and in which way they can achieve their goals.
User Journey Map
After the creation of my Personas, I mapped out their shopping experience by using a Customer Journey Map
Competitive analysis
The research discover some interesting findings on functionality that the target users desire but not in a tradition shopping app. For instance, most users prefer the ability to view and share real product posted by the buyers so they would be able to see the product fit for more realistic feedback. Plus, the users are very social-media-active, they want to interact with other users as well as share personal style. Finally, users indicate customer support influenced their decision making
Based on analysis above, I compared the three well-established competitors’ shopping app: asos, browzzin and RED
DEFINE
MVP & User Stories
Based on the result of user research, persona and competitive analysis, I develop sets of user stories to address the target audiences’ need. The user stories ensure all the features for the application are from an end-user perspective. Click to see details of user story.
The MVP was defined as the following:
-
Social Media: find new trends, see favorite influencer or friend is wearing. Share style and get feedback like a influencer.
-
Shop: get inspiration and shop the similar item
Site Map
After decided the key features of the product, I mapped out a detailed sitemap to serve as the guidance to design user flow.
User flow
User Flow 1: Account
-
Scenario 1: Existing user login.
-
Scenario 2: First time user Onboard and register a new account.
-
Scenario 3: Users want to explore the app without login or register.
-
Note: Users can login or register using social media account. They will be redirected to social media page to confirm
User flow 2: Discover posting and product
-
Scenario 1: Search and view posting
-
Scenario 2: Read following post, save and make comments
User flow 3: Post & Share
-
Scenario 1: Write a post about style and share
-
Note: Guest users are asked to sign in or register before start sharing and posting. Guest users can add comments without sign in.
User flow 4: Purchase
-
Scenario 1: Existing user add item to cart and check out
-
Scenario 2: Guest user add item to cart and check out as a guest
-
Note: Guest users can check out without register, but they are asked to register an account after placing the order for further information
IDEATION
Sketch & Wireframe
I started to create iterations and iterations of hand-drawn sketches before diving into wire-framing and prototyping. To save time and maximize productivity. I used wireframe kits to develop high-fidelity wireframes rapidly. This allowed me to have tons of clean wireframes in minutes ready for user testing.
VISUAL RESEARCH
Revisiting user research, understanding the target audiences and competitors
20% of our target users are male, 80% are female, their age range in 20-40. I'm taking gender-neutral colors into consideration
I also keep color psychology in mind. Matching Brand sprint should play a key role in creating a color palette. Snazz's sprint include words like: Fashion, Exciting, Fun. The stake holder prefer minimum and clean design style.
Industry norms are also key, as are colors already being used by competitors. Using a color palette that is nearly identical to a brand’s primary competition is a great way to breed confusion and ensure the brand won’t stand out.
Mood board for inspiration
Before getting started with the visual design I create an inspiration board. The purpose was to learn about the visual world and gathering inspiration from other fashion app
Iteration
Next I explored different design possibilities, I came up with two designs and present to the team.
Concept 1
Red is the color of passion, as well as excitement. It’s a very strong color and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic.
Concept 2
Black and white are also very popular in minimalist designs, the combination create a feeling of modern, fashion and high-end.
1
2
VS
Testing with users
I did remote testing with 5 of our target users to get feedbacks. 4 of the user choose the concept 2. They love the clean design style, and feel more comfortable while using the prototype. So I developed the UI based on concept 2
Style board and Final design
Demo
Sign in with social media
Add new post
Browse content
Check out
View Profile
SUMMARY
Testing with users
I did remote testing with 5 of our target users to get feedbacks. 4 of the user choose the concept 2. They love the clean design style, and feel more comfortable while using the prototype. So I developed the UI based on concept 2
THE PROBLEM
A user behavior: shoppers need to switch between social media apps and e-commerce apps to make purchase decisions.
Around two-thirds of modern shoppers value recommendations from family and friends, making social media a natural platform for product discovery. A recent survey revealed that 60% of people find products on Instagram, while 78% of Americans use Facebook for the same purpose.
Snazz is an AI-powered lifestyle startup. Our research revealed that most shoppers seek personal style inspiration on social media and need support when making purchase decisions. The frequent switching between social media and e-commerce platforms significantly increases drop-off rates, highlighting a fragmented user experience. Identifying this behavior presented an opportunity to create a unified platform where users can seamlessly find inspiration and shop in one place.
THE PROCESS
DISCOVER
Initial Stakeholder interview and user research
We began by interviewing stakeholders to understand Snazz's business goals, including the target region, audience, budget, timeline, and engineering capabilities. Next, we designed a screening survey to identify our target audience for user research, interviews, and testing.
Early Adopters
-
Male 20%, Female 80%
-
Mainly medium and high-income group
-
People who purchase clothing online
-
Age between 20 - 40
-
Have mid to strong connection with social media
-
Primarily shop with mobile apps
After we found our target audiences for user research, we started to design questionnaires to understand the following questions:
-
What is the target audience's typical purchasing behavior?
-
Why do they prefer purchasing clothes online?
-
How is their online shopping experience?
-
Their attitude and usage of social media?
-
What is the magic feature they want for a clothing shopping app?
I conducted interviews with eight shoppers to understand their motivations, goals, and pain points in online shopping.
User Journey Map
After creating the personas, I mapped out their shopping experience using a Customer Journey Map.
Competitive analysis
The research revealed several key findings about desired functionalities not typically found in traditional shopping apps. For example, most users prefer the ability to view and share real product photos posted by buyers for more authentic feedback on fit. Additionally, users are highly active on social media and want to interact with others and share personal style. Lastly, users noted that customer support plays a significant role in their decision-making process.
Based on the analysis, I compared three well-established competitors' shopping apps: ASOS, Browzzin, and RED.
DEFINE
MVP & User Stories
Based on user research, personas, and competitive analysis, I developed user stories to address the target audience's needs. These user stories ensure that all application features are designed from an end-user perspective.
The MVP was defined as follows:
-
Social Media: find new trends, see favorite influencer or friend is wearing. Share style and get feedback like an influencer.
-
Shop: get inspiration and shop the similar item
Persona
Based on the research findings, I created three personas to better understand user needs and how they can achieve their goals.
Site Map
After defining the product's key features, I created a detailed sitemap to guide the user flow design.
User flow
User Flow 1: Account
-
Scenario 1: Existing user login.
-
Scenario 2: First-time user Onboard and register a new account.
-
Scenario 3: Users want to explore the app without login in or register.
-
Note: Users can log in or register using social media account. They will be redirected to the social media page to confirm
User flow 2: Discover posting and product
-
Scenario 1: Search and view posting
-
Scenario 2: Read the following post, save and make comments
User flow 3: Post & Share
-
Scenario 1: Write a post about style and share
-
Note: Guest users are asked to sign in or register before they start sharing and posting. Guest users can add comments without sign in.
User flow 4: Purchase
-
Scenario 1: Existing user add an item to cart and check out
-
Scenario 2: Guest user add the item to cart and check out as a guest
-
Note: Guest users can check out without register, but they are asked to register an account after placing the order for further information
IDEATION
Sketch & Wireframe
I started to create iterations and iterations of hand-drawn sketches before diving into wire-framing and prototyping. Then, to save time and maximize productivity. I used wireframe kits to develop high-fidelity wireframes rapidly. This allowed me to have tons of clean wireframes in minutes ready for user testing.
VISUAL RESEARCH
Revisiting user research, understanding the target audiences and competitors
20% of our target users are male, and 80% are female, with an age range of 20-40. I’m considering gender-neutral colors in the design.
I’m also keeping color psychology in mind, with the brand sprint playing a crucial role in creating the color palette. Snazz's sprint includes words like Fashion, Exciting, and Fun, while the stakeholder prefers a minimal and clean design style.
Industry norms and competitors' color choices are important as well. Using a color palette too similar to a competitor's primary colors can create confusion and prevent the brand from standing out.
Mood board for inspiration
Before starting the visual design, I created an inspiration board to explore the visual landscape and gather inspiration from other fashion apps.
Iteration
Next, I explored different design possibilities, I came up with two designs and present to the team.
Concept 1
Red is the color of passion, as well as excitement. It’s a solid color and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic.
Concept 2
Black and white are also very popular in minimalist designs, and the combination creates a feeling of modern, fashion and high-end.
1
2
VS
Testing with users
I conducted remote testing with 5 target users to gather feedback. Four users preferred Concept 2, praising its clean design style and expressing greater comfort while using the prototype. Based on this feedback, I developed the UI based on Concept 2.
Style board and Final design
Demo
Sign in with social media
Add new post
Browse content
Check out
View Profile
SUMMARY
The use of a user-centered design process helps me better understanding target audience.
Using a user-centered design process allowed me to uncover the target audience's motivations, emotions, and needs. The research revealed that users seek a shared space to explore and share fashion ideas while enjoying a convenient shopping experience.
Next Step
The project didn’t have the budget for extensive usability testing with external users, so we only conducted internal testing. For the next phase, if I continue working on this project long-term, I plan to test the prototype with actual users.