CLARITY
NEW PRODUCT I RESPONSIVE WEB
Clarity provides users with a platform where they can have personalized recomendation from specialists & AI data. Users can save their recomendation, favorite brands and personal skintype to quick and convenient way to reserch and shop.
​
OVERVIEW
SOOJIN SIELLE KIM
LIVE VIDEO STREAM SERVICE
REDESIGN DESKTOP WEB
Our client is a live stream SaaS platform that provides simultaneous streaming unlimited number of social channels & platforms for brands and business to engage directly to their audiences and viewers.
As a UX design consultant to redesign their application page to provide seamless website experience for their users.
OVERVIEW
.png)
.png)
METHODS
Screener Survey I User Interviews I Competitor Analysis I
Affinity Mapping I Persona Development I User Journey Map I MoSCoW Map I Whiteboarding I Design Studio sketching I Wireframes I Prototyping I Usability Testing
​
​
​
​
TOOLS
Figma I Sketch I Miro I Trello I Zeplin
​
​
​
TEAM
Soojin Sielle Kim I Phillip King I Kia Francisco I Stella Lee
​
MY ROLE
UX Design Consultant I UX Resercher I UI Designer
TIME SCOPE
2 weeks
​
01 PROJECT SCOPE
What is the client's problem space?
​
​Our client expressed their concerns and initial hypothesis that in order to improve their product, ​​
-
Modify the language and live stream phrases
-
Redesign the interface of the live stream set up page
​
Our Goals
​
Begin building a strategy that defines a new direction for the redesign thier web page, we needed to find out:
-
What do users need from the live streaming website?
-
Simple and easy way to use a livestream service
-
Quickly learn how to live stream to multiple social media platforms
​
​
​
​
USABILITY TEST AND FINDINGS
02 RESEARCH
Usability Test : the client original Web page
​
To have a better sense of how users interact with the current website, so we did 5 usability tests to understand the user experience and confirm our client's initial hypothesis. We showed to users the current setup live stream page and asked them their initial and honest first thoughts about the product.
Finding : We found
​
4/5 users were confused by the language and did not understand what they were meant to do.
​​
Original Setup Live Stream Page
Media Platform Set Up
Video Title Set Up
Live Stream Choice
2
1
3
1
2
​
​
4/5 users were confused by the overall process of how to set up a livestream
​​
3
SCREENER SURVEY AND INTERVIEWS
Screener Survey to find participants who:
1. has live stream experience
(setting up, running, analyzing)
After the current website usability test, we have a takeaways of what we need to focus on for our next steps, our objective was to discover the goals, behaviors, and challenges of people who use livestream services for marketing/branding/PR/brand activation.
2. in the marketing/brand
activation/PR work industry
and/or
AFFINITY MAP (Using Miro)
PERSONA
Trisha, 27, Marketing Coordinator
​
" My goal is to reach a wide audience online while livestreaming marketing events"
​
"I need simple, easy to use livestream service and I like to learn how to live stream to multiple social media platforms"
Interviews
We were able to interview 5 participants who fit our criteria,
and some questions we focused on during the interviews are:
Who
are your target
audience / consumers?
?
Why
do you live stream?
How do you promote a livestream?
?
What
do you consider as a successful livestream broadcast?
​
Whet are some important factors to consider when / if you use live stream services?
?
03 SYNTHESIS
AFFINITY MAPPING
KEY RESEARCH FINDINGS
Our team synthesized data and identified trends across our participants through affinity mapping
Business and Marketing goals
Hover
5/5
Live streaming is essential to businesses. Participants believe that live streaming helps/will help reach their business goals
Communicate and engagement with audience
Hover
5/5
It is important to connect and engage with the audience. They also measure success of an event/live stream through attendance and engagement
Information
overload
Hover
3/5
Users struggle to manage all their live stream/social media accounts at the same time during events/stream.
TRISHA'S JOURNEY MAP
PERSONA
NEEDS
Learn how to live stream to target audience across multiple platforms
​
​
​
​
Trisha 27
Marketing Coordinator
GOALS
To reach a wide audience online while livestreaming marketing events
​
​
​
​
PAIN POINT
Simple, easy to use livestream service
​
​
​
​
BEHAVIORS
She uses social media platforms based on her target audiences
​
​
​
​
PROBLEM STATEMENT
Companies livestream events to market, brand, inform, and sell to a wide range of audiences and engage with them in real-time. Trisha struggles to learn and manage multiple livestream platforms
​
How might we help Trisha easily livestream her events across multiple channels.
04 IDEATION
FEATURE PRIORITIZATION
Based on research, we used the MoSCoW Map to determine the core features we need to prioritize in order to help users easily manage and set up a live stream with our client’s web application.
Our main priority was to create a simpler design for users to understand how to set up a live stream for anyone who stream personally or professionally.
​
Must features: Primary navigation, Profile indicator, update languages, choice button for multi-choice platform, LIVE notification button, greneral information explained, on-borading notification
CHALLENGE 1
Language
MULTIPLE CHOICE
After our research on streaming technical terms, we created a multiple choice of phrases that can best replace "Push from Encoder" and "Syndicate Pull".
Initially, users were having a hard time understanding our question and task without any context about live streaming. Therefore, We created a Explanation Chart when and what is needed for each type of livestream service.
PERSONA
Based on the chart above, we tested 5 users and asked them which terms fit the given scenario the best.
​
Users chose as below:
CHALLENGE 2
Interface Design
DESIGN STUDIO: Lo-Fi sketches
​
Our team conducted 3 Design Studio seesion, each seesion set up 3-5 mins timer to come up with interface design while keeping in mind of MoSCoW Map Prioritization list.
LOW FIDELITY PAPER PROTOTYPE
​
We decided to create two separate pages for users to simply setting up by:
​
-
Choose how to live stream
-
Set up the live stream (with links/actions required to start)
Choose how to livestream Page
Set up Livestream Page
Team : White boarding Lo-Fi wireframes
Usability testing: Lo-Fi Prototype
MID-FIDELITY WIREFRAMES
.png)
Choose how to Livestream Page
Set up Livestream Page
Lo-Fi Prototype
HIGH FIDELITY WIREFRAMES
A major change from Mid-Fi to Hi-Fi wireframes is changing the process flow horizontally (users were confused as a step-by-step process), into a vertical flow without the numbers and arrows to cue users that they do not need to go through and follow strict steps to set up a live stream.
Lo-Fi Wireframe
MID-FI USABILITY TEST AND ITERATIONS
​
Usability Test: Users were given a scenario and task to pull from an outside source and go live on Facebook and Youtube.
​
4/4 Users were able to successfully complete the task with no difficulty.
However, users questioned the order of information and design presented.
It looks kind of crowded in just one page!
-User 1
Do I have to follow the
order to set up?
-User 3
Is this step by step
process?
-User 2
05 SOLUTION
Mid-Fi Wireframe
Hi-Fi Wireframe
ORIGINAL LIVESTREAM PAGE Vs. REDESIGNED HI-FI WIREFRAME
3
3
2
1
Redesign Livestream Page
Original Livestream Page
New: Choose how to Broadcasting Page
3
New: Set Up Livestream page
​
A major change from the original livestream page to redesigned Hi-Fi wireframes is: from changing
-
From changing 1 application page to 3 separated pages.
-
Add Social media platform with viewrs number
-
Add LiveChat section to communicate with their audience
-
Add 'LIVE' signal & video timer inside of the top screen
Instead of overwelming for the users to set up everything at one page, we add the primary navigation to set up their profile, Choice of livestream method, Choosing broadcasting platforms (can be set up as a default). This will save users livestream process time.
1
2
HI-FIDELITY WIREFRAMES FLOW (CHOICE: WEBCAM)
1
2
1
6
6
​
2
3
4
5
3
4
5
-
Users will be able to choose how to live stream which will take them to the following page
Choose how to broadcast Page
-
Instructions to start the live stream will appear for webcam streaming.
Users will be able to select the platform on where to live stream.
Users can add title and a short of description about the live stream.
Users can start live streaming when "Go live" is clicked.
Next button will take users to Livestream page
After the stream, STOP button to end live stream then the video will fade to cue the end of the stream.
Set up Livestream Page
HI-FI CLICKABLE PROTOTYPE
NEXT STEPS
-
Create a primary navigation with Livestream, Dashboard, Resources
-
Dashboard: Research user’s goals and needs
-
Resources: Link to “Blog” on livepin.tv
-
-
Make onboarding instructions accessible at any time
-
Enable users to add and connect platform accounts at initial set up
-
Accessible via “My Profile”
-
-
Improve icons on livestream video page
-
Continue to test and implement user feedback