Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sparkbox
March 25, 2021

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

3 Common Legacy Site Issues and How to Address Them.

Sparkbox

March 25, 2021
Tweet

More Decks by Sparkbox

Other Decks in Design

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