3 min read

(Case Study)

Track & Report Usage 

"Beth is a thorough and effective gumshoe (detective)

within a design or product development team."

—Josh Smith, Manager

The Problem

The "Library" is similar to Netflix in that users can engage with content any time. But in addition to videos, the library offers courses, files, links, certifications & more. We needed to build a tracking and reporting feature to help users view and report on usage. This data would help users build toward promotions by showing professional development progress.

 

My Role

I was tasked with understanding this problem holistically & creating the page that would allow users to view and report their usage. Methodologies

 

Methodologies

  • User Stories

  • Competitive analysis

  • Audit of each content type & status options

  • Internal interviews

  • Workflows

  • Personas

  • User feedback

The Process

User Stories

  • I, as a special education teacher, need to accurately complete forms for my students in order to meet federally mandated requirements and deadlines.

  • I, as an administrator, need to monitor and ensure that teachers complete their work accurately and on time in order to stay in compliance with federal requirements and deadlines. 

System Audit

The alert system had dropdown menus with alerts next to student names. This was used to inform teachers about which forms needed attention. First, it was easy to see that this alert system over communicated. All alert types were available on each page of the app in three places. There was little visual higherarchy and alerts from form fields were mixed in with deadline warnings. Also, depending on where a user was in the system, sometimes, different data would show up in the dropdowns. This gave users an inconsistent, confusing experience.  

Audit Alert Types

Use UI Components Properly

Leverage Dashboards

Accessibility

Use the Correct UI Component

Interviews

I interviewed a developer to understand what triggered the alerts. It became apparent that on forms any unfinished field would be marked as an "error" and show up as an alert. So, if a user started a form, filled in one field, and went home for the night, all unfinished fields will be marked as "errors" and would flood the system.

In the next interviews, I needed to confirm how users applied this system. “Teachers use it to prioritize their work.” And, “It shows teachers what they need to do next.” And, "Administrators use the dashboard summary to see which teachers are falling behind in their work." All of this was a giant red flag. This flood of "errors" was screaming for attention while truly urgent deadlines were less visible. For example, if a teacher started a form that was due in two weeks but didn't finish the form right away, many alerts would appear in the alert system. This same teacher could have three forms that were due today, but these forms only had one empty field each. These three urgent forms would not visually stand out because they have fewer "errors." This alert system could actually cause users to prioritize work badly and miss critical deadlines. Deadlines are the highest priority.

 

Next, I spoke with the developer who had designed this system. Hesitantly, he confirmed that, "yes," the system was flawed.

Audit of "Alert Types"

The system had 15 alert types. I reorganized them into three categories that

would inform where the alerts could live in the system. Most alerts belong at

the "inline" level on a form. Removing them from the alert system would

declutter the UI and visually prioritize deadlines. 

Error Correction

Errors were visible in the alert system, but were not marked on the

actual forms themselves, where the error existed and needed to be fixed.

A user could link through to the form, but it was extremely difficult to find and

correct any error. Inline validation was needed. 

UI Inspection

Radio buttons were used incorrectly as they were not visually near each other.

It was difficult to see what the choices were. Additionally, forms did not employ

progressive disclosure. This created vast amounts of clutter on each form.

ALL options were visible to users. This increased the likelihood of user

error and slow input.

Using the right UI Component for the right job would ensure the accuracy of

data. There were many text fields that could leverage dropdowns or radio

buttons because there were specific answers. This change would improve the

accuracy of data and the speed of data entry for users.

Outcomes/Recommendations

• I won a recognition award for finding the fatal flaw! ($100 Amazon gift card).

• Recommendations

  1. Sunset the alert system.

  2. Leverage new dashboards to guide users in meeting deadlines.

  3. Visually left align UI components on forms. 

  4. Leverage inline validations.

  5. Use progressive disclosure by giving users a small choice, and then showing applicable fields. This would clear 80% of the noise on forms, and increase accuracy & speed.

  6. Mark required fields.

  7. When input data is predefined, don't use text fields. Instead, use radio buttons & dropdowns.

  8. Use UI components properly (ie radio buttons)

  9. Accessibility. Include icons and alt-text to avoid using color alone to convey meaning.

Beth Hart | 631.848.2975 | mbeth217@yahoo.com

©2020 by Beth Hart