Tag Management

A feature update for Lightspeed Analytics™, CatchOn Edition

 
 
 
 

The Project:

Lightspeed Analytics™ provides data analytics regarding application, device, and license usage as well as adherence to student data privacy laws.

Districts may create and apply their own tags to applications within Lightspeed Analytics. We heard from several customers that they either did not use the provided district tagging feature, or it did not offer them enough options in order to use it effectively.

With the goal of increasing ease of use of the product, we prioritized updating the tagging feature in order to directly comply with a customer request.

Project Roles: Product Designer

 

Process:

Work closely with the Project Manager to identify the personas who use tagging, write problem statements, investigate the current user flow, identify pain points, brainstorm solutions, sketch lo-fi wireframes, validate ideas by getting customer feedback, make a high-fidelity prototype, conduct more testing and iteration, and finally hand off Figma screens to development.

Below are some examples of the process.

 
 

Research:

We looked at other applications that use tagging to gather ideas for improvement. We also talked to customers about how they are currently, or would like to use tags to improve their workflow. We watched them try to add and edit tags during Zoom calls and witnessed their confusion and frustration.

We then examined the tagging flow from the customer point of view by walking through it, step-by-step, taking notes and screenshots along the way. Ideas for improvement came easily and were noted in a Miro board.

See example below:

 
 
 

With a solid grasp of the problem and the personas most effected, we wrote some problem statements to keep us focused.

 
 

As we worked and got even more familiar with this user flow, we discovered additional use cases we hadn’t initially considered.

 

I started sketching some lo-fidelity ideas in order to get initial feedback from stakeholders and to spur more solutions.

I thought a table listing all the current tags would provide an easy way for users to see all the tags they had created and edit or delete them as needed.

 

I made lo-fidelity mock-ups of each action available on the tag management page.

 

I did not want to take away any functionality so I made some screens showing the current tagging process then added some small improvements to make the current process more intuitive.

 

The Product Manager and I showed the initial mock-ups to a key customer to make sure we were on the right track. We got great feedback.

We then presented the designs to our team and the idea of allowing users to bulk apply tags from the tag management and applications library pages came up. It seemed like a great way to easily allow our users a lot more control over their tags. I mocked up an initial idea below:

 

Further discussions led to a new “Apply Tags” button above the table allowing multiple tags to be applied to multiple applications at once.

We considered combining two other types of tags into this table, but decided to start with this version, get feedback, then incorporate the other tags if users indicated that was their preference.

Here is the final lo-fidelity mock-up we agreed upon. Next step was moving to Figma!

Design:

The exciting part of moving these designs to Figma was being able to use our newly created CatchOn design library. Lightspeed Systems acquired CatchOn a few months previous and found they did not have a design library. Our UI designers created one and these were the first screens designed entirely with the new library.

This is the initial Figma high-fidelity mock-up of the new Tag Management page.

 

Here are the initial drafts of the mock-ups for each available action on the page. These screens are all currently in-progress.

 

Next Steps:

The high-fidelity screens in Figma are currently being refined in order to make a prototype that will be presented to a handful of customers for feedback. Iterations will be made based on their feedback. When the final version is agreed upon by all stakeholders, the file will be annotated in preparation for developer hand-off.