App Design · 2018-01-12 · Planning Navigation Design Developement Testing Evaluation Page 4 Research Research pt1 I wanted my mobile application to be unique and challenging: something

Page 1

Click icon forInvision link ------>

App Design

By Elliot White ID: 1439261Web link to Invision https://invis.io/ME5N78BRY

Notice: All the logos have been created in Illustrator.

https://invis.io/ME5N78BRY

http://www.thinkdigitalsmart.com/

Page 2


Contents1) Introduction.......................................................................................Page 3

2) Research..............................................................................................Page 4

3) Planning .............................................................................................Page 6

4) Navigation System..............................................................................Page 21

4) Design..................................................................................................Page 29

5) Development.......................................................................................Page 32

6) Testing.................................................................................................Page 33

7) Evaluation...........................................................................................Page 37



Page 3Research Planning Design Developement Testing EvaluationNavigation


Introduction

IntroductionIn this report I will show the step by step creation of my site. That soon lead to the finished and complete verion that I have eneded up with on invision. This project included creative thinking, in application design. So coming up with a concept and giving your reason why you decided to produce. In my case it was to produce an application that consisted of a unique design and thought. For reason I decided to produce an mobile app, aposing to the tablet. For a professional betting game app.



Page 4Planning Design Developement Testing EvaluationNavigation


Research

Research pt1I wanted my mobile application to be unique and challenging: something that was currently unavailable on the market. I looked at numerous ideas and eventually settled on a betting app. I am not a gambler myself but the concept intrigued me. I was fascinated by the site http://cs-golounge.com/, where you could view trading statistics, the odds on upcoming games and expert analysis. I also looked at another site, http://www.gosugamers.net/gosubet, which offers a lot of information about the players, rankings, league tables and updated VODs etc. And lastly there is the site https://www.reddit.com/r/csgobetting/ which gives the views of discerning punters. I thought what a good idea it would be to create an app that strung all these sites together, which is how DiceGamer came into being.

I took a leaf or two out of the pages of an app called ‘OnCourt’, which provides statistical information and betting odds on tennis. I used it as a reference for the layout of my site. Unlike this site, I wanted the functionality of being able to bet and a lobby for people to discuss ideas. The goal was to get people to move to mobile use. After all, many people who play the popular game Counter Strike are web user savvy so why shouldn’t gamblers become similarly competent in the use of a gambling app. Millions of people enjoy the gaming industry. The goal was to get all the users to switch to mobile for easy use. For my inspiration I looked to ‘Steam’, a huge online downloadable content library where users can download games without having to use discs.

Introduction



Page 5Research Planning Design DevelopementIntroduction Testing EvaluationNavigation


Research pt2 Steam, also called ‘Valve’, are the producers of Counter Strike and CS:GO is one of the top selling FPS (First Person-shooter) games in the world. This is primarily because there are popular YouTube channels that advertise the game; some footages can reach around 300,000 views. Al-though it’s not a gambling game as such, some people do “bet” on it or trade “skins”, as they call their currency.

For my gambling app I would have to ensure that users were 18 or over as gambling is forbidden under this age. For the app to be fully func-tional connection to the internet was imperative otherwise users would not be accessing current information on upcoming games and the stats on teams and players could be out of date. However, they would be able to see local cache from when they last went on line. The way that that information would be drawn out would be with the use of API. This means that my application would automatically update every time it came In contact with one of the game developers servers.

Finally, for the design of this application I would not be able to use any branding. Consequently, instead I would mark the selection of games at the beginning of the application with coloured controllers. As for team names I simply refer to them as Team1, Team2, etc. So in most places there will be a template of some sort. But the idea and concept of the application would still all be there in the mock-up. In the planning stage I created all the various mock-up pages that would be included in my final piece.

Research



Page 6Research Design DevelopementIntroduction Testing EvaluationNavigation


Planning

Planning pt1The creation of this app naturally required considerable planning if it was to work effectively in a mobile device. There were 30-40 pages of drawings and annotations which helped me to visualize what would work and what wouldn’t work. What would have looked fine in a notebook or tablet was completely unacceptable on a mobile where obviously space is at a premium. Simplicity was the byword. The initial sketches helped me build a picture of what I should expect my app to look like. For Instance, the way I set out the tables helped me build a picture on what the tables should look like and how far they should be spaced out amongst each other. Also the Lobby section helped me to include other social media sites, so people could share comments or betting odds. Also, the creation of the logo name helped me work around in creating the splash screen, the reason being that I thought dice worked particularly well with other casino images like the markings on cards. The predominantly white image of the dice encouraged me to think of an overall brighter picture, I.e. to have an app which displayed a light, fresh look. Opting for the flat design early on helped dictate what the rest of my illustrator designs. It had something of a domino effect and helped me achieve a neater look to my application. The following planning imagery will demonstrate all the ideas, and how my app shaped up the further on I went in creating pages. It was also obvious that all the imagery had their own guidelines, to which I alluded in the design phase. I had created a vast sequence of percentile guide-





Planning

Planning pt2





Planning

Planning pt3





Planning

Planning pt4





Planning

Planning pt5





Planning

Planning pt6





Planning

Planning pt7





Planning

Planning pt8





Planning

Planning pt9





Planning

Planning pt10





Planning

Planning pt11





Planning

Planning pt12





Planning

Planning pt13





Planning

Planning pt14





Planning

Planning pt15



Page 21Research Planning Design DevelopementIntroduction


Navigation EvaluationTesting

Navigation SystemFor the navigation system I tried various ways to demonstrate how all the pages were connected. First I had to construct a sticky note diagram laid across my wall. This was only a formative plan to help me build a picture of how the pages might be connected. I then began to narrow down my notes to a more accurate representation on paper. Here I was able to draw the tables connected, and also supply a diagram to show how other pages may be connected to the navbar. I also displayed links, and general external diagrams. And finally I did the same representation by displaying it on a flowchart with separate shapes, giving different meanings to how each node was connected. All three representations of the navigation system helped me pin down the exact method of how I would approach my walkthrough with the InVision app, as I found that the more I produced the easier it was to cancel irrelevant data and that which was relevant.






Navigation System






Navigation System






Navigation System






Navigation System






Navigation System






Navigation System






Navigation System



Page 29Research Planning DevelopementIntroduction Testing EvaluationNavigation


Design

Design pt1For my mobile app design, it was important that I took into serious consideration who would be using my app. I needed to remember that many people below the age of 18 would want to use the app for its statistical information or watch games out of interest, even though they would not be allowed to use it to bet. Consequently, I decided that my target market was teenagers as well as adults. It was important that my app wasn’t too cluttered but instead clean and simple in appearance while still visually appealing. Users would need to access Information easily so practi-cality came first. I had to decide whether the app should have a 3D effect or go for the more up-to-date flat design. After some research I discovered that most people preferred a flat design that gave the impression of 3D effects. This is when I thought of various drop shadows that I could go onto create in illustrator. I ended up spending most of my time creating a variety of icons with clear meanings. For example, I didn’t want to just have a word that explained a nav button, but I also wanted an icon to show what the button was about so that it was faster and easier for the user to under-stand.Also, for the top navigation bar I wanted it to be obvious what various icons would do once clicked. In order to show the separation between the buttons I created a gradient colour that remained faithful, for reasons of consistency, to the colour scheme I using throughout the app. The colours I chose to use were a darkish red for the text while for any navigation button I used light red. As far as the background was concerned I wanted it to be light and clear since the information would have to be displayed on a white background.



Page 30Research Planning DevelopementIntroduction Testing EvaluationNavigation


Design

Design pt2In terms of font, I wanted also a clear and understandable font that could be seen from a distance. This meant researching a lot on the internet for the fonts that were suitable for this purpose. I ended up using a font called ChunkFive, which suited the purpose perfectly. In terms of the dimensions I used I tried to find an onscreen dimension equivalent to the Iphone6. The dimensions I ended up using were 750 x 1334 which suited it perfectly. The font size was also important because it needed to be in proportion to the page and scaled down appropriately from main headings to sub-headings One example of patterns that I used within the app was the splash screen. I wanted a front cover that drew people in. Initially, I came up with the name DiceGamer, using a couple of dice as an image, and a splash effect in the background. Unfortunately, it didn’t resonate with people that it was a betting app. So I did some research and found numerous betting apps, all of which seemed to run along similar themes. Most were in a gold, red or green colour. Some had various pattern effects for their covers. I wanted images that were immediately symbolic with gambling, which was why I hit upon the use of dice. I decided that playing cards were similarly symbolic and decided to use them - clubs, diamonds, hearts and spades - as a background. At first I wanted them all in red that they in step with the apps’ theme colour. Then I decided to change the spades and clubs into a black colour but noticed that it conflicted with the dices circles and drew the users’ eyes from the logo itself. By trial and error I came to the conclusion that a grey-reddish colour was best. It was enough to dim the amount of red and to distinguish itself from the other colour card markings.



Page 31Research Planning DesignIntroduction Testing EvaluationNavigation


Developement

In the lobby section people could share thoughts on other social media sites like Facebook, Twitter and LinkedIn. I also used media to show vide-os on the betting page. Viewing a match live was achieved by clicking on the VOD icon located in the centre of the screen. The betting page was also interactive. All the icons created were in illustrator, like the log off and home buttons. However, the button I gave the most thought to was the help button, which was displayed as a question mark while the exclamation mark indicated the rules section. However, some people mistook it as a notifications tab. This at the time concerned me and I realised I had to come up with an alternative. Since this was a betting site guidelines and measurements were crucial: it was imperative that a table was in line with other columns, otherwise it would look unattractive and unprofessional. As a result I decided to use guidelines for every word, icon and line. I rarely used the ruler be-cause I thought even that would not be accurate enough. Therefore I used the ‘New Guide’ located in the ‘View’ tab where I entered the exact percentage for vertical and horizontal use to get the exact measurement that I wanted. Unfortunately, this wasn’t as easy as it sounds because I wanted all the titles to remain consistent in size. What I thought served the app well was the design of my Help section, where the app could be dimmed and various sections highlighted to show the user exactly where they had to go.

Design pt3



Page 32Research Planning DesignIntroduction EvaluationNavigation


Developement Testing

DevelopmentFor the creation of my mobile app. I will use the OS for Android, the reason being that Play Store is seeing an ever increasing amount of down-loads of this system. Also, many free apps are found in Android. The android SDK is far more efficient then the development of iOS’s as android can communicate more effectively with android. To put it more simply, there is simply a wider range of applications that can help serve this purpose. Also in the use of the development I will need API’s from various companies. This is a spreadsheet of data that is updated in one huge batch of information. The reason why I would need this is because for my spreadsheets of players and teams to be effectively updated I need to draw information from the game company’s servers. Once I’ve been given permission I can then have my app automatically update, with mini-mal maintenance. My app will be available in the Play Store as a free purchase, which will enable me to reach a wider audience. Ideally, I should be able to negotiate a small percentage of all monies bet through my app from the betting companies, who I will also encourage to advertise on the app.



Page 33Research Planning Design DevelopementIntroduction EvaluationNavigation


Testing

TestingTesting

Test Audience: Clive Green – 35 years old - JournalistBen Lamport – 22 years old – Games DesignerShawn Blair – 18 – College StudentJoshua Player – 28 – Marketing Jordan Wilson – 19 – Engineering studies

Testing is of paramount importance for any designer as it allows them to build a picture of what how a wider audience will perceive it. When it comes to forming an opinion it can be a decisive factor. The overall feedback that I gathered helped me decide on the right options for the appli-cation. It even helped me with the design scheme of my app. I.e. to opt for a flat design or 3D. It also helped me decide on the logo that I would use in my app and how the navigation system should be laid out. I needed to know what would be beneficial for the gaming community. With-out the questionnaire I feel that my app would have fallen significantly short in terms of expectations so I made sure that I consulted as many people as possible.





Testing

Testing





Testing

Testing





Testing

Testing



Page 37Research Planning Design DevelopementIntroduction TestingNavigation


Evaluation

Critical Evaluation Compared to other mobile applications that use a betting layout for games, I think my app holds its own. For example, the CS:GO lounge has a poorly lit background, whilst the information is all cluttered in one confined space; overall there is just too much information. DiceGamer has a well-lit background, easily visible text and a straightforward navigation bar. In CS:GO Lounge, it has ungainly looking long columns of informa-tion in the dropdown menu. I decided not to use dropdown menus in my app, but instead have four main nav bars that each branch off to other more general areas related to that topic. I did that because it’s designed for a mobile phone use, not for someone with a monitor to navigate themselves around. Also, I find that my application offers valuable and more relevant data. What I found on the CS:GO Lounge app was that some of the icons were hidden and , therefore, in effect inaccessible, whereas mine are clearly labeled. Nor are they against the sides of the app, but instead located within the centre of the screen, which is much more tidy and aesthetically pleasing to the eye. Some apps offer too many 3D elements, whereas mine demonstrates the use of flat design art, which looks clean and easy to use, and is very appealing to the eye. But this comes at a cost – as I had to create each individual flat design in illustrator, which can be very long and tedious to do. Also another positive are the guidelines which I explained earlier in the design phase. This was because I remained consistent in the use of percentages when laying out my guidelines to ensure that my app looked as professional as possible.

However, there are some cons I thought I should admit to. For instance, there is the concern that some information may have been too small to click on. However, I did trial the app and I was able to perform its functions perfectly. However, older users may have difficulties due to the size or people with large fingers. This can be countered, of course, with the zoom function that most phones have. Also, I felt that maybe the gra-dient colour for the top navbar shouldn’t have been used, but instead had a darker colour to demonstrate the clickable function that the layer had. Some people said they liked it, however as the designer, I felt that maybe that could have been changed. One page that didn’t work so well was the Teams section. While it’s helpful to show how the teams are laid out, a user might have wanted to go straight to the ranking system rather than through the teams section to find out what they wanted. These small failings apart, I am very proud of how the app has turned out, and how it looks as a whole. People have tried it and haven’t had any problems with it. All the information is there, but In a clear, legible way. As a mock up design I feel that it has a lot of potential that I can explore in the upcoming years of study.



Page 38Research Planning Design DevelopementIntroduction TestingNavigation


Evaluation

Picture References in Report http://cnet4.cbsistatic.com/hub/i/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg

http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/09/How-to-stop-auto-updates-on-Google-play-store.jpg

http://store.steampowered.com/

http://www.gosugamers.net/

http://csgolounge.com/



Documents

App Design · 2018-01-12 · Planning Navigation Design Developement Testing Evaluation Page 4 Research Research pt1 I wanted my mobile application to be unique and challenging: something