User Personas
Group Project
Vybes Shop - Influencers E-Commerce Website
UI/UX Design
Redesign web
Project Overview
This is a project that I did as a work assignment in my previous office, Influencers Digital Marketing. It is focused on how to fix an e-commerce platform that is effective and has complete features to make it easier for seller/influencers to selling/buying online.
Team
CTO, Two Frontend Developer, Two Backend Developer, UI/UX Designer
The Problems
Vybes has been continuously improving its existing products for its users, resulting in a user-friendly platform. From research, many of the existing users who used Vybes reported that they face the frustration of need a simple interface and more clearer, add some features that provide personal life store (customizations of the store)and provide many guidance to help them use the platform
Role
UI/UX Designer
Conducted user research
Generated user personas
Created wireframes
Made prototypes
Designing new interface for platform
In here I use design thinking to solve the problem. There are five steps in design thinking, i.e., empathize, define, ideate, prototype, and test.
My Workflow
Conduct research to gain real insight into users and their needs.
Empathize
Accumulate the research information and observe what users problems
2. Define
Generate creative ideas with “think outside the box”
3. Ideate
Build real, scaled-down versions of the product to arrange the idea
4. Prototype
Return to the user to get feedback
5. Test
Stage 1 - Empathize
In here, I make a Research Plan to know deeper the objective, methodology, sample, and key information that will be used for this project.
Research Plan
My objective here is to find out and explore the pain points or barriers when using the currently Vybes platforms web & Apps.
Objective
In this research, I used a qualitative methodology (In-Depth Interview), survey and a Competitive Study.
Methodology
Users & audiences in this project are people who have used Vybes platforms and online store applications
Users & Audiences
Online sellers, especially in the field of beauty
Online sellers who have created an online shop in the marketplaces
Female/Male
20–45 years old
National Scale (Nationwide)
Sample Specification
After compiling the research plan, I made a research guideline for conducting In-Depth Interviews (IDI). This guide contains introductions, explanations for users regarding the interviews, and a list of questions based on key information areas.
Making Research guideline
In this part, I conducted interviews according to the sample specifications in the research plan that had been made to better understand users about their habits when using Vybes platforms and marketplace applications. I conducted interviews with 10 participants at google meet.
Who they are
Why they joined
Do they sell online? What platforms do they use? (Tokopedia, Shopee etc.)
How much monthly sales?
Where do they get their supply from?
How do they price their products?
Distribution? How do they deliver to customers?
Do they do any marketing? (Shopee ads, Facebook ads)
What their experience of our platform is
What their pain points are
What is preventing them from adding more products /getting more clicks /more sales…
Do they need a storefront? What do they think of a storefront for their online shop? others insight (what are their biggest challenges?)
Interviews
The key information areas are some of the main subjects we wish to explore in this study. These key information areas will be used as material to be processed in the preparation of the questionnaire:
User Profile
User behavior when using Vybes shop platforms & other marketplaces
Pain points experienced when using Vybes shop platforms and marketplaces applications
Feedback & Suggestion on Vybes shop platforms
Expectations on Vybes shop platforms
Key Information
Competitive analysis is a necessary part of the design process to help businesses gain valuable insight into the market, identify the strengths and weaknesses of their products, and develop effective product strategies to create winning results.
Competitive Analysis
Raena
Evermos
Desty
Product Offering
Beauty Products
All products (Digital products, F&B products, Stationery, Sport, electronic, automotive)
Microsite builder
Storefront
Target Customer
Reseller, dropshipper
Reseller, dropshipper
Online sellers, F&B Merchants, creators, influencers, service providers
Biggest Strengths
Free shipping throughout Indonesia
Free business training
Free content and copywriting to promote
Provides many categories of goods that can be sell
Create a microsite for free and with attractive interface options
Biggest Weaknesses
Does not have online store
There is no order tracking in the order system
Have not marketing feature (promotion manually)
Stage 2 - Define
I create User Personas to help uncover targeted user behavior.
Alexa
age : 25
location : Yogyakarta
job : Employee and
beauty selebgram
She is an employee who works in a Garment company. She has a hobby of makeup, and worked as a makeup artist before pandemic.
Background
She want to get product with low price than the marketplace
Platforms reseller that provide original products
Easy to use
Provide image content so it easier to selling to her customers
Goals
There is an admin fee when using shopee or selling on other market places.
There are too many rules for uploading products on shopee such as size image, info product (details product)
How to maintain consumer trust and look for original products
Pain Points
She is housewife and Online seller. She is a mother of 1, based on Malang. Already selling online around 2 years.
Background
She want to get product with low price than the marketplace
Platforms reseller that provide original products
Provide image content so it easier to selling to her cust
Goals
Price competition with other sellers, especially for sellers who sell products with cheapest prices because they sell products that are not original
Pain Points
Jenny
age : 30
location : Malang
job : Housewife and
online seller
A customer journey map is a popular UX method that allows discovering a lot of insights about users. We can reveal more details such as the user’s emotional transformation, pain points, and UX opportunities.
Customer Journey Maps
Steps
Thinking
Doing
Feeling
Pain Points
Opportunity
How to earn extra income by selling online?
Which platform will provide the most profit?
Which platform provides original products and low prices?
Do platform research
Get information about the platforms
Found the Vybes ads
Start looking for info on google about resellers / online sellers
What is Vybes?
How to sell with Vybes?
How much profit will you get?
What products are provided and how much do they cost?
How does it work?
Are the products original?
How is the product quality?
How is the shipping system?
Explore the Vybes website and landing page
Ah, the product is original but can't choose a product quickly
The product is good but can't remove the products that sold out
No content can be shared to sell to the customers
Decided to sell the products on Vybes to customer
Sign up
Explore the product catalog
Conducting product purchase trials
Don't know which platform to use?
Don't know what product that want to sell
No idea what to sell yet
Not much information is provided on the website
The interface of the platform is still confusing
Product search feature is not yet available
No product delete feature
Lack of content to help sell to their customers
Confused about how to sell using the Vybes platform
Lack of guidance on using the Vybes platform
No tracking of product delivery
Optimizing website appearance
Improvement the Platform UI
SEO Optimization
Increase brand awareness and advertise better
Implement marketing content using TikTok, Instagram Reels, Facebook forms, etc
Social media marketing
Added splash screen page
Create a search feature in the product catalog
Creating on-off toggle system on the product
Create USP content in the form of images and videos
Added video introduction and video how to use the Vybes platform
Integrate with JNE platform
Steps 1
Steps 2
Steps 3
Steps 4
Steps 5
I created low fidelity wireframes before creating a mock up to get a basic overview of the application.
Wireframe
Splash Screen
Login & Signup
Finance
Setting
UI Design / High Fidelity Design
Splash Screen
Login & Registration
Dashboard
Store
Finance and Setting
List product and Detail product
Let’s Collaborate
I am excited to work with you to create meaningful and user-centered designs. Whether you have a vision or need help shaping one, I am eager to explore creative solutions together. Let’s combine our strengths to bring your ideas to life and craft exceptional experiences.
@2024 Eva Yulianti. All Rights Reserved
Information Architecture
User flow is used to describe the overall flow of users in using the product.
User Flow
Stage 3
The next stage is to make a system design. Making this design system will help us and the team in the future in developing existing designs.
Design System
Primary Color
Component
Secondary Color
Typography
Gradients
#5F2AE9
#2B2B2B
#FFFFFF
#E800B4
#FF087A
#007EFF
#FF7A4E
In here we use sans series type to represent professionality and modernity
Typeface:
Poppins
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ()
AaBbCc
123
Dashboard
Katalog
Toko
Keuangan
Pengaturan
Dashboard
Katalog
Toko
Keuangan
Pengaturan
Dashboard
Katalog
Toko
Keuangan
Pengaturan
Dashboard
Katalog
Toko
Keuangan
Pengaturan
Dashboard
Katalog
Toko
Keuangan
Pengaturan
Mulai Berjualan
Join
Keluar
Mulai Berjualan
