Visual Design

Case Study ‘Quiet App’

Continuing on from my app ‘Quiet Walk’ which avoids the big crowds the most efficient way to have a less crowded walk getting from A to B I set out to do the high fidelity visuals for the app incorporating typography, colour, font and composition.

Approach

I gave myself a week to build the high fidelity visuals for the app and tested it with different participants, making two versions of the visuals in Sketch. I worked on a mood board that would give me inspiration for the kinds of colours and icons I would want to incorporate into my app. From the colours I was very drawn to the blue cat as the colour was calming.

I did some exercises to find out my brands personality, my best one was ‘I’m swift but not a speedball’. I also looked at some brands that my app relates to, these were Nike because it’s sporty and has tons of things for outdoors and amazon because they get parcels from A-B and I’m getting people from A-B in a efficient way.

Above are the sketches of 3 screens for the visuals, taking inspiration from google maps and citymapper make the app very efficient. This is quite a change from the ‘Quiet Walk’ version before, I had to take out features like the crowds graph because these became confusing for the users and I was trying to keep it simple.

Here is my Style Tile above which is different from my mood board because I originally had it green but this didn’t look good. A lot of my inspiration came from Head Space, a meditation app, with these calm blue and grey colours.

Above is the first version of my app ‘Quit Walk’, keeping it simple but efficient for the user.

Result

After showing my visual design to several participants the big icon of the person needed to be changed as this didn’t symbolise a quiet walk it instead looked like someone was sneaking so I made it very clear for the user, showing them a path with a person on and a tree to the righthand side of the title. I included ‘Find a Quiet Route’ onto the menu bar to show that the user was on the current page. In the future I could add several different paths to let the user have an opportunity to take a route in between the busy route and the quiet route.