Improving the ski racing experience with Coachable

Apr 24, 2019 | 10 minutes read
Project Link: Invision Prototype

ROLE
UX Consultant

COMPANY
Coachable is a sports coaching platform. They help youth sports clubs to create thriving programs by improving athlete development, coach connection, and program transparency.

PROBLEM
Looking to validate their initial assumptions and figure out what type of product they should be building.

OUTCOME
Created an interactive prototype to show prospective buyers and delivered design components to make future updates.

How it started

Ben Weiler started Coachable with the idea that the ski racing experience could be improved for athletes, coaches and parents. Having spent his teenage years skiing and his university years coaching on the weekends, he had lots of great ideas to build what was lacking in the market based on these two facts.

  1. Athletes don’t know have a clear understanding of their skill development and how well they are progressing.

  2. Coaches don’t have the time and tools to deliver personalized athlete feedback.

Being an early stage company, the Coachable team had many good ideas and were looking for someone with product design experience to help them understand and design what the product could look like. Having completed discovery interviews with potential users, they had conceived a long list of features.

Coachable wanted someone to validate the research completed and create the initial user experience and interface design. I was ready for the challenge and eager to get involved.

Problem discovery within ski racing

As a product designer, most of my experience has been working with business productivity tools and designing interfaces for other technologists. This was my first time designing for a niche user base such as the ski racing community and I dived into the preliminary research they had done. I wanted to understand the friction spots and what are the frustrating parts of the coach’s day.

The team walked me through a typical day for coaches and young athletes so we could brainstorm the different touchpoints where Coachable could be used. I learned how busy it can get on the ski hill and that we would have to communicate with our users often to make sure we are helping rather than creating more busywork for coaches.

Synthesizing all the research that was completed, it made sense to group the different user needs together and figure out how to satisfy the most important ones. Starting with the long list of features when I started, we managed to simplify it into 3 main features to build first that would provide the most value to our users and provide a strong foundation for future development. We decided to leave out the dashboard for now as it doesn’t make sense creating a page with relevant and useful information until we have figured out what information the system would be capturing from athletes and coaches.

  1. Schedule Builder - Coaches use the resource library of drills to develop weekly practices that align with their annual plan and help the athletes learn the associated skills.
  2. Athlete Profile - using the data from the weekly practices, athletes would be able to see their skill development and personalized feedback collected through the season.
  3. Resource Library - a collection of skiing drills with video demonstrations to educate coaches/athletes on proper form and technique.

Brainstorming with the team on how to prioritize user needs

Mapping out the user flows

The schedule builder was the first workflow that I worked on as coaches would mainly spend their time creating weekly practice schedules.

Current situation
Many coaches are focused on spending their time with the athletes on the ski hill, they don’t spend much time in the office. Some will create a rough schedule ahead of time while others might just go through a standard set of drills that they are most familiar with.

Opportunity
By making it easier for coaches to create practice schedules ahead of time, athletes also benefit and can be more prepared for the weekend knowing which skills they will be working on. If coaches are recording all their drills into the system, Coachable can also help solve their second problem by recommending drills that bring variety in creating a more holistic ski racing program

Ryan, who works at Basecamp, has a cool technique that I used to map out the UI flows. When you are just starting to flesh out the details, drawing out visual diagrams over and over again can get time consuming when the main purpose is to understand user interactions with the system. Thanks to Ryan’s method, I quickly iterated through different flows and make changes on the fly.

Building the UI flow for athletes

Discovering constraints through sketching

Sketching is where your product starts coming alive. Taking the work flows that I had created, I started detailing what the user experience would. How should coaches interact with the schedule builder? What layout works best? How many drills to show on the screen at once?

This is also the part of the process where you understand what the edge cases are as you walk through the experience you designed and continually refine it based on missing information. We knew that we wanted to create a better way to make schedules that provides context to coaches. Allowing coaches to start with the previous schedule instead of a blank state gives that context. Having a drill details box with video content gives that context.

Schedule Builder

Athlete Profile

Improving the homepage

Transitioning all these paper sketches into digital wireframes, I gradually added more detail until I had a rough prototype to test with potential users. I’ve talked more extensively about the biggest pitfalls when it comes to user testing in my Strava post. I learned that preparation is key to successful user testing. Making sure all the hotspots are working properly, having the user tasks defined and the script written out go a long way to make the user testing go smoothly.

Testing it with different types of people (ski coaches, football coaches, sports administrators, etc.), I gained lots of meaningful feedback for the next version of the product. Some of the most constructive feedback I received was about the initial user experience when they first log in and what they see. Some of the questions that came out of testing were, what is meaningful enough to show as the homepage? Is it seeing past event summaries or upcoming events? How many events should be on the screen at once?

With this feedback, I added two new graphs for the skill breakdown and team scores. Coaches would be able to quickly scan the page and look at the information that’s relevant to them. I also focused on improving the layout to create a better visual hierarchy.

Old event summary page

New event summary page

Building a better schedule builder

A lot of thought had gone into the original design to support coaches in creating their practice schedules. I had created a suggestion list of drills that aligned with the season timeline and annual plan, a favorites tab to give them freedom and make it personalized and lastly the drill details to show instructions and video content of how to perform the drill.

A crucial piece of feedback really helped improve the schedule builder when one of the users had asked “How do I see the drill details for a suggested drill?” and I was stumped. My design did not accommodate for this use case and I felt a little ashamed for not thinking of this before. But that’s why designers need to get feedback from their users, to better understand and fulfill their specific needs.

The new design allows users to see drill details for any drill, even if it isn’t placed on the schedule. When thinking about other ways to give users more control, I also moved the search bar from schedule to the suggested/favourites area. With these changes, coaches can search for any drill, quickly identify whether it’s a suggested/favourites drill and easily add it to their schedule.

Old way of adding drills

New way of adding drills

Always being open to feedback

Throughout this project, I learned a lot about ski racing and what it means to understand users on a deeper level. Coaches are spending most of their time on the ski hill and they spend limited time with the athletes at the lodge, especially once the practice is over and parents are waiting in their cars ready to go home. This is where having a human-centered design process was very helpful for these initiatives where the main audience might not be technology-savvy.

Testing the product with different groups of people, we gathered lots of meaningful feedback. We were working with a few coaches early on and they understood the future product vision. Their advice and feedback was constructive to help shape the product through the various iterations. In contrast, testing it with coaches and athletes who had never heard of Coachable beforehand helped uncover holes and discover flaws that we hadn’t discovered before.

“Human-centered design is all about building a deep empathy with the people you’re designing for” -IDEO

Black and white to colour

Since the logo was already designed and used on marketing material, I used them as my primary colours and made the typical style tile you see on everyone’s dribble page; 2-4 colours to use and a few different font sizes for the text. I thought this would be enough until I read Steve’s article on how to actually make a usable color palette and that changed my whole perspective on visual design. You need multiple shades for every color and building out the full color palette prevents 10 different shades of grey being used in different screens.

Initial Style Tile

The full colour palette

Creating a consistent experience

From creating the different components and using them across the product, it is easy to start noticing inconsistencies in my design. A lot of small changes don’t make a difference alone but together, bring a unified experience for the user to enjoy. When an event is upcoming/live, coaches can still go into editing mode and make changes. Therefore, that transition from viewing a schedule to editing a schedule should remain consistent. I redesigned the upcoming/live event page to have the same layout as the schedule builder page.

Old Upcoming Event

Bringing it all together

After working on the Coachable for a few months, the team had a professional prototype of the coach and athlete experience. This gave them a visual aid to show potential clients/investors and help explain their story as they continue working on product development. And more importantly, a clear blueprint of what their product should do and how users will interact with it.

Walkthrough of an event by a coach (GIF)

Key Takeaways

Working on this project with the Coachable team has been an invaluable experience for me. I applied my skills at all parts of the design process and learned some new things along the way as well including data visualization principles and color theory. Here are my biggest takeaways

  1. Never underestimate the value of getting feedback at every stage. Your users will be your greatest asset to evaluating your design decisions and seeing what works.
  2. Don’t rely on the user’s to solve their own problem. Users can give great feedback but it’s ultimately your responsibility to come up with different ways to solve problems. You are the designer and you know the best decisions to make.
  3. Focus on value creation and the rest will fall in place. It’s very easy to lose focus and build a super app that does everything. It’s also easy to get stressed thinking about monetization, user management and all the other things that matter but aren’t focused on the core problem.
Ben Weiler, Founder of Coachable

  When we met Himesh, we did not know what to put in the 'about' section. We had some validation a digital sports journal could provide value worth paying for, but nothing to bank on. He helped develop and refine our UX process to find what coaches and athletes actually wanted and needed. Ultimately Himesh enabled us gain insights to build a valuable product.