I thought that it would be important for the user to be able to go onto their own profile page and be able to view some of their stats and workout results. I started off by just including the name, goal and some basic numbers, i then added some more personal details in small, then more important details with icons and larger numbers.

I was also trying to design my app on the apple watch platform, because of the sizing of the screen the amount of information on one screen had to be as little as possible. The size of the buttons also need to be big enough for the finger to press, but not too big for the user to press the wrong one by accident.

I started off by keeping nearly the exact same style as i used for the mobile app, however i felt that the screen was far too overcrowded and the buttons would be far too small and close together for the user to press.

I then changed the information to a vertical design instead of horizontal, i also took out the music section. I still wanted it to be easy for the user to access their music, so i designed two different small tabs that would either sit at the top or the side of the screen.

I wasn’t sure if breaking up the pink with blue was a good idea, so i thought it might be just as clear to make the current workout larger, with a blue ring around it. To optimise the small space of the watch screen, i thought that the resting timer could be a circle design to go around the number instead of a horizontal bar.

I then started to design the music page that would be swiped from the side of the screen, although the screen is a lot smaller, the user would still need the same amount of information on it.

I eventually got my design right, i decided to go for a dark background as i felt that being a small screen on a wrist, the colours would need to contrast from the dark background. I took bits of screen information off and seperated it all, the different parts of the workout have menu dots at the bottom. Then to save space, i designed tabs on the sides of the screen, allowing the information to be easily located and not overcrowded.

One of the most important parts of the navigation on the app is the side bar, i started off with a small squashed design, then continued with a design that covers the whole screen. I designed pink buttons in the centre to stand out, but found that plain white text with a pink icon is a lot clearer and easy for the eyes.

To show the users progress and stats of their workouts, i thought that it would be a good idea to locate them on the profile page. The profile page would have two sections, the basic information and then a further overview displayed on a graph.

Before i started designing an app concept instead of an interactive project, i tested out some different sensors and attempted to use an arduino. (Link under each preview)

To see what my app concept would look like in real life usage, i decided to put my designs into some real life images. By imposing my designs into a real life image, it allows me to see how the spacing and sizing works in proportion to a phone screen.

 

I had finally found the style that i wanted to keep throughout the app, so i was now creating screens that would make the app seem more realistic.

Starting with the login page, i created a version that i really liked but i did not like the part with the music app symbols. So i designed two buttons for the user to login with instead.

 

 

 

 

 

 

 

 

 

The next screens i started to design were the creating account screens, i wanted to get the spacing but also the icons correct.

After looking at inspiration online, i found that it looks a lot better and also improves usability by having a faint line and instruction. In the create account section i wanted to let the user have the ability to create a unique experience. 

I then continued to design screens that would help create the experience for the user.

I continued to design the screens for the challenge section, this would be a feature for the user to have challenges set for them to complete on a daily basis.

I wanted to come back to thinking about the main idea of the project, where the user creates their own workout and then the app creates the playlist for them.

Looking at other fitness apps, i noticed that one of them gave the user the ability to copy a previous workout, i thought that this feature could work well with my app, especially with the set playlist.

I updated my workout page by adding in the icons to represent the area of workout for the user. I decided to go with the design where the user would click a dropdown menu to open up the specific muscle area that they wanted to select the exercise from.

I thought that it would be a good idea to have a pre set workout page, which would mean the user can easily do a random workout. I spent time playing around with gradients and solid fill colours to create the right scheme to match the difficulty.

When looking at other apps and the way that the options section was designed, i started to think about the spacing and the colours to prevent the app looking overcrowded.

I started to think about the screens inbetween planning a workout and actually carrying it out, therefore i designed a page that let the user know their playlist was being created and that they should always warm up.

I then continued to keep changing the design of this, i added in the section about connecting to the sensor, but also added loading wheels, so that the user could see the loading progress. I then added a red bar over the warning stage as this would stand out far more than just words.

I still felt that the page was overcrowded, so i then redesigned it to make the symbols a lot smaller and took out the words and replaced them with a tick symbol. I think that having 3 smaller icons with a tick next to them is a lot more clear.

After this i started to think about the actual page that would be displayed when the user is working out, this page would need to include a range of information, however it needed to be clear and laid out well. I had designed a music bar at the top, which had a measurement of the users heartrate, so that the music could be changed depending on how fast or slow it is.

I felt that circles worked far better than a rounded edge rectangle as having one solid block of colour in the middle was not very clear to read. With three separate circles, it shows that they are three parts of the workout.

I then changed the circles to make it clearer, i designed it so that the previous completed workout was faded out with a tick, the upcoming one was left normal, and the current workout was scaled up by an extra 20%.

I then changed the bpm and the song choice at the top of the screen so that it would show the playlist changing depending on the bpm recording. I also removed the heart shape and replaced it with the heart beat line, as i felt that this less complicated and easier to read.

I then designed the screens for when the workout had completed, the previous workouts have been faded and crossed out above the current workout. After the workout has finished, it will then take the user to their overview where it will tell them the details of their workout.

I then started to work on the screen where the user would be able to see their music in more detail. If the user clicked the minimised music player, it would then open up a screen that looks like this.

 

 

 

 

 

 

 

 

 

 

 

 

I wanted to create an app concept that had a simplistic design with good usability, but also had all of the key features that it needed.

I took a step back from my work and imagined that i was the user, using a screen that small. I took my original designs and changed the icons, i then started to think about the colours and the sizing and spacing of the buttons. By removing the previous and next buttons from the screen, i was able to create screen space by adding the page indicator at the bottom. I started to change the colours and thickness of the lines to give it a cleaner look.

I was still thinking about how i would categorise the different types of exercise for the user, in a way where there would be no overlapping exercises in more than one category. I made a design of how the screen could look, it would be a very simple design, using 3 images and capitalised font on top for easy navigation. After that that the user would be able to specifically select their exercise plan and the different options to personalise it.

After having a tutorial with feedback, i was able to make some amendments to the way that the app concept would work. For example i thought about how music would be used with sports, most of the time sports will be done with multiple people. This therefore limits the music aspect in a number of ways, the user would have to find music that suits all players, but also the sports would be far too loud for the music.

After creating personas, userflows and wireframes, i then started to think how the app would run from the download stage. I thought about how the user would know how they were going to incorporate their music, so i added some logos to show what music apps could be used. I started to play around with a few colours to see what would work best with a white font.

By using a placeholder colour of pink, i started to think about how the user would create their account and personalise it. I spent some time playing around with icons, font width and sizes and also capitalisation of words. I wanted the right words to be in capitals and the input sections in lower case.

Continuing with the account personalisation, i was designing the pages for the user to decide what their goals were, but also create sets of workouts depending on what equipment that they have.

I then started to design the page where the user would be able to personalise the songs that are played during a workout, by selecting a number of songs that they would find preferable.

I had always used a pink colour with the same style, so i decided to use a different colour and gradient and then completely change up the style of the app. I thought it may look good to have a white background, but i found that it was too basic so i decided to use a grey background with a white overlay.

Adding a white overlay over the top of the grey background it makes the app look less flat.