Kudos Fit
Coach Dashboard UX Redesign, ~Nov 2018
Partial redesign of the coach-facing UX, known as the "Coach Dashboard" (CD). This iteration focused on making a more intuitive UX as we onboarded significantly more coaches (an order of magnitude, from single digits to dozens of coaches) and as such needed more streamlined onboarding and usage. This iteration was internally known as "Intuitive CD".
The Coach Dashboard was effectively a bespoke CRM & Admin Panel for managing clients' weekly schedules, reviewing comments & progress, and contacting them. Only the CEO and a few coaches knew how to use it well and knew the workflow it was built for. As this was an internal UI, I focused my time on UX changes and MVP features and functionality; I only made minor enhancements to the aesthetics of the UI in this iteration.
Similar to the client-facing UI/UX, also rewrote the entire coach-facing codebase from jQuery to React, v16 Hooks alpha, Fetch API, component-based CSS, etc. React was particularly useful here as there are many forms, fields, and interactions that can update multiple parts of the screen. Incremental and asynchronous updates were also necessary as the company scaled from dozens to hundreds of clients and could no longer quickly load a page with all clients.
Before
The primary confusion with the previous UI was that it was broken up into several sections, but it was not really clear where these sections were split up unless you had experience using it. The CEO also had specific names for the sections, but these names were not listed in the UI.
Todos were listed in the top bar in red, but this could only fit a few todos, the rest would be cut off.
Todos were listed in the top bar in red, but this could only fit a few todos, the rest would be cut off.
The list of clients in the sidebar is actually sorted by timezone (TZ), then alphabetical within a TZ, but this is not mentioned in the UI itself. The "*" asterisk also indicates that the client has not signed the waiver, but there is no legend explaining that either.
The coach filter and stages of client onboarding (which went through a free trial at the time, hence "non-paying") also did not exist before, these were things I was asked to add in quick fashion before doing a full refactor.
The coach filter and stages of client onboarding (which went through a free trial at the time, hence "non-paying") also did not exist before, these were things I was asked to add in quick fashion before doing a full refactor.
There was also little-to-no branding, other than it being on a Kudos subdomain.
Coach Dashboard - Client Info, Nutrition, Program, Calendar, and Weekly Schedule. Sidebar with client list per Coach. Top bar with todos per client.
Coach Dashboard - Client Calendar and Workout Snapshot
After
One of the primary differences in the UX is that each section has a name and outline. I used "cards" with drop shadows similar to flat design to create outlines for each section.
This was particularly important as new coaches had to learn how to use the Dashboard and were not familiar with what all the sections were or that parts of the UI were even split into sections.
This was particularly important as new coaches had to learn how to use the Dashboard and were not familiar with what all the sections were or that parts of the UI were even split into sections.
Additional changes include hiding the client's details and contact info behind a modal (as those are not a primary concern once a client is onboarded) and categorizing clients by their timezones to ensure coaches send timely messages and know the relative time differences.
Basically, the coaching workflow and prioritization that the CEO followed was more formalized into the UI now.
A minor UI change was made to the top bar to make it branded with the company logo and colors.
Coach Dashboard - Client Todos, Info, Nutrition, Program, Calendar, Schedule Builder, and Weekly Schedule. Sidebar with client list per Coach categorized by timezone.
Scrolling down a bit, there are some more changes that are more visible here. One is that the "To Do" list for each client now floats in the top left corner and is scrollable. It is much more readable compared to the previously limited space when it was hosted in the top bar.
Clicking any item on the list will also highlight it in the UI and automatically scroll to it so that it can easily be completed.
Clicking any item on the list will also highlight it in the UI and automatically scroll to it so that it can easily be completed.
Another significant change is the Schedule Builder. I wrote an optimization algorithm (first time using one in my decade-long career since college!) that helps with automatically generating a weekly schedule for a client, which was the single most time-consuming task for coaches. Given a few inputs such as days cardio, equipment, stage progression, recurring assignments (and exclusions from the top), and some predefined weights and domain knowledge (e.g. don't schedule two leg days in a row, prefer rest days in between, prefer mixing upper body and lower body or push / pull / legs, etc), a weekly schedule could be automatically created.
The efficiency increase this provided to coaches was massive! In the best case scenario, it reduced the amount of time a coach spent on creating weekly schedules by a full 80%. For instance, one of our coaches went from spending 8 hours on all his clients' weekly schedules to just 2 hours!
This was just an MVP, but for about ~60% of clients it could schedule everything automatically, for another ~30% there were some minor manual changes a coach would have to make, and for the last ~10% of power users the coach still had to manually create most of the schedule.
This type of massive coach efficiency improvement shows how a "freemium" tier could eventually be created with no coach and the client having to do more self-service, and paid tiers for having a coach in the loop motivating you and helping you with your goals.
This was also a pure optimization algorithm, but could be further improved with machine learning techniques on similar factors and existing data we had on all our clients.
This also shows a scalable business model where more automation creates efficiencies and higher profitability.
This was also a pure optimization algorithm, but could be further improved with machine learning techniques on similar factors and existing data we had on all our clients.
This also shows a scalable business model where more automation creates efficiencies and higher profitability.
Coach Dashboard - Floating Client Todos, Calendar, Schedule Builder with Auto Scheduler, and Weekly Schedule
When all todos for a client are completed, they are moved into the "No Attention Needed" section of the client list, which is by default collapsed. This way, a coach works through a gradually shrinking list, which is satisfying and motivating.
Coach Dashboard - Client Calendar and Workout Snapshot. Floating Todos list with highlighted sections of Calendar for todos.
You can see how this custom CRM / Coach Dashboard is used by coaches in the below Product Hunt Demo Video (also created by me):
Future Improvements
As this was an MVP iteration primarily focused on functionality and UX, there are certainly more iterations and changes that could be made.
One larger change I wanted to make was to make the sidebar collapsible and more Slack-like. Color it with the brand's blue background and white text and use Slack-like bold text instead of red colors to indicate todos. Could also have a number on the side, similar to Slack's unreads, indicating the number of todos for the client.
Potentially, if a coach has their own preferred workflow, they could create custom groupings like Slack has too. But that would really need detailed analysis to see if it would be worth the level of effort to implement.
Potentially, if a coach has their own preferred workflow, they could create custom groupings like Slack has too. But that would really need detailed analysis to see if it would be worth the level of effort to implement.
Another change that I had started getting requirements on was coach "auditability". As in, if the CEO or a Lead Coach was onboarding a new coach or checking their work or performance, there are some basic checks they would always perform. For instance, timely vs. untimely workout reviews, timely weekly schedules, average missed workouts, average number of weeks ahead that the calendar is scheduled for, etc.
These checks / indicators would be visible to the coach themselves too, to allow them to self-correct and improve with automated feedback from the UI, before a Lead Coach even steps in.
These checks / indicators would be visible to the coach themselves too, to allow them to self-correct and improve with automated feedback from the UI, before a Lead Coach even steps in.
The most significant change I had wanted to make was to build the messaging system into the dashboard as well. At the time, Front was used as a third-party app to message from a handful of phone numbers. Front had some restrictions and was not customizable, so there was little to no integration between the Coach Dashboard and Front, creating a fairly large and disorienting disruption to the UX workflow of coaching. Also, Front was the single largest operating expense other than compensation, so any savings here could be significant.
I had planned to integrate in-app messaging, which would have little-to-no overhead, as well as third-party APIs like Twilio, which would be much cheaper than Front. With messaging in the Dashboard, a coach could do all of their work from one place and not need to heavily context switch between entirely separate UI/UXs. There's also more automation that could be added with a built-in integration, such as pre-filling messages based on the context of the most recent schedule or workout. Coaches could also have hints / prompts in-line about topics they could mention based on recent context. Messaging would also become a todo that could be automatically checked when a message was sent.
More modalities, such as Facebook Messenger, Email, Instagram, etc could also be added to target different user demographics and preferences. Front had some of these built-in, but otherwise the company was entirely reliant on a third-party to build more modalities.
I had planned to integrate in-app messaging, which would have little-to-no overhead, as well as third-party APIs like Twilio, which would be much cheaper than Front. With messaging in the Dashboard, a coach could do all of their work from one place and not need to heavily context switch between entirely separate UI/UXs. There's also more automation that could be added with a built-in integration, such as pre-filling messages based on the context of the most recent schedule or workout. Coaches could also have hints / prompts in-line about topics they could mention based on recent context. Messaging would also become a todo that could be automatically checked when a message was sent.
More modalities, such as Facebook Messenger, Email, Instagram, etc could also be added to target different user demographics and preferences. Front had some of these built-in, but otherwise the company was entirely reliant on a third-party to build more modalities.
One can see, similarly to the Auto Scheduler, how better integrated messaging could lend itself to a fully automated "freemium" tier, as well as more accessible data with which machine learning models could be built from.
