I came up with various design ideas to display the training guide, I produced these using Adobe Photoshop. I wanted to display data visually rather than in a basic table but also wanted it to be clear and simple for users to understand. I incorporated bright colours and the runner icon to make it visually appealing to the intended audience.
From this, I went on to develop the first idea as felt that using bars makes it extremely clear for users to see the required training runs. For example, for shorter runs the bar length will be shorter and for longer runs the bar length will be longer. I transformed my digital design into a html mockup as well as creating mockups for the home and login pages.