Don't just build Pretty Websites! UX in the Real World

WordCamp Philly 2014
Everybody’s talking about User Experience, but how can you release your inner UX mojo today to improve the usability and experience of your website? Time to share some practical, real-world examples and tips to boost your WordPress design skills. Don’t just build pretty websites, make smart design decisions and add UX best practices to your workflow. Ask smart questions like: Do I really need a large slider on my homepage? Are there clear nav menus and Calls-to-Action to guide my visitors? How does my site displays on other devices? A good UX job continues after launch. Use mad tools to analyze and improve your UX Design.

Transcript

1. WordCamp Philly 2014
   Don’t just build
   Pretty Websites
   ~ UX in the Real World ~
   by Sonja Leix
   

   View Slide

2. Who am I?
   Sonja Leix
   New York based
   WordPress Front-End Designer
   Freelance
   Twitter: @sonjanyc
   www: sonjaleix.com
   

   View Slide

3. What is UX?
   

   View Slide

4. noun
   the overall experience of a person using a product such as a
   website or computer application, especially in terms of how easy
   or pleasing it is to use.
   "if a website degrades the user experience too much, people will
   simply stay away"
   us·er ex·pe·ri·ence
   

   View Slide

5. –Steve Jobs
   “Design is not just what it looks like and
   feels like. Design is how it works.”
   

   View Slide

6. Users & Goals
   

   View Slide

7. What is the purpose or
   goal of your website?
   Is the message consistent?
   

   View Slide

8. –Jakob Nielsen
   “Usability rules the Web. Simply stated, 

   if the customer can’t find a product, 

   then he or she will not buy it.”
   

   View Slide

9. Do you know your
   users?
   What is your target audience?
   

   View Slide

10. WHO are the users?
    WHAT are the activities they wish to perform?
    WHY do they want to use/buy our product?
    HOW does your product/service fit the context of their life?
    Create Personas
    

    View Slide

11. Let’s call this (very simple) example persona: 

    Tech-Unsavvy Customer Support’s Worst Nightmare
    - He is not good with computers and very impatient
    - He prefers to talk to a real person when he has questions or a
    problem instead of doing research himself online
    We need to make our website very easy to use and navigate for
    him. Provide: effective CTAs, FAQs, user-friendly support forums
    and if all else fails a number or email to reach customer support.
    

    View Slide

12. –Paul Boag
    “Users are not always logical, at least 

    not on the surface.To be a great designer
    you need to look a little deeper into 

    how people think and act.”
    

    View Slide

13. Your client is often not 

    your target audience!
    Design for the User!
    

    View Slide

14. Where do your
    users come from?
    Direct?
    Referrals?
    Social Media?
    Search?
    

    View Slide

15. Where do your
    users land?
    Most likely not always on your homepage.
    

    View Slide

16. How do your users
    interact with your site?
    Analyse existing site
    or
    make assumptions for new sites
    

    View Slide

17. Layout & Structure
    

    View Slide

18. Do you always use the
    same layout structure?
    Content / Sidebar
    Full-Width
    

    View Slide

19. View Slide

20. View Slide

21. Guide your users!
    Provide useful, simplified navigation menus.
    

    View Slide

22. View Slide

23. CTAs!
    Add effective Calls to Action to convert 

    and guide users!
    

    View Slide

24. What the Fold?
    Place important information and CTAs 

    higher up on page!
    

    View Slide

25. View Slide

26. Sliders?!
    Are your clients still asking for these 

    for every project, too?
    

    View Slide

27. View Slide

28. Responsive
    Design, duh!
    for best User Experience across all devices
    

    View Slide

29. View Slide

30. Beyond the
    Coat of Paint
    

    View Slide

31. Site Speed
    Usability also depends on how fast your site is!
    

    View Slide

32. Cross-Browser
    Compatibility
    Remember that day you put IE 7 to rest?!
    

    View Slide

33. Accessibility
    Supports social inclusion for people
    with a diverse range of hearing, movement, sight, 

    and cognitive ability.
    http://make.wordpress.org/accessibility/useful-tools/
    

    View Slide

34. –Tim Berners-Lee
    “The power of the Web is in it’s universality.
    Access by everyone regardless of disability
    is an essential aspect.”
    

    View Slide

35. You’ve launched!
    

    View Slide

36. View Slide

37. Time to relax?
    

    View Slide

38. Uhm?! NOPE!
    

    View Slide

39. After Launch:
    Analyse!
    Review your assumptions!
    Get user feedback!
    Iterate!
    …
    

    View Slide

40. –Alan Lewis
    “Failure comes when you don’t listen. 

    You can’t put something out there and
    assume it’s great. It’s up to us to make sure
    we’re listening to improve our chances 

    for success—if not this time, next time.”
    

    View Slide

41. Analytics Tools
    Google Analytics
    Kissmetrics
    Crazyegg
    

    View Slide

42. Google Analytics
    User Data
    

    View Slide

43. Google Analytics
    User and Behavior Flows
    

    View Slide

44. Google Analytics
    In-Page Analytics
    

    View Slide

45. Question Everything!
    Iterate Often!
    

    View Slide

46. 5 Key UX Questions 

    to ask before (and while)
    designing any website
    http://bit.ly/5UXQuestions
    

    View Slide

47. Thank You!
    Questions?
    Sonja Leix
    Follow me: @sonjaleix
    sonjaleix.com
    

    View Slide