top of page

Citywalker App:

This was a self-decided brief; a university project that gave us the freedom to design for an outcome of our choice. I was eager to learn more about UI/UX design, specifically app design, and to have the opportunity to work with prototyping software to better my knowledge.

As I'm interested in urban areas, I decided to design for a hypothetical app that encouraged older children (aged 12 - 16) to spend more time outdoors, engaging with wherever they are. The app, if real, would use augmented-reality technology to present an interactive map and help users find sites of historic, artistic and cultural significance. The app would be both educationally and physically-stimulating for the audience.

The app would encourage the users to go outside and explore by using a leaderboard system - users can connect and compete with their friends, collecting points for each listed site that they visit on the map. Sites could be filtered by museums, wildlife & nature, art, culture, history and entertainment to help direct them to specific sites. There was also the option to show a tube map, to further help users find their way in the city. Users would also have the ability to customise their character, making it more personal to them. There was also a scrapbook feature, which would allow users to photograph or take notes on anything they wished to remember from their visits.

screenshot 3.png
screenshot 1.png
screenshot 4.png

For the visual style of the app, I went for a digitally-illustrated approach. Illustration is a personal interest of mine, and so I wanted to be able to incorporate it into the project. I also felt that bright, clean-cut, almost cartoon-like illustrations would appeal best to my target audience and make the app engaging and exciting for users.

I sketched out a variety of significant London buildings and landmarks, then used Adobe Illustrator to illustrate them digitally. I also illustrated the map, variants of trees and bushes, skyscrapers, and icons for the app's buttons and different pages.

To create the prototype of my app, I used Figma. With this, I linked each page together through giving the desired functions to each button and icon I'd created. Through doing this, I was then able to navigate through my app the way that a user would.

Below are some of the illustrations designed for the app. I chose a bright primary colour scheme consisting of a bright teal, yellow and green, which I used throughout the illustrations for greenery and water in the map, as well as within the app's buttons and icons. These bright colours helped to make the app feel exciting and engaging for a younger audience, and worked well alongside the more neutral tones that I used within the illustration of the buildings. 

sketches.png
big buildings (day and night) with shado
big building variations.png
map%20copy_edited.jpg
trophy leaderboard.png
icon - nature and wildlife.png
icon - underground.png
icon - pigeon 3.png
icon - mseums.png
icon - history.png
icon - culture.png
icon - entertainment.png
icon - art.png
character.png
royal albert hall.png
character - tower of london guard.png
design museum.png
building 2.png
building 4.png
westminster abbey.png
tower bridge.png
transport museum.png
big ben parliament.png
character - shakespeare.png
v and a museum.png
boris.png
big ben and parliament close up map copy
photoshop icon.png
figma logo.png
illustrator logo.png
trees.png
icon - bus.png
icon - customise.png
icon - return home.png
bottom of page