Templans; the online template builder for training and nutrition plans.

Design • Development • Branding • Templans • 2020
detail-image

Background

Templans was created as my major project during final year of the BSc (Hons) degree in Interactive Multimedia Design at Ulster University.

The project is a fully responsive web application that is primarily for the use of a personal trainer (PT) to create professional looking training and nutrition plans, easily and efficiently styled in accordance with their brand logo and colour.

The plans created can be saved and altered, for easy replication whenever needed e.g. if the PT has a client who needs an exercise, or a food item changed on the plan, this can be easily done by the PT and re-sent to the client within seconds.

In the current market, most personal trainers use crudely coloured tables in Microsoft Word to create the plans that they provide their clients with. This is where Templans can assist and elevate a personal trainer’s services, revolutionising the fitness industry and how PTs conduct business with their clients.

User generated research

As of 2019, the value of the UK gym sector is estimated at £5 billion and has grown 20% over the last five years.

In the UK alone, there are approximately 46,000 registered PTs and it is estimated that by the end of 2020 there will be approximately 400,000 personal trainers in the United States. This shows a great audience for the web application.

Having worked with multiple PTs in Belfast as their graphic designer, a common finding was that there is a constant need for updating of client training and nutrition plans. Having personally received emails during the early hours of the morning asking to update documents to suit their clients’ requirements ASAP. A system like Templans would eradicate this for both parties and allow them to update their plans themselves with ease.

To ensure the idea is feasible, it was proposed to these same PTs and asked for their feedback. In general, the consensus was excellent, they all said they could see themselves using it in the future. A gym owner, who is also a personal trainer said that “..the fitness industry is missing a system like Templans and there is a huge gap in the market for this.” Another said that he “..would love a product like this and would even be willing to pay up to £30 monthly.”

In addition to this, these conversations lead to information that a newly qualified PT gains around four clients per week with each client needing a tailored training and nutrition plan. Accounting to a total of eight new plans per week is required by a PT. Therefore, it is understandable why a PT would rather do the plans themselves, as eight plans would cost a fair amount when going to a graphic designer.

Understanding user requirements

Putting yourself in the shoes of the user is always the best first step. User requirements is the process of outlining the requirements of the user. This can be done in a number of ways, such as user stories.

Below is a Volere Snow Card relating to requirement number 10. As you can see, it provides a very brief description of what the user should be able to do and the rationale or reason behind the requirement. It also provides details if the requirement is dependent on any other requirements, like picking a template or logging in for example. Finally, the fit criterion is checking if the requirement has worked as it should have e.g. the user can edit their template. If this is true, then this user requirement is successful.

  • Requirement #10
  • Requirement TypeFunctional
  • DescriptionUser can create a plan for their client
  • RationaleUser can edit the professional template to suit each of their clients eating and training programs
  • DependenciesRequires user to have picked a template
  • Fit CriterionUser can edit their chosen template

The two user groups focused on are personal trainers aged between 21-34 who already have a busy schedule of clients on the gym floor. I have feedback from both groups through initial surveys, posted across relevant channels, giving me further understanding around systems used and their creative ability. From these surveys, a number of users expressed interest in further interviews and testing to gain more insight in the specifics Templans.

detail-content-img

Designing based on insights

After some paper based logo sketching, I moved onto Adobe Illustrator where I created the brand, Templans. This was soon followed by a style tile and brand guidelines, which enables staying within brand easier and consistent.

The accent blue colour used gives off positive connotations. Blue symbolises trust and intelligence, both of which are critical to the success of Templans and any other business for that matter.

The blue accent colour will be used throughout the website. It will be used to guide the user around the website with the help of information hierarchy. “Blue is often associated with depth and stability. It symbolises trust, wisdom, confidence, intelligence, faith, truth, and heaven.” (Color-wheel-pro.com, 2018).

detail-content-img

System Design

This included looking at each element that will form the application and the technology behind them, allowing them to function properly.

Before sketching and creating high-fidelity mock ups began, there first had to be a decision on what pages the system would include. This was done by logically thinking what elements were needed and if they required their own page or not. Doing this ensures valuable time is not wasted creating pages that are not required or that would have little effect on the final outcome of Templans.

A low-fidelity sitemap, i.e. a sketch was created initially, this soon became a high-fidelity sitemap when the page layout was confirmed.

Sketches, wireframes and mock ups

A sketch of each page was drawn, this helps visualise the general layout of the web application. Each sketch took into account usability standards, e.g. the logo in the top left of the screen and the navigation in the top right.

After completing the sketches for the application, it was time to delve into some detailed wireframes. The reason behind this is to get a more established layout for the Templans web application before committing a lot of time into the high-fidelity mock ups.

Finally, A high-fidelity mock up really helps visualise how the final web application might look. It also helps provide a guide in which to aim towards when in the development stage of the project.

detail-content-img

System testing

Both white box testing and black box testing were carried out on the application.

White box testing is focusing on specific functions or elements within the web application. This method involves testing an expected outcome against expectation, i.e. does this test PASS or FAIL a specific scenario.

The white box testing was conducted against the user requirements discussed previously in this report. This involved testing the functionality within the web application, i.e. does the template download as a PDF to the user’s computer upon clicking the download button.

test # test case result action on failure
1 user can create an account pass n/a

Black box is high level testing, it is essentially usability testing from the user’s perspective, without any prior knowledge of the code or functionality. This is done to ensure everything a user interacts with works as they would expect it to.

Primary usability testing was carried out with 15 users in the late stages of the development of Templans. The results from this were mostly positive, with some constructive criticism. This will be further discussed in the later sections of this report.

User testing

The user surveys were sent out to around 20 people, with 16 responding. Out of these 16 people, six (43.75%) are personal trainers. The response from question three showed that 93.75% of people asked understood the concept of Templans upon using the web application. This shows that it has been designed correctly and with the end user and usability in mind throughout.

There was of course some negative, yet constructive feedback with one person saying that nutrition plans may not be applicable to everyone, as some PTs use macronutrient breakdowns rather than meal contents.

detail-content-img

Evaluation

The development of the Templans web application has resulted in an innovative, creative solution for personal trainers who want to save time by creating their own training and nutrition plans. It is a well thought out web application that fulfils the expected project outcome as specified within the concept definition section of this report. With interest in the fitness industry reaching an all-time high, there is huge potential for Templans in this massive market.