Auditing What Issues You Have (or Don't Have)

3 Common Legacy Site Issues and How to Address Them.

Transcript

1. #SparkboxUnConf
   

   View Slide

2. #SparkboxUnConf
   Your Legacy Website Problem
   

   View Slide

3. Auditing What Issues You
   Have (or Don't Have)
   Merani Cosme Frontend Designer
   3 Common Legacy Site Issues and
   How to Address Them
   

   View Slide

4. YOUR LEGACY WEBSITE PROBLEM
   Levels of E
   ff
   ort
   Low E
   ff
   ort
   (The information you want is
   accessible to you)
   Medium E
   ff
   ort
   (You could probably do this with some
   learning or research)
   High E
   ff
   ort
   (You need to do a lot of research and
   analysis on that research)
   

   View Slide

5. Issue 1:
   Your navigation
   confuses users.
   

   View Slide

6. ISSUE 1: NAVIGATION
   plants.usda.gov/java
   

   View Slide

7. YOUR LEGACY WEBSITE PROBLEM
   Navigation Research Methods
   Low E
   ff
   ort Medium E
   ff
   ort High E
   ff
   ort
   Analytics
   
   
   Published Research
   
   
   Heat Maps
   Usability Testing
   
   
   Tree Testing
   
   
   Card Sorting
   Competitive Research
   
   
   Screen Recordings
   

   View Slide

8. USABILITY TESTING EXAMPLE
   

   View Slide

9. TREE TESTING EXAMPLE
   Optimal Sort, Tree Testing Demo
   

   View Slide

10. CARD SORTING EXAMPLE
    Images by Spencer, Donna. Card Sorting: Designing Usable Categories. 2009. New York: Rosenfeld Media.
    

    View Slide

11. HEAT MAPS EXAMPLE
    Hotjar recordings of sparkbox.com
    

    View Slide

12. Keep in mind
    .
    Your site navigation should always be
    accessible and have a consistent path
    for the user to get back to the
    information they need.
    

    View Slide

13. Issue 2:
    Your forms and
    fl
    ows
    confuse users.
    

    View Slide

14. ISSUE 2: FORMS AND FLOWS
    sfmta.com/residential-parking-permit-application
    

    View Slide

15. YOUR LEGACY WEBSITE PROBLEM
    Forms and Flows Research Methods
    Low E
    ff
    ort Medium E
    ff
    ort High E
    ff
    ort
    Published Research
    
    
    Form Submissions
    
    
    Analytics
    Usability Testing
    Competitive Research
    
    
    Heuristic Evaluation
    

    View Slide

16. ANALYTICS DROP OFF RATE EXAMPLE
    

    View Slide

17. Forms should be simple and easy to
    use. They should give enough
    information to easily guide the user
    through the steps. Be sure to think
    about mobile users as well!
    Keep in mind
    .
    

    View Slide

18. Issue 3:
    Your general site content
    confuses users.
    

    View Slide

19. ISSUE 3: GENERAL SITE CONTENT
    sparkbox.com/team
    

    View Slide

20. YOUR LEGACY WEBSITE PROBLEM
    General Site Content Research Methods
    Low E
    ff
    ort Medium E
    ff
    ort High E
    ff
    ort
    Usability Testing
    
    
    User Persona
    
    
    Journey Mapping
    User Interviews
    
    
    Survey
    Site Audit
    
    
    Looking at customer service
    chat logs/website inquiries
    

    View Slide

21. USER PERSONA EXAMPLE
    

    View Slide

22. USER JOURNEY MAP EXAMPLE
    

    View Slide

23. Share important content and remove
    what is not necessary.
    Keep in mind
    .
    Concise content + clear design = great UX
    

    View Slide

24. ISSUE 1: NAVIGATION
    Tools & Resources
    How-To Books
    
    
    ‣ Resources: Rosenfeld Media, A Book
    Apart
    
    
    Usability Testing
    
    
    ‣ Resources: Optimal Workshop,
    Usertesting, Lookback, Usability Hub
    
    
    Analytics
    
    
    ‣ Resources: Google Analytics, Hotjar,
    Crazyegg
    
    
    User Interviews
    
    
    ‣ Resources: Userinterviews, Sparkbox
    UX Toolkit Flowchart
    Published Research
    
    
    ‣ Resources: Sparkbox Higher Ed
    Navigation Study, Neilsen Norman
    Group, Measuring U
    
    
    Heuristic Evaluation
    
    
    ‣ Resources: Neilsen Norman Group
    Usability Heuristics for Interface Design
    
    
    Site Audit
    
    
    ‣ Resources: How to Clean Up Your
    Content Mess, How to Audit Big
    Websites
    

    View Slide

25. UX TOOLKIT FLOWCHART RESOURCE
    Sparkbox UX Toolkit Flowchart ✨
    

    View Slide

26. HIGHER ED STUDY RESOURCE
    Sparkbox Higher Ed Navigation Study - Designing Mobile Navigation
    

    View Slide

27. MAIN TAKEAWAY
    You got this.
    You can use this as a guide to get
    started, remember to download
    these slides from the event page.
    

    View Slide