Scott and Verek of AthleteFit came to Headway to take their PDF-based training program to the next level. Working with today's athletes, Scott knew he needed a more modern and flexible approach. After speaking with many of his athletes, it was clear that they all desired a quality user experience for training on the go.
Headway and AthleteFIT worked together through an initial design and discovery workshop helping to uncover the shortcomings of the existing system, while also focusing on a vision for a more immersive and guided experience that could meet athletes where they were already seeking training advice, on their phones.
During the workshop we collaborated on technical requirements and challenges, talked through various player personas and workflows, and began roughing out some initial design concepts for a video based mobile app. This collaborative foundation carried through the entirety of the build, resulting in what numerous industry experts have called a “best in breed” mobile training app.
Scott’s core training system allows athletes to focus on their skillset on the pitch (soccer field). Using a self-assessed rating system, athletes choose a confidence score (in 1-4 stars) that reflects their current skill level. Each training module is a collection of video exercises that explains the finer details of the individual skill-based exercises.
As an athlete uses the app, they are consistently encouraged to come back and refine their skills and confidence rating. Encouraging users to revisit the app, by unlocking achievements and providing a sense of forward momentum through successfully completing prior modules, helps athletes progress more consistently.
We incorporated elements like a daily activity streak, a skills mastered tracker, and a current skill level indicator to encourage these repeated interactions and subconsciously push athletes to better their skills each day. If an athlete is struggling in a specific area, the provided supplemental workouts allow them to focus on the module’s core fundamentals while also breaking out of the routine of the existing workout track.
While the mobile app is all about the athletes, clubs and coaches are another critical component of the RISE platform. That’s why we created a back-end administrative portal giving clubs and coaches a window into the progress of their teams and players.
At the individual team level, coaches can see how their athletes are progressing on the core pyramid skills, create their own custom supplemental workouts, and generally manage their roster. Over time, we hope to show clubs and coaches a correlation between the teams and players more actively using the RISE platform, and their increased performance on the field.
Soccer is the fastest growing sport in the US, and it’s even bigger abroad. Scott knew he wanted to start with US based clubs and teams, but that he would also quickly want to expand overseas. Taking the global smartphone market share into account, it was clear that for RISE to be successful around the world, we’d need to launch on both the iOS and Android platforms. Before we started development, Scott’s question to us was whether we should build for iOS or Android first and what impact that decision would have on the timeline and budget of the project.
Rather than needing specialized engineering talent to build iOS apps in Swift or Objective-C and build Android apps in Kotlin or Java, Headway chose to invest in making React Native one of our core competencies. This technology, initially created by Facebook but now maintained by an open source community, is one of the fastest growing and universally accepted ways of building cross-platform and truly native apps.
Unlike older cross-platform solutions like PhoneGap or Cordova, building with React Native results in a fully native app-store installable app. It’s so good, users have no idea it isn’t written in Swift or Objective-C because the app that comes out the other end performs exactly they same way. After all, it is native!
Anytime you target more than one platform for launch, the investment in development is larger. However, with React Native we were able to effectively launch both an iOS and an Android app for a much smaller overall investment. We estimate that Scott saved over 50% of what it would have taken to build the iOS and Android apps independently. Updates and tweaks are faster, too! Using a cross-platform technology like React Native means updates to the core app functionality allow both platforms to receive the benefits of new features and bugfixes while only requiring a singular codebase to be updated.
Headway developers have a long history of launching apps to market using Ruby and Ruby on Rails dating back to 2006. In addition to mobile apps, Headway has been developing full-stack web applications for startups, entrepreneurs, and corporate innovators for years. Ruby on Rails or “Rails” as it’s often abbreviated continues to be on the cutting edge of web and back-end API technology, consistently releasing new features and security updates each year.
Not only are the tools great, but the community is huge. Taking advantage of hundreds of collections of micro bits of functionality packaged up and distributed as “gems”, Rails developers can quickly get from zero to functioning app in a matter of days and weeks, not months. We’ve taken that a step further and codified our favorite and most useful gems, along with some custom business logic that tends to get used across most of our apps, and created an app starter template called Voyage.
With Voyage as a starting point, it’s a matter of crafting workflows and business logic that serves each customer’s specific needs out of the gate instead of spending weeks or months setting up the underpinnings of a new project.
In the first meeting, it was clear that the entire team wanted the RISE product to fit into the modern sports landscape looking at home next to prominent and familiar brands like Nike, Adidas, Puma, and Under Armour, while also standing tall and taking on a life of its own.
With this desire in mind, we created a pallet of colors that played well off of each other using Onyx Slate and Kinetic Green as the foundation. We found that these colors communicated a bold sense of energy as well as the renewed spirit you have after mastering a new skill.
After fully understanding the product and the goal, the design team went through a series of exercises trying to capture the essence of the product in a logo and a name. Each element of the logo represents individual parts of the product accompanied by a name that embodies players moving up the skill pyramid.
For the logo, we wanted something iconic yet familiar. The foundation of the logo is the shield. It’s is a common shape in the lexicon of soccer design, and we wanted to anchor the brand to where it started, as a soccer program. The star draws focus but in a subtle and complementary way and marks the confidence athletes will have after they go through the program rating themselves along the way. Finally, the arrow sloping upward along the edge of the pyramid represents the player’s progress over time.
These three elements in the logo combine to evoke a sense of accomplishment and loyalty as users open the app daily. Couple that with the literal upward progress athletes make while climbing the pyramid, and the RISE name was born.
As a team, we knew it was critical for the athletes to feel like they were progressing upward while developing new and existing skills. That was the motivation for showcasing a counter of "skills mastered" that increases as each pyramid module is completed.
As a player gains confidence and moves through a module, they will pass through three phases. Each phase increases the difficulty of the workout and introduces more complicated skills. Once that skill is mastered, players move on to the next module until they reach the coveted elite status.
Communicating growth is a very important aspect of RISE. Not only is it shown through the pyramid, but it’s also displayed prominently as circular progress meters on the dashboard within three categories: skill, speed, and power.
After all the hard work each athlete puts into developing every new skill, it was important to reward that in an exciting way. Continuing the notion of progress and movement, we created an achievement screen that congratulates athletes as they complete individual phases and entire modules.
This animation concept is a way we plan on celebrating accomplishments in the future. Couple this with the current gamification elements that help provide real time feedback on an athlete’s personal growth, and it really helps incentivize continued skill development.
The RISE team and Headway collaborated actively from project kick-off, to assumption mapping, initial design sketches, logo creation, and feature development. From day one, both teams were working together to try to build the best possible product. This active and enthusiastic collaboration was key to the successful launch of RISE and is a tenant of any successful Headway project launch. Below are some action shots from that process.
Hire a team that cares as much as you do.Get a Free Consultation