Solving UX problems (part 2)
28
whoisPaulyting.com DESIGN BETTER: Solving UX problems (Part 2) with Pauly Ting
-
Upload
pauly-ting -
Category
Design
-
view
219 -
download
1
Transcript of Solving UX problems (part 2)
whoisPaulyting.com
DESIGN BETTER:
Solving UX problems (Part 2) with Pauly Ting
whoisPaulyting.com
My name is Pauly Ting
and I’m an experience designer.
whoisPaulyting.com
I’ve helped brands reveal their purpose, express their personality, and deliver a complete and authentic experience.
whoisPaulyting.com
PART 1:
Science vs Art
Doing Your Homework
whoisPaulyting.com
PART 1:
Science vs Art
Doing Your Homework
PART 2:
Reframing Context
Applying Your Homework
whoisPaulyting.com
#1:
Reframing Context
whoisPaulyting.com
SMART BRANDS:
Know thyself! Know thy
ecosystem!
Know thy users!
Know thy context!
whoisPaulyting.com
REVIEW AND PASTE IT
Know your brand! Know your
market!
Know your users!
Know your focus!
whoisPaulyting.com
REVIEW AND PASTE IT
Know your brand! Know your
market!
Know your users!
Know your focus!
whoisPaulyting.com
VISR
whoisPaulyting.com
HAVE A PROJECT THEME
“We need to design a way for parents who have
challenging relationships at times with their children to feel
reassured joining and configuring our app service as their
family support tool, and to feel more confident raising their
children into responsible young adults.
“We need to build the sign up page for parents.”
whoisPaulyting.com
Simplicity is the ultimate sophistication
– Leonardo Da Vinci
whoisPaulyting.com
KNOW YOUR FOCUS AREAS
InterfaceIntent Language
whoisPaulyting.com
INTENT
• What is the intent of the designed experience?
• What does it mean in the scheme of things for you / others?
• How/why/when could people care?
• What could make them care?
• How does this impact the user’s context or payoff?
• Where does this belong in a user’s workflow?
• What does a successful user workflow look like?
whoisPaulyting.com
• How does the user describe the problem experience?
• What language/words/phrases does the target use a lot?
• What is the simplest and shortest way to say your bit?
• Can things be said with visual affordances or hierarchy?
• What is the plain english, non-technical version?
• What is to be the tone of the designed experience?
• How does the user describe their desired emotional aftertaste?
LANGUAGE
whoisPaulyting.com
• What is the brand / product essence?
• What is the most important thing on the interface?
• What actions do you want the user to take?
• What actions must the user take?
• What feels familiar to them and what is new?
• Which elements are dependent vs independent?
• What is one thing you could remove and it would still work?
• What are the design guidelines for the brand?
INTERFACE
whoisPaulyting.com
#2:
Applying Your Homework
whoisPaulyting.com
MODEL THE CURRENT WORKFLOW
Sign UpLanding Page
Sign Upwith Facebook
Sign Upwith Google Email Sign Up
Sign Inwith Facebook
Sign Inwith Google
Sign In
Email Sign UpField Error
Welcome to VISR
Add Child
I already havean account
Add Child FormBirth Date
Date Picker
Add Channels
Add Child
One Step Closer!
Adding SocialMedia Accounts
<
Email InstructionsCopy InstructionsADVANCED: Manually add social accounts
Child Profile Navigation
Alert: Sending Email via mail program
Alert: Copied to clipboardFacebook
Email Already Exists Error
YouTube
KidsEmail.org
Remove from account
Alert: Are you sure you want to remove?
OK
Cancel
Edit Child ProfileChild Dashboard
+ Add Child
Child Name
Email with Link Link to authorize
Link to websiteAdd Channel
Authorize from here
Email with Link
Inbox
Connection View
Disconnect from profile
Reauthorize or + another
Link Expired Go to login page
Invalid Key
Authorization Error
Sign Up
Login
Facebook Sign In Google Sign In
Accept
Cancel
Sign In
Grant Permission
YouTube
KidsEmail.org
Forgot Password
Forgot Password
Reset Password
Reset Confirmation
If connected
whoisPaulyting.com
PULL YOUR CURRENT DESIGN APART
Sign Up ValidationSign Up Sign In
Unclear visual hierarchy. Buttons are competing
with another.
Busy design means high cognitive load
and long page time
The weight of Facebook and Google buttons dominate the login button
Read-about should be taken care of prior to the sign-up flow
whoisPaulyting.com
LOOK TO OTHERS SOLVING SIMILAR PROBLEMS
Referral
Direct
Home Page • Pricing • Description
Start Your Free Month Select Plan
• Plan name • Price • Features
Next
Social Sign Up
Sign Up • Email Address • Password
Next with CC
Next with Paypal
ErrorError
Payment Details • First Name • Last Name • Card Number • ZIP • Expiration Date • Expiration Year • Security Code • Terms Agreement
Start Membership Confirm Email
• Signup Confirm
Clear pricing, CTA,and no preview content
Multiple plan types with clear value proposition
Social sign-up or username/pass only
Single email and password request
No clear eye path or visual hierarchy
Horizontal form fieldswith real-time validation Clear value proposition Paypal option causes
an offsite redirect
Error
whoisPaulyting.com
MODEL NEW WORKFLOW WITH ‘VIEWS’
AND LOGICAL METRIC MARKERS
whoisPaulyting.com
MODEL NEW WORKFLOW WITH METRICS
Sign UpLanding Page
Connect with Facebook
Connect with Google
Sign Inwith Facebook
Sign Inwith Google Sign In
Demo Dashboard
Sign In
Add Child FormCancel
Next
Connect socialmedia accounts
Email Already Exists Error
Sign Up
Sign In
Facebook Sign In Google Sign In
Sign In Sign Up
Create Free AccountTerms of UsePrivacy Policy
Reset Confirmation
3 failed attempts
Reset Password
Email Sign UpField Error
Add your child’s account
I have usenamesGuide 1Guide 2 Get familiar withsocial media
Guide 3Setup a dialogue
I don’t want help
Connect with them Guide 4
Set a reminder
I don’t have usernames
Add social media accounts
Add Facebook
Add Twitter
Add Instagram
Add YouTube
Add Kids Email
Send an emailSend an SMS
Invite by emailInvite by SMS
Send SMS
SMS sent
Send email
Email sent
I’m done I’m done
Cancel Cancel
Account Sign In
OK
Not Now
I’m done
Add social media accounts
Onboard 1
Learn how to use VISR
Onboard 2
Continue Onboard 3
Continue
Onboard 4
Continue
Final Onboard
Help?
I’m done
Sign up
Metric Users who create a new account
Add child
Metric Users who add a child: • Do not authenticate an account • Did/did not read the guide
Connect
Metric User with a child who: • Invited by SMS/email • Failed to authenticate • Is having difficulty authenticating • Is waiting for account connection
whoisPaulyting.com
Sometimes, to make things clearer, you have to add a step
– Jason Fried
whoisPaulyting.com
PROTOTYPE THE NEW WORKFLOW (blurred for confidentiality)
whoisPaulyting.com
ITERATE INTO VISUAL DESIGN (blurred for confidentiality)
whoisPaulyting.com
EXPLAIN YOUR NEW DESIGN
Sign Up ValidationSign Up Sign In
Use icons for when form fields have
text in them
Prioritize sign-up over sign-in
Reduced the weight of Facebook/Google
Keep the brand header consistent and stable
T&Cs are accepted by default
whoisPaulyting.com
It takes a lot of hard work to make something simple
– Steve Jobs
