Rough Drafts of APP Design on paper
I immediately began this assignment to design various pages for a sporting fitness app by drawing out different ideas for how it might look on paper. From the get go I had a color scheme in my head of green and white so therefore drew out numerous draft ideas with that colour scheme in mind. For my initial draft which can be seen above I played aorund with the idea of placing the APP logo against either a plain green or grass textured background. I also considered having the background predominantly white with a green textured stripe present down it's center upon which my APP logo + Login options would appear. When I tested out the idea of having a grass textured backgroud in Photoshop I was not happy with the end result as it looked quite tacky and stupid especially when spread across a large background area. As a result I decided to move on and look at how a green textured stripe down the middle background would look. In order to create this green texture I sourced an image of old paper texture from the web. Than I went about placing that image upon a dark green background in Photoshop and reduced it's opacity so as to create a green texture look. In the end I felt this green texture worked better as full background as oppose to just a stripe down the middle center of a white background + therefore decided to use it in that context. As a result I decided to scrap my other initial draft ideas for the APP as they contained the stripe idea.
Improved Draft Idea
Initially I had it in my mind to only have the full green texture present as a background for the opening page. Each of the other various pages would than be white with only features of that same green texture present. As you can see from the Draft ideas on paper above, the Logo on the first page is to be placed against the full green textured background. Than as the user progresses to the next page (Welcome Page) the colour would change to a plain white background. The Get Started button and the Welcome To text would than be styled in the green texture to resonate with the previous opening page. Moving on to the Login page and the idea was the same. Again the Login details would be green textured and placed against a white background. When I eventually went about putting together the designs as a graphic in Photoshop I was very happy with the end result of the Opening page only. I really liked the green background and felt the Logo really worked on it, however I was not a big fan of the large white spaces that were present on the other APP pages. I therefore decided to carry on the green textured background theme by firstly testing it on the Login page. While it did look well the fact that the Logo was present in white on the Login page meant it looked too similar to the opening page which also had this feature. As a result I used the burn tool in order to get that look of a darked burned green on green which I think looks very effective + seperates it from the design of the opening page.
OPENING PAGE + LOGIN PAGE
Above are advanced drafts for the CARDIOPRO app opening page + login page. Each of these designs are more or less simple and clean in their design. Both pages now have a green textured background having made the decision not to use a white background. As a result of completing Modules such as Interaction Design I have learned that often times less is more when designing interfaces for apps etc. However with that being said I felt that the plain white background looked too simple while the green texture is minimalistic yet stylish. Keeping that in mind I went about creating a simple yet effective logo. The dark green will act as the apps main associative colour. Whether or not the opening page + login page will change much in their overall design is yet to be decided upon but I do think these designs are looking pretty effective in their early stages.
Rough Draft of Website Design on paper
In addition to designing the multiple pages for the APP I also had to go about designing the interface for the APPs website. Features that had to be included in the website were firstly a Login page that either player or coach could access the website through in order to check other player stats in terms of speed and distance travelled during training etc. I also had to go about including a Register page as well as a Player profile page where each players stats would be documented. I made the decision in my design to carry on the green texture for the website and have the login page for the website more or less the same as my opening page for the APP. Initially i felt the registration page for the website could work effectively as a pop out menu. However after discussing it’s usability with my team members I decided against it as it was not very feasible to register in this way when accessed across a mobile device. In the end I decided to design a seperate page altogether for the registration page that would be white in colour with texture so as to directly contrast with the Login page. I chose this look as it is very simplistic yet also effective. I went about developing each of these designs from paper to Graphic in Photoshop. In addition we also made the decision as a team to change the APPS name from CARDIOPRO to COACHPRO as the name CARDIOPRO was already recognised across various applications. Examples of each of the website pages completed design in photoshop can be seen below:
Login Page design for website
Carrying across our green texture for the website also.
Login page is more or less similar to opening page of APP. The only difference being the presence of the various Login details + an option to register which will either bring you to a pop out menu or individual page.
Login page with pop out Registration menu
Above is the draft I created for the pop out registration idea. I think this idea is not only visually appeasing but could also be very effective when animated as a feature of the website. However due to possible problems with usability this idea may not be used.
Registration page as an individual page for website
In the event that a pop out menu is not a feasible option I went about designing a simple registration page that would act as a standalone when the user clicks on the registration option.
Profile/Player Log page
Once a user has registered and logged in they are brought to their own individual Login page where they can view there player Log for the week. The empty space here will be filled with graphs containing the various data recorded from that paticular players runs. Visiting another players profile will not change the design as such. What will change however is the player name as well as the graphs shown as they will refer to the player that the user is looking at. In terms of when the coach Logs in they will not be brought straight to a profile page. They will firstly be brought to a player select page containing a drop down menu from which they choose whichever player they want to look at. From this they will then be brought to the Profile page.
Player Profile page + how data will be displayed
Above is a design done out in paper of how the player pfofile page will look when the various data uploaded is displayed. The above draft is created from the view of when a coach logs into his own account. Immediately after logging in he will be greeted by a list of player names(seen on the left hand side) Clicking on one of these individual players will enable the coach to access a drop down menu from which he can select a particular date to view data. This data will than displayed on the right. Data displayed will include a map which has highlights the areas in which the player ran the most. It will also include features such as distances ran, as well as graphical data for speed etc. The coach will be able to view each particular segment of data by clicking on the NEXTor PREVIOUS tab which will be located at the bottom of the data window. A scroll down feature will also be included for the player select section allowing the coach to scroll down further + choose other players he wants to view. The only difference in the features for when a player logs in is that they will not be greeted by a player select but rather a date select for checking there own stats. A player will not be able to view other players stats, only the coach has that ability. Initially I had included home and player profile tabs but after a discussion with my team mates we decided that these features would not be needed and so therefore a Login button is all that is required. A Welcome user feature will also be displayed on the upper tab as well as our familiar COACHPRO logo. A draft of the player profile + data displayed page done in Photoshop can be seen below:
