Triathlon Ready is a web app that helps beginner triathletes know how to train for their first triathlon. It creates a custom training plan adapted to athlete's fitness and skill level. It also adjusts its plan to stay relevant to your schedule and circumstances, based on training completion rate, injuries, and user-chosen black-out dates.
For this project, I am working with a former Program Manager from Microsoft. He handles most of the back-end development, as well as the overall product cycle. I have taken on the responsibilities of reimagining the user experience and visual/branding design, and will be the front-end web developer in implementing these designs as well. To help us with our design approach to the user experience, we met several times to discuss the design research strategy. You can see more of our design research work and process here.
Considering that this app is still in prototype mode, we wanted to keep the design simple and pared down, to reduce the workload and build time before launch. The landing page is a fairly straightforward vertical stack of elements: a headline, subtitle, a call-to-action, a short list of benefits and features (the order is important – always lead with the benefit to motivate further reading), and two striking hero images to sandwich the list. Another call-to-action was placed on the bottom for user convenience.
The header includes the company logo, full company name, and mobile hamburger menu. The logo, in its current version, is too complicated for a mobile header setting, and will require a simplification to make it more visible and striking at such a small size.
The hero images feature the open-water swimming event, as it is a unique aspect of the triathlon. We rejected the use of biking and running images, since we did not want viewers to be confused, even for a split-second, that the product was targeting the more popular cycling or foot races.
There was also significant discussion about the business model behind the app. In order for the app to have sustainable revenue, users would pay. We knew from experience, however, that people hesitate before paying for software until they have experienced it enough to know that it's useful. So we built a one-week trial into the experience.
After users click either of the two calls-to-action on the landing page, they are taken to a series of pages to set up their plan. For convenience, they will have the option to sign up with either of the two popular sign-up APIs from Google and Facebook, or, for those more privacy-conscious, sign up with their email. Another benefit of the Google sign up is that it will instantly link a user's account to her Google calendar, making the calendar sync feature (seen later) much more streamlined (with just a tap of a button). The sign-up process is only two pages, so we included two small, clear and filled dots on the bottom of the sign-up page to signal to the user that it's a simple process.
As is standard in many clean and visually simple forms, the prompts are located within the form fields, and grayed out, inviting input.
The next page in the signup form asks the user for the location and name of the triathlon, as well as which event they will be competing in. To make the form more intuitive to fill out, the prompts have been formatted in question form (and shortened for maximum simplicity and clarity) and are fleshed out with drop down menu options. As each field is selected, the next field is fleshed out with derivative options (e.g. "Half Moon Bay Triathlon" after selecting "United States - Southwest"). Originally, there were four questions ("What country is your race?" then "Which state?"), but many countries did not have states, so we simplified the fields by taking away the state field, and created more regional demarcations for the first question (e.g. "United States - Northwest" vs. simply "United States").
As for the fitness levels, we designed the app to have three levels for each category: beginner, intermediate, and advanced. We realized, however, that one person's "intermediate" is another person's "beginner." So, instead of simply using "beginner," "intermediate," and "advanced" as the options for the drop down menus, we came up with more qualitative, descriptive options: "I can run up to a few miles," "I can run a 10k," and "I can run a half-marathon."
After the user taps the button to "Generate Plan," they are taken to the next screen, where a larger version of the logo spins, to signal to the user that the plan is in the process of generating. After a few seconds, they will be led to their sample one-week plan.
One of the challenges of this project was trying to build a cohesive brand around three different physical activities: swimming, biking, and running. The environments between swimming and the other two sports are highly dissimilar, with drastically different color schemes. In order to preserve some level of cohesion between the three sports to build a harmonious brand, I chose several attributes to emphasize: (1) mostly monochromatic, (2) highly immersive (the emphasis is on the environs), and (3) the athletes pictured should be actively "in the zone." In these screenshots, you see the first non-water images in the app, featuring a lush, verdant rainforest with a runner en route. The background image changes depending on the exercise for the day, as the user taps on different days in each calendar (e.g. a day with a biking plan would feature a picture of a biker).
I experimented with several flat representations of the weekly and monthly calendar after being inspired by Google's material design framework. A few of my first iterations, however, matched the material design framework so closely that my app started to look indistinguishable from many similarly designed apps already out there. I also tried to make it look more authoritative and trustworthy by using more blacks, grays, creams, and whites, but it ended up looking too drab and bland for an exercise app. When I tried adding some bold, energetic colors, the result was a bit too colorful, like a rainbow-themed kid's app. I compromised with a mix of more stately whites, grays, and blacks, with a hint of color for buttons and signifiers. The background images also helped to add a more refined color palette to the canvas. Eventually, the design crystallized into its more distinctive current form, relying on images for the color and varying-levels-of-opaque flat designs on top.
The calendar designs applied many typical conventions, for ease of learnability. Tapping on a certain day of the calendar will bring up that day's training plan, just below. The daily tip is located just below that. We included the time duration of a day's total training plan to help users mentally and logistically prepare for the day. The tip is related to the exercise for the day and increases in difficulty as the training plan advances.
Due to the short, one-week nature of the sample plan, it was important to us that the sample plan truly mirrored the experience of the full plan in every way possible, except for the duration. We wanted the user to experience all the benefits of the adaptive, customized plan, so that he can make an informed decision on whether or not to purchase.
The third screenshot shows what happens when a user clicks the arrow buttons to arrive on week two. The added "x-shaped" opaque filters on top of the calendar symbolize restricted access in a kind, yet elegant, way. The user is then informed that he can upgrade his plan to view the training plans all the way up until race day.
Once a user upgrades to the full plan, she will be given access to all the weeks leading up to her race date. Whenever a user is looking at today's date or a past date, he can log whether he has completed a training. They can do this by tapping the other yellow triangular button ("I did it!") in the lower right-hand corner (this will also do a short, animated jig on page load). Once a user taps the button, it turns green, and a check mark appears in the phrase's place.
This helps inform the app's algorithm whether or not a user's plan needs to be adjusted, to stay relevant to his circumstances. Relevance, we determined, occurs when a plan is challenging yet doable. If a user falls off his plan, and the plan continues to recommend exercises that increase in difficulty, the user might find it impossible to catch up, and give up altogether. The algorithm helps us avoid that situation.
In the monthly view, the user can check her progress (the checked boxes signify completed training days). In either view, the user can look up any past or future date's training plan, for purposes of planning or memory recall.
In the account panel, users can opt in for texts for daily tips and daily training completion check-ins, though they can review tips and log training completions directly on the web app itself. A weekly email report will be sent to them regarding their progress, the next week's plan, and any plan adaptations that were made for injuries, training incompletes, or newly registered black-out dates.
On the plan settings page, users can switch up their event (say, they decided to do an Olympic Triathlon instead of an Ironman), or switch their fitness level (this is for those who may have accidentally chosen the wrong skill for them). In the preferences section, users can select different days they want off (for many events, the maximum number of black-out weekdays is two). This is great for those who don't exercise on certain days for religious reasons, or who have consistent, dominating plans on certain days. We included major holidays for those who really like to make time to celebrate. Injuries are a very common issue in monthslong, extreme training schemes, and so we included a section here for that. The algorithm will adapt the training plans to help certain parts of the body rest (such as more swimming and biking days when you have knee pain). Illnesses are noticeably absent from this menu, because if the user misses a few days due to illness, the algorithm will automatically adjust her training plan for her, without any extra adjustments on the user's part.
The next step for Triathlon Ready's development is implementing the user experience design through front-end and back-end development. After that, we will take the workable prototype out into the field, working with aspiring triathletes and coaches.