portfolio_uxdi2015
TRANSCRIPT
UX Portfolio 2015
L U O
Hey, Myron here…
A part of my previous job at T-mobile was helping customers with technical difficulties and service issues, which helped me grow a strong and solid knowledge about mobile apps and
devices in the market.
I am a hard worker who is driven by curiosity and a deep empathy for people and their surroundings.
I like to build sustainable products for organizations and to design the
experiences to be meaningful, intuitive, and honest; which will have a real and
lasting impact on people’s lives.
Design Process
ToolsSketch 3
Omnigraffle
Markers & Board
InVision
Hype 3
Axure
Trello
Marvel
Keynote
Google Drive
HTML5 & CSS3
Adobe Creative Suite
LookBooker.coBook salon appointments online.
Anywhere, anytime.
LookBooker is an online booking aggregator for hair and beauty appointments.
Challenges• Balancing the business’ goals and the user’s needs • Learning and understanding the business model • improving the user’s reaction to holding credit card
info in the booking process
Working alongside Evelyn Kim and Filip Nonkovic.
I was responsible for:
ROLES
• On-site user interviews • Competitors analysis • User flows • A/B testing
• Wireframe Annotation • Prototype • User testing • Presenting
ObjectiveTo increase online booking rate and help users quickly book an appointment.
LookBooker
An iOS app for people to instantly find and book salon appointments anytime through the internet
Solution
3 weeks
5 Factors That Matters To Making Choices: • Price. • Distance. • Loyalty. • Prior Satisfaction. • Trust-based reference.
Clients: We interviewed our clients to get a clear picture of their business model and goals
Survey & interviews
Customers: We had 72 survey participants and interviewed 8 respondents. We found out booking experiences vary depending on different types of services
Salons: We interviewed a salon owner and performed contextual inquiry at a salon, which acquired a perspective of both the salons and consumers.
User Research Information ArchitecturePersonas Ideate & Design Iterate
sort by popular
sort by rating
sort by avg. price
any appointmen
t time
morning (11am and
earlier)
early afternoon(11am-3pm)
afternoon(3pm-6pm)
evening (6pm and
later)
List of availablemanicure salons
select 1stsalon in list
Log-inLanding page
Click“Book Appointment” List of Services Click “Nails” Find a service
List of nail serviceClick
“Manicure”Manicures:
List of Salons
Salons defaultsort by distance
Click”Refine” Refine list by“Filter”
Click “user current location”
default select menu as”within 1/2 mile”
Set“appointment date range”
SetCurrent date
“Appointment Time”select menu
Click“evening 6pm and later”
click“Apply” List of Services Click
“French Manicure”French Manicure
Detail PageClick
“book appointment”Choose an
appointmentdate+time
Click“Today”
List of AppointmentAvailable Times
Select“2:30PM”
Appointment Detailswhat, when,
optional request
Log-inPage
Enter emailand password
click“Login”
ManicureSummary
Click“Continue”
EnterPromo or gift
code
Contact infoprepopulated
with user’s phone
number
Click”accept life bookerterms and
conditions”
Click“Book”
ConfirmationPage
Overwhelmedby long list
What’s refine?search?
AppointmentSummary
TO BOOK A “LAST MINUTE“ APPOINTMENT
39 steps
How are they doing?
State/ screen seen by user already logged-in
State/ screen seen by user already logged-in
State/ screen seen by user didn’t log-in
Action taken by user didn’t log-in
search results select a stylist
Home“FIND/BOOK”
Home“FIND/BOOK”after logged in
click“afternoon”
click“book”
booking page select a date time availabilities select a timeclick
“book now”Done.
confirmation text
selectprice range
click“current location”
click“apply”
list of services providedby selected stylist
click“wax”
click“wax”
list of stylists click filter“anytime”
filter page:date and time,
price range & payment method
click“select date”
click“select date”
select date
clickhamburger menu
click“LOGIN”
fillaccount info
click“LOGIN”
LOGINFORM
“SIGNUP/LOGIN”
TO BOOK A “LAST MINUTE” APPOINTMENT
23 steps user already logged in
30 steps user didn’t log in
* phone number required but not specified unless you try to book
w/o adding
Blow OutNails Haircut Makeup Tanning BrowsMassage Bikini Facial
Soho / West Village Topic
East Village /
LESBrooklyn Flatiron /
GramercyMidtown
East TribecaUpper West SideManhattan Upper East
Side Chelsea Midtown West
Hair Color
MapInfoBook Reviews
landing pagelog in required
selecttoday / time
list of salonswith available times
select timeon salon
salon availabletimes select a time
manicure:address, date, time
price, phone number*
tap“Book appointment”
appointment bookedand confirmed
tap“Done”
enteremail & password sign up select a service
select nailsselect nails list of nail salons select filter
“any day & any time” date / time picker
TO BOOK A “LAST MINUTE”APPOINTMENT
17 steps
Lifebooker, 39, yikes!
sort by popular
sort by rating
sort by avg. price
any appointmen
t time
morning (11am and
earlier)
early afternoon(11am-3pm)
afternoon(3pm-6pm)
evening (6pm and
later)
List of availablemanicure salons
select 1stsalon in list
Log-inLanding page
Click“Book Appointment” List of Services Click “Nails” Find a service
List of nail serviceClick
“Manicure”Manicures:
List of Salons
Salons defaultsort by distance
Click”Refine” Refine list by“Filter”
Click “user current location”
default select menu as”within 1/2 mile”
Set“appointment date range”
SetCurrent date
“Appointment Time”select menu
Click“evening 6pm and later”
click“Apply” List of Services Click
“French Manicure”French Manicure
Detail PageClick
“book appointment”Choose an
appointmentdate+time
Click“Today”
List of AppointmentAvailable Times
Select“2:30PM”
Appointment Detailswhat, when,
optional request
Log-inPage
Enter emailand password
click“Login”
ManicureSummary
Click“Continue”
EnterPromo or gift
code
Contact infoprepopulated
with user’s phone
number
Click”accept life bookerterms and
conditions”
Click“Book”
ConfirmationPage
Overwhelmedby long list
What’s refine?search?
AppointmentSummary
TO BOOK A “LAST MINUTE“ APPOINTMENT
39 steps
State/ screen seen by user already logged-in
State/ screen seen by user already logged-in
State/ screen seen by user didn’t log-in
Action taken by user didn’t log-in
search results select a stylist
Home“FIND/BOOK”
Home“FIND/BOOK”after logged in
click“afternoon”
click“book”
booking page select a date time availabilities select a timeclick
“book now”Done.
confirmation text
selectprice range
click“current location”
click“apply”
list of services providedby selected stylist
click“wax”
click“wax”
list of stylists click filter“anytime”
filter page:date and time,
price range & payment method
click“select date”
click“select date”
select date
clickhamburger menu
click“LOGIN”
fillaccount info
click“LOGIN”
LOGINFORM
“SIGNUP/LOGIN”
TO BOOK A “LAST MINUTE” APPOINTMENT
23 steps user already logged in
30 steps user didn’t log in
Beaty booked, 17, impressive!
Style Seat, 23, improved!
* phone number required but not specified unless you try to book
w/o adding
Blow OutNails Haircut Makeup Tanning BrowsMassage Bikini Facial
Soho / West Village Topic
East Village /
LESBrooklyn Flatiron /
GramercyMidtown
East TribecaUpper West SideManhattan Upper East
Side Chelsea Midtown West
Hair Color
MapInfoBook Reviews
landing pagelog in required
selecttoday / time
list of salonswith available times
select timeon salon
salon availabletimes select a time
manicure:address, date, time
price, phone number*
tap“Book appointment”
appointment bookedand confirmed
tap“Done”
enteremail & password sign up select a service
select nailsselect nails list of nail salons select filter
“any day & any time” date / time picker
TO BOOK A “LAST MINUTE”APPOINTMENT
17 steps
Competitor & Comparative analysis
User Research Information ArchitecturePersonas Ideate & Design Iterate
movement tonew action actions taken by first-time user
state/screen seen by first time user
actions taken in the process
state/screen user lands on or be sent to
last minute appointmentsummary page
loadingpage
home pageservice categories
tap“Hair”
list of hairservices
tap“Haircut - Ladies’s” list of salons
time picker, next availableappointment
tap“next available appointment”
tap“select date & time”
tap“find another appointment”
appointmentsummary page
tap“book this appointment”
tap“Sign Up”
sign-up/ log-intap
“email”enter
informations
confirmationenter credit
card informationstap
“Book Appointment”
TO BOOK A “LAST MINUTE” APPOINTMENT
14 steps user already logged in movement tonew action actions taken by first-time user
state/screen seen by first time user
actions taken in the process
state/screen user lands on or be sent to
last minute appointmentsummary page
loadingpage
home pageservice categories
tap“Hair”
list of hairservices
tap“Haircut - Ladies’s” list of salons
time picker, next availableappointment
tap“next available appointment”
tap“select date & time”
tap“find another appointment”
appointmentsummary page
tap“book this appointment”
tap“Sign Up”
sign-up/ log-intap
“email”enter
informations
confirmationenter credit
card informationstap
“Book Appointment”
TO BOOK A “LAST MINUTE” APPOINTMENT
14 steps user already logged in
How we’re doing? Lifebooker, 14, BRAVO!
User Research Information ArchitecturePersonas Ideate & Design Iterate
Personas from different demographics and ages summarized user research, help us focus on solving problems and make design less subjective. Heidi is the primary one which represents the majority of the users.
User Research Information ArchitecturePersonas Ideate & Design Iterate
Business Goal
User’s NeedsOur features are not about quantity but quality,
they derive the minimum viable product that meet the most important business metrics and the most important use case.
We prioritized the features in order to find the simplest way to satisfy the business goals and the user’s goals.
Behind the diagram you won’t see massive post-it notes all over the wall, let me tell you why.
User Research Information ArchitecturePersonas Ideate & Design Iterate
Feature Prioritization
“Find me an appointment ASAP!” We got you all covered in Tinder
style~
Map view, come and check out the neighborhood
Booking flow: 3 taps, you are all set!
User Research Information ArchitecturePersonas Ideate & Design Iterate
Meet the Features
12
3
45
61 Page, 6 versions. I named them:
Text HeavyBoys & Girls
Too Much ColorVisually Bland
“POSH” not consistent
The Best So Far!
Takeaway: Different UI layouts and details define the functionalities and certainly affect user’s feelings when they were interacting on this page.
Recommendation for client: open card sorting to build the hierarchy of elements on this page. ( I.A.)
User Research Information ArchitecturePersonas Ideate & Design Iterate
We performed user testing to develop and iterate on our design and prototype in order to make it unbreakable. If it’s broken, tell us - we’ll fix it!
Next Steps
• Social Media Integration • Improved “Reviews” experience • Highly customizable push notifications • Information Architecture for service subcategories
CLICK POROTOTYPE
• Interviewed users on the site • User-friendly on-boarding process of online-booking • Matchmaking model for online-booking, Tinder style • Iterated more than 4 times from paper prototype to
hight-fidelity mockups
Done Well
Lessons Learned
• Collaborate more, and do research with client • Learn and understand the business model • Use information architecture to build the
hierarchy of beauty services
User Research Information ArchitecturePersona Ideate & Design Iterate
A R T S Y
2 weeks
Problem
Artsy
What is the best way for people to find out about the new art in town?
Currently, users of artsy have the ability to create profiles which allow users to favorite artists, galleries, and museums. But it leaves them without the ability to view other profiles and tastes.
Artsy is an online platform providing a collection of contemporary art for art lovers.
Proposal
We proposed creating a social platform to connect the isolated Artsy users, by allowing its current user-base to connect to one-another’s profiles and share their love of art together.
I worked with Thomas Quigley I was largely responsible for:
Roles
• Desktop Mockup • Prototype & User Testing • A/B Testing • Wireframe Annotation • Presenting
• Survey Development • User Interviews • Site Map • Comparative User Flows • Feature Prioritization
1. User Research
When asked how they discuss their experience with friends and family:
We conducted a survey to discover the ways in which people discover new art, and, upon discovery, how they share their experiences with those close to them.
Our survey asked: “Do you discuss your experience of the art exhibitions you have attended with others?”
95% Responded: YES.
• 87% - In Person
• 41% - Instagram
• 36% - Facebook
• 34% - Text
By:
Instagram / Facebook / Twitter
To:
Discover what their friends tastes are.
Because most people mimic their friends tastes.
When asked “how do people typically discover new art? ”
1. User Research
We conducted interviews with eight individuals in order to further identify our user base.
We synthesized our data & analysis in order to create 3 distinct Personas.
• Wants to be familiar with her friends interests
• To know where her friends are going to see art
• To stay in the know
• To find art and artists
• To remember the shows he’s been to in the past
• To share what she has seen with people who are interested
Meet MINNA
2. Comparative AnalysisWithout any direct competition, our team focused on six comparison sites where users can create profiles
and follow fellow users to discover new content.
2. Comparative AnalysisWithout any direct competition, our team focused on six comparison sites where users can create profiles
and follow fellow users to discover new content.
3. Sitemap
Our sitemap demonstrates how we would like to elaborate on Artsy’s existing “Account” section. Take a look.
e
4. Wireframes
Following the site map, we created built a hierarchy of elements on each page.
Most important part is the local navigation bar/tab, which serves the functionality of navigating between content pieces in “Account” section.
We moved to high fidelity wireframes for detailed interactions and navigations, prepared for testing.
We created the userflow for user testing, because we want participants break the prototype and encounter potential problems that we couldn’t see. Then we fix them and iterate.
5. Design Iterations and User Testing
5. Design Iterations and User TestingIteration of on boarding process
After signing up with Facebook, the user will find and connect with their Facebook friends during the on boarding process.
Facebook Users
Artsy Users
User would like a way to FOLLOW ALL Facebook friends on Artsy at once.
GET STARTED button indicates the end of on boarding process
1
1
2
2
Iteration of “Find Friends” page
Social media integration help Artsy users connect with more friends in their life From first design, the user couldn’t tell which tab was selected. We fixed it.
5. Design Iterations and User Testing
A call-to-action button to trigger user to start further connection.
1
1
2
2
A/B Testing of user interaction design
Which one is faster way to find an artist on this page?
Going up to the global navigation or a small button beneath the sub navigation? The button won, and users want to see the same button for favorite galleries page too.
One gray sentence to indicate there’s no content and hook users in to generate content.
5. Design Iterations and User Testing
1
2
1
2
Iteration of “Favorite Places” page
Users were expecting to see more informations about the gallery that they just started following. So we add contact information, amount of followers and map for future itinerary.
5. Design Iterations and User Testing
1
1
“Favorite People” > “Friends” “Shows” > “Events”
“Friend’s Events” > “Friend’s Activities” “My Shows” > “Favorite Shows”
“Account” > “Profile”
Through the whole process of user testing and iterations, I found terminology is a pain point that caused confusions that make the site not intuitive enough.
5. Design Iterations and User Testing
