3 min read
New Feature: 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.
It seemed like a straightforward project but it quickly became clear that the different content types and a flaw in the library itself were issues that we needed to tackle.
I was tasked with understanding this problem & creating the page that would allow users to view and report their usage.
Usability testing with a paper prototype
Audit of each content type & status options
• User Story
I, as a user, need to view and report on content that I have used in the library so that I can monitor my own work and report on usage to my superiors.
• Competitive Analysis
Competitive analysis was a quick, first step to see how other companies had approached a similar problem. I looked at Nexflix but also focused on software that focuses on education like Pluralsight and Schoox.
I did interviews to better understand the vision & user needs. The requirements were straightforward so I quickly built a low fidelity mockup to guide our team conversation. The design was based on design system specifications and similar pages in the system.
I quickly created wireframes to guide the conversation
A problem came to light during a collaboration session with product and development, I asked how usage would be tracked. How would it be counted. I needed to understand what would would trigger the "in progress" & "complete" statuses? The answer, "When a user clicks a card in the library." That answer revealed a serious flaw because the cards in the library gave very little information about the content, and there was no call-to-action on the cards. If a user was just curiously looking around, each click would count as “usage” and would fill this new tracking feature with useless data. This would happen if a user intended to "start" the resource or not. This flaw was magnified because some resource types went right to "complete" with only one click. Netflix and other applications have an intermediary page or modal that gives more information and a call-to-action. We were missing this step.
Cards in the library didn't have a call-to-action. Every click would count as "usage," filling the new tracking system.
• Audit of Content Types
The different content types added to the complexity. Videos were easy because they are "in progress" or "complete." But when is a file "in progress"? When is a link to a website "complete"? To understand this, I needed to do an audit of each content type & status. This helped guide our conversation in aligning the many resource types. This information was later applied to the "My Usage" page and to status bars.
• Validation & User Feedback
Before completing the assets, I put the designs through rounds of hallway testing (ie: I tested the design with a paper prototype) and design critiques in order to improve usability. After release, this feature went through iterative improvements based on customer feedback.
• A new initiative was immediately assigned to me in order to improve the accuracy of this tracking & reporting feature. “Cards” in the library needed a clear call-to-action, and users needed more information in order to make informed decisions before engaging with content.
• Assets Included
Low fidelity mockup of the page
Designs for modal warnings
Designs for exported pdfs & csvs
• Accessibility assets were included to guide and remind developers to build accessibility into the software that will meet WCAG 2.1 AA standards. It is recommended to provide guidance for tab order, accessible labels (developers must correctly associate labels with the right form control), and focus states (developers should be reminded to do this work).
Always give developers instructions for "set focus." Consider giving instructions for tab order.
To be accessible, form labels must be correctly associated with their form control.
Call out the different "focus states" to remind developers to do this work.
Completed page and iterations continued.