Coachable is a sports coaching platform. They help youth sports clubs to create thriving programs by improving athlete development, coach connection, and program transparency.
Looking to validate their initial assumptions and figure out what type of product they should be building.
Created an interactive prototype to show prospective buyers and delivered design components to make future updates.
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.
Athletes don’t know have a clear understanding of their skill development and how well they are progressing.
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.
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.
The schedule builder was the first workflow that I worked on as coaches would mainly spend their time creating weekly practice schedules.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.