Check & Connect Website

Trainer tracker web app analysis and redesign

The Trainer Tracker software, used by the national trainers at Check & Connect, was recently developed and implemented into the Check & Connect process about a month before our redesign. As a growing non-profit, having functional software to manage the continual training of their local trainers working with Check & Connect is imperative.

The User:

The users of the Trainer Tracker software were the five national trainers in charge of monitoring and instructing the many local trainers in their respective regions of the United States. For all the users, this software was replacing numerous spreadsheets or other attempts to maintain these records.

Challenge

Our team was asked to evaluate and observed the software being used in its typical context by the national trainers, and then provide suggestions for design and functionality improvements based on the usability of the software and the national trainer’s needs.

Solution

We derived the solution for the Check & Connect web app from discovering the pain points and opportunity areas through research. We improved how the users filter results in the table, made it easier for them to select and edit trainer details, and added a way for them to easily email trainers directly within the app.

Role and Tasks:

We worked together as a team of 8 on various phases of this project. However, much of the work was completed individually. My tasks included completing a cognitive walkthrough of the trainer tracker web app. Next, as a team, we developed our research plan and script before going to perform our contextual inquiry. Afterwards, we synthesized and diagrammed the data. With these results I was responsible for wireframing suggested modifications to the web app and, when approved, converted them to high-fidelity static prototypes in Sketch. Lastly, I was responsible for putting together an interactive prototype tour in InVision demonstrating the changes made to the app.

Next Steps:

The next steps necessary on the project are usability testing and further redesign of the admin account. I would like to see how the national trainers respond to the proposed changes and if the web app has improved in usability.

Project Takeaways:

One of the challenges I faced on this project was synthesizing our data after the contextual inquiry. The quantity of data was not unmanageable, but the time given to work through the data and to gather insights was relatively short. This made making design decisions difficult at first. Designing the high-fidelity static prototype was extremely enjoyable. Sketch is a fantastic tool and redesigning a web app is an exciting challenge.

Cognitive Walkthrough

Because the Trainer Tracker software is actively being used to manage local trainers, our team was unable to gain sandbox access to interact with the software. Rather, we were provided with videos and screenshots of the software and received a thorough explanation of its functionality. I constructed a cognitive walkthrough, in order to understand where improvements should be made, where I noted each action taken for the tasks that the user wanted to execute. These actions were recorded in a report and critiqued against four design principles: mental model, mapping/consistency, visibility/hierarchy, and feedback.

Cognitive Walkthrough

Because the Trainer Tracker software is actively being used to manage local trainers, our team was unable to gain sandbox access to interact with the software. Rather, we were provided with videos and screenshots of the software and received a thorough explanation of its functionality. I constructed a cognitive walkthrough, in order to understand where improvements should be made, where I noted each action taken for the tasks that the user wanted to execute. These actions were recorded in a report and critiqued against four design principles: mental model, mapping/consistency, visibility/hierarchy, and feedback.

View Report

Research Goal Notes & Script

The cognitive walkthrough report helped the team begin thinking about what our research goals should be. We collaborated together to develop six goals, consisting of both high-level goals (user values and priorities) and low-level goals (user pain points and preferences using the software).

Goals: 1. Gain a deeper understanding of the national trainer role and their values and priorities. 2. Gain an understanding around institutional frameworks and processes that impact user workflow or tool usage. 3. Better understand how the tool fits into the national trainer task workflow and if there are any dependencies or constraints associated with this tool, such as before or after using it. 4. Learn more about common usage patterns and pain points, including if there are any workarounds users implement to bypass pain points. 5. Better understand the degree to which the interface language matches user expectations. 6. Better understand the hierarchy of data in the tool and how data is used outside of the tool.

We compiled the goals into a script which we used for our contextual research sessions with the national trainers.

Contextual Research

With our script ready, the team went to the offices where the Check & Connect national training staff work to conduct four contextual inquires. We spent 40 minutes with each trainer and observed them using the software, working in their usual environment, and listening to them discuss their work.

Each trainer had differing experience with the software, but no one had worked on it for very long. We gathered notes during the inquiry, videos, and audio recordings to help us while synthesizing our data.

Synthesizing The Findings

These inquiries proved very useful for our team when we began to divide up the data into categories. We first noted the significant findings on sticky notes and placed them on the wall under the respective user’s name. We then clustered the findings by type using an affinity diagram method. This resulted in our being able to quickly see where the significant areas of concern were.

After synthesizing our data, I constructed a Findings and Plan report to document our insights and to articulate the areas of concern we intended to address.

View Findings Report

Low Fidelity-Wireframing

Using the goals from the Findings and Plan report, I began to sketch the changes into wireframes. Beginning with low-fidelity and website architecture sketches, I laid out the plan for our higher-fidelity wireframes to be drawn in Sketch. These sketches followed a scenario which the team wrote up from their observations during the contextual inquiry.

High-Fidelity Wireframes

Using the hand drawn wireframes, I began to design a prototype in Sketch. This prototype followed the same scenarios I had previously constructed to walk the user through a commonly executed task, while addressing concerns our team observed along the way. Twenty-six pages later, I imported our Sketch files into InVision to design an interactive prototype.

View Prototype View Before/After

InVision Prototype Tour

After uploading all the Sketch files into InVision, I connected each screen together to construct the scenario walk through I had designed. After this was complete I placed tour points on each page to guide the client through our prototype so they would be able to follow the scenario and understand how I attempted to address the concerns our team found in the cognitive walkthrough and contextual analysis.

Presentation and Client Handoff Meeting

While the prototypes were being finalized, myself and another team member created the script and presentation slides for our final presentation and client handoff meeting. The team presented our process, findings, and prototype to Prime instructors, students, and visitors.

Afterwards, we met with the client to hand off our deliverables and answer any questions they had.

View Prototype Tour

Methods

Cognitive Walkthrough • Research Plan • Contextual Inquiry • Research Synthesis • Affinity Diagramming • Wireframing • Static Prototype • Interactive Prototype Tour

Tools

Keynote • Google Sheets • Audio/Video Recording • Sticky Notes • Pencil/Paper • Sketch • InVision