TrainerDay - Coach Jack Plan Builder

Sometimes animation above has some weird yellowish colors - in such cases please refresh the page [F5]

Today I want to show you a piece of TrainerDay's Web App I had the pleasure to reorganize and redesign. Here's a Coach Jack plan builder that allows you to create your own cycling plans. That page seems to be very simple but even here we've been strongly focusing both on the UX and the UI.

??? User's experience was really crucial here since we wanted to rebuild that page in such a way to let users see all three things possibly at once: Sliders, Chart on the right, and Final Cycling Plan. Similar results we've been planning to achieve also in a mobile resolution. That's why I decided to create a prototype in Figma to show the client how the scroll should work on smaller screens to maximize mobile usability.

?? When it comes to the UI, for the TrainerDay team extremely important was to make that builder as simple & friendly-looking as it's possible. That's why we decided to add some emojis, various colors and avoid standard radiobuttons and checkboxes, which from the UX point of view are extremely important but since the general UX was very strong, for the TrainerDay at that point UI was more important.

P.S

Of course I forgot to turn off the voice recording so you can listen to 14 secs of Pirates of the Caribbean played by Auckland Symphony Orchestra ??