stadium tour cover image

Stadium tour

App design

We were tasked with creating an app, it has to do with maps, the context can be up to the students, my ideaa was to create an app that would alow users to visit a city and find all of the stadiums in the city and the history behind the stadium and the team.

Skills used

UX design
UI design
Illustration
Prototyping
logo design
content auditing

Programmes used

Adobe Illustraor
Adobe Aftereffects
Adobe photoshop
Adobe XD

stadium tour cover image

Sketches

Starting on paper for any project is really important, it helps me to not get attached to an idea or a design, instead you can make mistakes and go through many different design ideas before making a decision on one that you like.

wireframes low spec

Digitised low spec wireframes

Once I have narrowed down a layout that I like and i've went through the design flow and it makes sense, I will go onto low spec digital wireframes, this gives me a chance to move some stuff around and imagine how the user will go through the website, will it be easy or hard for them? can they flow through site quickly? These are the questions I will ask myself at this point in the build.

wireframes low spec

Style Tile

The style tile helps me to understand the visual side of the app, how will it look? I used several resources when doing this such as google fonts for the font choices and Adobe colour for the colour palette of the app. I also researched icons which was important because I wanted to understand what the target audience would respond to in terms of icons, will they know what they are and will they be prompted to click them.

wireframes low spec

Illustrations

The colour palette I used for the app is simple and designed to be simple and easy for users to navigate it, the illustrations gave me a chance to infuse a bit of colour and make the app pop a bit without hindering the users experience. I made them myself and I am happy with the way came out and add to the app.

wireframes low spec

Unused digitals

This is the design that I came to the critique with and it was mostly positive but with notes regarding the hierarchy of the type, the titles, subtitles and the main text were very simialar in weight. Another thing was the icons, it might take users a while to work out what they mean so it could be useful for there to be captions.

wireframes low spec

Finished app design

This is the finished designs and I am happy with the way they turned out and the changes of the font weight and the icons turned out well. The illustrations brighten up the app and add a bit of colour into the simple colour palette. I also think that the information is clear and easy to read and understand.

wireframes low spec

Prototype animation

I created a small animation that would show how the user might flow through the app and this gave me a chance to see if it was a smooth transition from page to page. It also gave me a chance to show what the buttons may do once the user has pressed them, i think that it is important for the button to give a responce when you have interacted with it.