We designed and built a new fitness mobile app focusing on sport-specific Mobility. This project involved many different integrations and technologies, including streaming, integration with sales and customer accounts and large content databases.
The Mobility Manual is an industry-leading mobility programme by the Olympic weightlifter Sonny Webster. What makes the Mobility Manual unique is its focus on sport-specific Mobility. Having already built a successful programme using a web platform, they wanted to create a mobile app offering improved user experience and more features.
The Mobility Manual already existed as a successful online programme. Still, the Mobility Manual team wanted to create a companion mobile app that allows users to access and use the Manual wherever they are. The ultimate goal is to create an industry-leading mobility program to target mobility under load that can help anyone, no matter their skill level, build their performance, enhance recovery and increase conﬁdence.
Some of the key points that were important to consider were:
- Community - keep the existing community feel built up by the Manual.
- Engagement - encourage regular training through gamification and make sure the app is fun to use.
- Quality - high-quality images, video & content.
- Coaching - the app needs to be upfront and honest, with a no-bullshit approach and simple explanations on why and how.
- Progress - see how far you have come.
Building a mobile app is complex. Even the simplest Apps require careful planning and consideration. For this reason, we believe that the design phase is the most crucial part of the project as this defines the scope, creates a clear technical path, and produces functional documents, including wireframes, guidelines, and App mockups.
During the design phase, we had regular reviews with the Mobility Manual Team, listening to feedback and comments and incorporating these into the design until we have a complete vision that fits the brief and is achievable for the initial release.
To kick off the project, we had a design workshop. The goal of this workshop was to uncover insights & ideas for what we want the app to do, be prepared to start wireframing, write up the first draft of the technical specification and discover some key audience types.
Some of the things we talked about included:
- Build an understanding of why we are creating the app and what goals we want it to achieve.
- Clarify what we will accomplish with this project's design phase so everyone's expectations are aligned.
- Research competitors & break down what is good and bad about their offerings. And, crucially, what is missing.
- Define the audience and develop some simple personas that can help us make decisions regarding design questions.
- Brainstorm ideas to get everything on the table and find the key concepts to include in version one.
- Explore the look and feel and gain an understanding of the kind of visuals we are aiming for.
Wireframes are rough interface layout diagrams representing functional requirements and how the app is structured.
We quickly experimented with different layouts through wireframing, leading us to a modern vertical design and navigation. We also set up flow maps to show how users would enter the app and receive their free trial before signing up for the Manual. Once the wireframes were complete, we had a comprehensive app structure detailing the interactions on every page.
Mockups are "pixel-perfect" designs that represent how the app will look and feel.
Using the wireframes and information gathered in the initial design workshop, we created several different design ideas, which we presented to the Mobility Manual team. By taking feedback, reworking, and developing the designs, we created a theme to apply to the whole app. Mockups included picking fonts and colours, choosing imagery and making straightforward navigation for the app.
The Mobility Manual presented a challenge in that it had a large amount of content which needed to be written, gathered and implemented.
We set up content management software which tracks progress and keeps everything in one place. Content is the number one reason projects run over, so this tool was very useful in giving visibility on how much was left to do and highlighting anything missing.
We also optimised the app's videos to ensure they worked perfectly with the streaming service we picked and would show at a high quality.
In connection with wireframe designs, we created a Functional Specification document to list the details of what the app will do.
Backend and Infrastructure Considerations
An essential part of planning app development is mapping the solution's backend (administration). We detailed all the technical requirements, strategies, and technologies. This included mapping the server hosting and services required to deliver the app will be detailed and specifications created.
Some of the things we considered are:
- Global content delivery
- Push Notifications
- Video hosting platform/infrastructure
Simultaneous iOS and Android app build
Our process for creating the app involved splitting the functionality into sections and then developing and reviewing each section to ensure it matches the designs & technical specifications.
We carefully considered the structure of the data & content entered to allow for easy future expansion of the app to match the ambitions of the Mobility Manual. While some content is unlikely to change, some needed to be updated regularly, and we made sure to allow for this through an easy-to-use content management system.
We also ensured that we transferred any users of the current Mobility Manual websites to the app's database, so they did not have a break in service.
We integrated several systems for this app, including marketing, customer support, push notifications and payment gateways.
After the app's initial release, we continued to provide improvements and updates. The Mobility manual team oversees the support schedule and sets each task's priority. We have weekly meetings to review progress, discuss any new issues or opportunities and generally keep the team updated on progress.
The Mobility Manual team had a big event planned for the app launch, and we delivered the app in time to be used and demonstrated. The app allows users to access the mobility manual from anywhere without needing to be near a computer. We are still working to improve and refine the app and bring additional functionality to its users.
Why not see for yourself? We'll provide a complete, no-obligation consultation and initial brief to any company interested in our services.