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

Slide 1

Slide 1 text

#SparkboxUnConf

Slide 2

Slide 2 text

#SparkboxUnConf Your Legacy Website Problem

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

Issue 1: Your navigation confuses users.

Slide 6

Slide 6 text

ISSUE 1: NAVIGATION plants.usda.gov/java

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

USABILITY TESTING EXAMPLE

Slide 9

Slide 9 text

TREE TESTING EXAMPLE Optimal Sort, Tree Testing Demo

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

HEAT MAPS EXAMPLE Hotjar recordings of sparkbox.com

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Issue 2: Your forms and fl ows confuse users.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ANALYTICS DROP OFF RATE EXAMPLE

Slide 17

Slide 17 text

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 .

Slide 18

Slide 18 text

Issue 3: Your general site content confuses users.

Slide 19

Slide 19 text

ISSUE 3: GENERAL SITE CONTENT sparkbox.com/team

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

USER PERSONA EXAMPLE

Slide 22

Slide 22 text

USER JOURNEY MAP EXAMPLE

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

UX TOOLKIT FLOWCHART RESOURCE Sparkbox UX Toolkit Flowchart ✨

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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