User Experience & Branding




McShannock Design

The project

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

This fully responsive web application was created to help personal trainers (PT) easily and efficiently design professional-looking training and nutrition plans, styled in accordance with their brand logo and color.

With Templans, PTs can save and modify plans for quick replication whenever needed. For instance, if a client requires a specific exercise or food item change, the PT can quickly make the necessary adjustments and resend the plan within seconds.

Most PTs currently use crudely coloured tables in Microsoft Word to create plans for their clients. However, Templans can take personal training services to the next level by revolutionising the fitness industry and the way PTs conduct business with their clients.

Templans, a McShannock Design Project
Templans, a McShannock Design Project
Templans, a McShannock Design Project

User generated research

According to recent estimates, the UK gym sector is now valued at £5 billion and has grown by 20% in the past five years. In the UK alone, there are approximately 46,000 registered PTs, while in the United States, it is estimated that there will be around 400,000 personal trainers by the end of 2020. This indicates a large potential audience for the Templans web application.

As a graphic designer who has worked with multiple PTs in Belfast, I found that there is a constant need for updating client training and nutrition plans. I have personally received early morning emails asking for document updates to suit client requirements ASAP. A system like Templans would eliminate this need and enable PTs to update their plans themselves with ease.

To ensure the feasibility of the idea, I proposed it to these same PTs and asked for their feedback. In general, the response was excellent, with all of them saying 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 PT 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 revealed that a newly qualified PT gains around four clients per week, with each client needing a tailored training and nutrition plan. This amounts to a total of eight new plans per week 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

The first step in developing a product is to consider the user’s perspective. User requirements involve outlining the needs and goals of the user in order to create a product that meets their needs. This can be accomplished through various methods, such as user stories.

A Volere Snow Card is a useful tool for outlining user requirements. It provides a brief description of what the user should be able to do, the reason behind the requirement, and any dependencies or criteria for success.

In the case of Templans, the user groups focused on are personal trainers aged between 21-34 who already have a busy schedule of clients on the gym floor. Feedback from these groups has been gathered through initial surveys, posted across relevant channels. This feedback has provided further understanding of the systems used and the creative ability of the users. A number of users have expressed interest in further interviews and testing to gain more insight into the specifics of Templans.

Templans, a McShannock Design Project
Templans, a McShannock Design Project

Designing based on insights

After sketching ideas on paper, I created the Templans brand using Adobe Illustrator. I then developed a style tile and brand guidelines to ensure consistency and easier adherence to the brand.

The accent blue colour was chosen because it connotes positivity, trust, and intelligence, which are all important factors for the success of Templans and any business. This blue accent colour will guide users around the website with the help of an information hierarchy. According to, blue is often associated with depth and stability, symbolising trust, wisdom, confidence, intelligence, faith, truth, and heaven. The blue accent colour will be consistently used throughout the website.

System Design

Before starting on the high-fidelity mock-ups, the team first analyzed each element that would form the application and the technology behind them. This was done to ensure that they would function properly.

To determine what pages the system would include, the team logically thought about what elements were needed and if they required their own page or not. This was done to ensure that valuable time was not wasted creating unnecessary pages that would have little effect on the final outcome of Templans.

Initially, a low-fidelity sitemap or sketch was created, which was later transformed into a high-fidelity sitemap once the page layout had been confirmed.

Templans, a McShannock Design Project
Templans, a McShannock Design Project
Templans, a McShannock Design Project

Sketches, wireframes and mock ups

To visualise the general layout of the web application, the team drew a sketch of each page. Usability standards were taken into account, such as placing the logo in the top left of the screen and the navigation in the top right.

Once the sketches were completed, detailed wireframes were created to establish a layout for the Templans web application before investing a lot of time into the high-fidelity mock-ups.

Finally, a high-fidelity mock-up was created to provide a visual guide for the development stage of the project and to help visualise how the final web application might look.

Templans, a McShannock Design Project
Templans, a McShannock Design Project

System Testing

Both white box testing and black box testing were performed on the Templans web application. White box testing focuses on specific functions or elements within the web application and involves testing an expected outcome against expectation. For example, testing whether a template downloads as a PDF to the user’s computer upon clicking the download button. The white box testing was carried out against the user requirements outlined earlier in this report.

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

Primary usability testing was conducted with 15 users in the late stages of the development of Templans. The results from this were mostly positive, with some constructive criticism. Further details on these results will be discussed in later sections of this report.

User Testing

Out of the 20 people who received the user surveys, 16 responded. Among the respondents, six (43.75%) were personal trainers. The majority of those who used the web application understood the concept of Templans, according to question three, with a response rate of 93.75%. This indicates that the application has been designed with the end-user and usability in mind throughout. However, there was some negative feedback, with one person commenting that nutrition plans may not be applicable to everyone as some PTs use macronutrient breakdowns rather than meal contents. This feedback was taken into account for future updates to the application.


Templans is a highly innovative web application designed specifically for personal trainers who need to create professional-looking training and nutrition plans for their clients quickly and efficiently. The application has been developed with the needs of personal trainers in mind, and it provides them with a solution that saves time by allowing them to create and modify plans with ease. With a rapidly growing fitness industry, the potential for Templans in this market is enormous, making it a highly promising product.

Templans, a McShannock Design Project