3 min read
Track & Report Usage
"Beth is a thorough and effective gumshoe (detective)
within a design or product development team."
—Josh Smith, Manager
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.
I was tasked with understanding this problem holistically & creating the page that would allow users to view and report their usage. Methodologies
Audit of each content type & status options
• 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
Use the Correct UI Component
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.
• I won a recognition award for finding the fatal flaw! ($100 Amazon gift card).
Sunset the alert system.
Leverage new dashboards to guide users in meeting deadlines.
Visually left align UI components on forms.
Leverage inline validations.
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.
Mark required fields.
When input data is predefined, don't use text fields. Instead, use radio buttons & dropdowns.
Use UI components properly (ie radio buttons)
Accessibility. Include icons and alt-text to avoid using color alone to convey meaning.