Kudos Fit
Main Training UI/UX Redesign, ~Oct 2018
Redesigned the entire client-facing UI/UX, known as "Train". This was now the third version, hence "v3".
Also rewrote the entire codebase from jQuery to React, v16 Hooks alpha, Fetch API, component-based CSS, etc.
Summary
Demo Video
Created our Product Hunt Demo Video with Quicktime for recording iOS and iMovie for editing. Lots of creative cuts and fast forwarding here to make it short and to the point. Kudos if you notice some of the jump cuts 😉
Product Hunt Demo Video - Full Client experience from Message to Workout to Share and back.
Before -> After
Details
Train v3 - After
There is now a sidebar to navigate between different Exercises ("jump to" different places in the Workout). The Workout remembers where you left off if you did not finish it and there is a progress bar at the top too.
Italics, indentation, and font sizes are used instead of too many colors.
Certain things were renamed to be more descriptive, such as adding "for" and "on" to the subheadings, highlighting that your Coach designed this Workout specifically for you and for this date. The "Submit" button was changed to "Finish" and was also made green instead of red as completing the Workout is a good thing.
Notes from your Coach now show a small photo of them and are designed as a text bubble, rather than just plain text (which made it seem like the text was part of the UI and not custom input by your Coach).
Workout - Agenda
Each Exercise now takes up the entire screen, instead of just part of one. This reflects the real behaviors of clients, where they focus on one Exercise at a time.
The GIF is now the largest item on the screen, properly making you focus on how to do the Exercise. There is also a video icon if you want to see the Exercise in more detail.
The GIF is now the largest item on the screen, properly making you focus on how to do the Exercise. There is also a video icon if you want to see the Exercise in more detail.
Circuits are automatically repeated for you and are shown as a subheader.
Reps and sets are clearly defined and explained intuitively in the UI as well. Weight, tempo, and time are clearly shown as well. There is even a sub-timer for any timed Exercises.
Your Coach's notes for the Exercise are highlighted in a text bubble with their photo, similar to the Agenda.
As an Exercise takes up the full screen, there is now a bottom menu always present your options for the Exercise. Drop shadows are used to indicate depths/layers. The buttons there are significantly larger, which was well appreciated by older clients.
Workout - Exercise - Bottom Menu with Words and no Icons
Buttons and icons specifically were A/B tested, as different client demographics had different preferences. For instance, older clients preferred larger buttons and pure text, whereas younger clients preferred icons. Ultimately, we ended up with text in some places, icons in others, and both in others.
All buttons also had a minimum size to ensure they could be accurately touched by all users. Some buttons may seem small, like the "Start" sub-timer, but the entire time is actually touchable, so that a client does not have to be very accurate with their thumb.
Workout - Exercise - Bottom Menu with Words and no Icons
The sidebar allows you to navigate between Exercises. This is particularly helpful when previewing the Exercise or re-visiting it. Circuits and other Exercise Groups (such as Warm Up and Cool Down) are by default collapsed and can be opened up.
Workout - Sidebar Menu
As the workout is loading, there is an animated loading screen, which lasts a maximum of a few seconds, mainly if the Serverless infrastructure was scaling up. The outline of the screen is the same, so the entire page does not flash when the data is available and renders. Further improvement would be to also show an outline of the Agenda or Exercise, depending on where the client left off.
The code was rewritten to be significantly more efficient, so this loading screen was rarely necessary. All N+1 queries were fixed to a single query with proper joins. Filters were properly used from the beginning as well -- previously filters were only added a few queries in, meaning the first few queries would return very large datasets.
On top of that, the API was rewritten to allow the Workout to be incrementally rendered, which fit the new UI/UX where each Exercise has its own page and it is not all on one page. Some minor schema changes were made as well. Accordingly, the data for the Agenda screen would be retrieved first, including its outline of the entire Workout. Then, the Exercises for the Workout could be loaded afterward and without duplicating the outline data.
As the front-end was rewritten in stateful React (over stateless jQuery), the rendering was considerably optimized as well, as only certain components would partially re-render when the data changed (e.g. if a client edited the sets or reps). As the Hooks alpha was used, everything was also functional components with heavy memoization. Suspense (unofficial at the time) also made the loading code simpler!
localStorage was also used to cache the Workout in the browser, creating an "offline mode" that clients could use, which was particularly useful for clients whose gyms had poor signal (which occurs with some frequency).
Workout - Loading
Train v2 - Before
The previous design was heavily text-based with little to no icons, focus on plain text instead of more visually appealing images, and limited text design: mostly same indentation, same font size, same font style, etc. Text color was instead often used to differentiate, which made for too many distracting colors on the screen.
Some buttons were very large, taking up a large portion of screen real estate, while others were too small. It also used absolute sizing instead of relative, meaning that it was primarily designed for larger phone screens. For clients with smaller phones, large buttons could take up 1/3 of their screen.
Workout - Agenda Screen - Completed
Exercises had to be manually filled in with how many reps and sets were done. Circuits had to be manually repeated by the user.
A little too much going on with colors, such as blue highlights, gray background, underlines, blue text, etc.
The two column view also made the Exercise GIF very tiny. Instead of focusing on how to do the exercise / what exercise to do by having the GIF take up more space, equal space was allotted to reps and the GIF. Multiple Exercises visible also gave more details than necessary, instead of focusing on one Exercise and having that take up most of the screen.
Workout - Circuit - Preview
Workout - Exercise - Started
Here is a full page screenshot of the previous design. Note that it was all scroll-based instead of swipe/button-based.
The previous design made it easy to lose track of your place in the Workout and easy to accidentally mis-scroll during the Workout (in your hand or pocket). Each Exercise was also a different height, adding to the confusion. The only way to navigate was by scrolling, with no way to jump between Exercises, reorder, etc. The Workout did not know what Exercise you left off at if you stopped in the middle (accidentally or intentionally).
On top of that, the buttons were too small, especially for older clients.
Workout - Full Page Screenshot (all on one page before)
When the Workout was loading, a plain blank screen would be shown (I believe I even added the "Loading..." text quickly after being hired and before doing the full redesign). This would then transition into the full page view above with no animation, causing a flash (as in "flash of unstyled content" / FoUC).
The plain blank screen could be there for at times minutes. This was very confusing to clients, especially older age groups.
The code was very inefficient, loading the entire page at once and using multiple, inefficient queries, with the classic "N+1 query" issue, and lacking significant filtering. The N+1 queries were also done without transactions, with the lack of atomicity potentially causing inconsistencies between queries. Lack of filtering meant significantly more data was retrieved from the DB than necessary, and also meant data was often duplicated several times as well. It even had a SQL Injection vector too!
It also ran on Serverless infrastructure, scaling to 0, so sometimes there would also be a warm-up phase if the servers needed to scale up.
Due to these stacked inefficiencies, a multi-minute wait was necessary. So even adding "Loading..." made this a significantly better UX than just a plain blank page, which often confused clients.
It also ran on Serverless infrastructure, scaling to 0, so sometimes there would also be a warm-up phase if the servers needed to scale up.
Due to these stacked inefficiencies, a multi-minute wait was necessary. So even adding "Loading..." made this a significantly better UX than just a plain blank page, which often confused clients.
Workout - Loading
