Product Design - UX/UI - Front-End Development

Create, distribute and log traning programmes

Okoach is an online coaching mobile app aimed towards both the elite level of coaching or the average gym-goer. The app allows coaches to create, edit and distribute training programmes to their athletes while their athlete can track their training.

  • Role

    Research, Wireframing, Development

  • Tools

    Adobe Creative Suite, Figma, React Native


The problem for coaches looking to expand through online means is the ability to organise their training programmes for their athletes. Many online coaches have the technology to do this however they use tools that they already know such as Excel spreadsheets, word documents, or designed PDFs to showcase their training programme and send via email or online-messenger. This snowballs into even more disorganisation as they grow their clientele.


The solution was to Okoach, a mobile app puts all the communcation channels of online training onto your mobile. Coaches and athletes will be able to use it during the sessions and always stay on track with their training.

Okoach Screenshots


The main forms of research conducted were interviews and questionnaires. I interviewed coaches that have experience with clients ranging from beginners to professional athletes. They explained their process and how they managed data where the most common tool was an Excel Spreadsheet which was a good form of organisation post and pre-training, however, hard to use during.


From the interviews and survey results, a persona was created that represented both a coach and an athlete which will be the main demographic for Okoach. This outlined the user's goals.


User Goals

  • Organise training programmes
  • Edit training programmes on the go
  • Gain clients
  • Save Time

Design Process

An app map was created to help outline the user journey based on the goals which lead to wireframes.

App Map


The colours took inspiration from brands such as Nike and Under Armour for the typeface while the red represents the colour of the heaviest barbell plates. The iconography also took inspiration from weights on a barebell.


Final Design

Prototype APrototype BPrototype CPrototype D

Development Process

To test my front-end skills, the Okoach screens were converted into an app using React Native, using tools such as Styled Components for styling and Git for version control. You can see the repo here.


This was my final year project for university where I combined a hobby of mine with the profession I want to get involved with. This project was an interesting challenge as it was the first time taking something from an idea, researching the feasibility and finally designing and developing it.

My main takeaway from this is that I really enjoy the process of creating a product. My challenges mainly came from the development stage as I was learning while I was coding. But once I finished the project, I learnt to React which is a skill that is pretty valuable today in tech.