Part 2 - This presentation builds from Part 1 (Science vs Art), and explores how context matters in order to create design focus, and how to apply your understanding of your brand, the ecosystem, and your target users.
11. 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.”
14. 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?
15. 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
16. 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
18. whoisPaulyting.com
MODEL THE CURRENT WORKFLOW
Sign Up
Landing Page
Sign Up
with Facebook
Sign Up
with Google
Email Sign Up
Sign In
with Facebook
Sign In
with Google
Sign In
Email Sign Up
Field Error
Welcome to VISR
Add Child
I already have
an account
Add Child FormBirth Date
Date Picker
Add Channels
Add Child
One Step Closer!
Adding Social
Media Accounts
<
Email InstructionsCopy InstructionsADVANCED: Manually
add social accounts
Child Profile Navigation
Alert: Sending Email
via mail program
Alert: Copied to
clipboard
Facebook
Email Already
Exists Error
Instagram
Twitter
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
Facebook
Instagram
Twitter
YouTube
KidsEmail.org
Forgot Password
Forgot Password
Reset Password
Reset Confirmation
If connected
19. 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
20. 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
Error
Error
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 fields
with real-time validation
Clear value proposition
Paypal option causes
an offsite redirect
Error
22. whoisPaulyting.com
MODEL NEW WORKFLOW WITH METRICS
Sign Up
Landing Page
Connect with
Facebook
Connect with
Google
Sign In
with Facebook
Sign In
with Google
Sign In
Demo Dashboard
Sign In
Add Child FormCancel
Next
Connect social
media 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 Up
Field Error
Add your
child’s account
I have usenamesGuide 1Guide 2
Get familiar with
social 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
26. 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