Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Solving UX problems (part 2)


Published on

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.

Published in: Design
  • Be the first to comment

Solving UX problems (part 2)

  1. 1. DESIGN BETTER: Solving UX problems (Part 2) with Pauly Ting
  2. 2. My name is Pauly Ting and I’m an experience designer.
  3. 3. I’ve helped brands reveal their purpose, express their personality, and deliver a complete and authentic experience.
  4. 4. PART 1: Science vs Art Doing Your Homework
  5. 5. PART 1: Science vs Art Doing Your Homework PART 2: Reframing Context Applying Your Homework
  6. 6. #1: Reframing Context
  7. 7. SMART BRANDS: Know thyself! Know thy ecosystem! Know thy users! Know thy context!
  8. 8. REVIEW AND PASTE IT Know your brand! Know your market! Know your users! Know your focus!
  9. 9. REVIEW AND PASTE IT Know your brand! Know your market! Know your users! Know your focus!
  10. 10. VISR
  11. 11. 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.”
  12. 12. Simplicity is the ultimate sophistication – Leonardo Da Vinci
  13. 13. KNOW YOUR FOCUS AREAS InterfaceIntent Language
  14. 14. 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. 15. • 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. 16. • 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
  17. 17. #2: Applying Your Homework
  18. 18. 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 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 Forgot Password Forgot Password Reset Password Reset Confirmation If connected
  19. 19. 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. 20. 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. 22. 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
  23. 23. Sometimes, to make things clearer, you have to add a step – Jason Fried
  24. 24. PROTOTYPE THE NEW WORKFLOW (blurred for confidentiality)
  25. 25. ITERATE INTO VISUAL DESIGN (blurred for confidentiality)
  26. 26. 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
  27. 27. It takes a lot of hard work to make something simple – Steve Jobs
  28. 28. THANK YOU! CATCH ME: @paulyting