About CityWay
CityWay is an essential travel application to have installed when out and about in a new city, whether on a business trip, on holiday, or closer to home.
The Project
CityWay is centred around getting from A to B. It displays maps, gives directions, lays out routes and provides details for areas of interest such as nearby restaurants, cafes and cultural attractions. Users can save places they want to visit after finding them on search or add them to their list of “favourites”.
The app can be used offline but users will need to preload or cache key locations before they lose their network access to ensure the best possible service.
Understanding User Needs
Users can use CityWay when they visit a new city and in their own city.
Although no research was done to establish the target audience due to time restraints, I concentrated on the main things that a person would be interested in when they visit a new city.
User goals:
- Navigate through the city without getting lost
- Go from point A to point B
- Find places to visit, local restaurants and interesting activities
- Be efficient when travelling, save time and energy
- Store information and locations they want to visit or have enjoyed
User needs:
- Access a map to view their current location and destination
- Estimate how long it takes to go from point A to point B by searching the itinerary routes and accessing commuting information
- Have access to a database of places to go to
- Get access to logistical information such as opening hours
- Make a list of places they want to visit or that they enjoy, to store for future use
Sketches
I drafted a series of sketches on paper and freehand using InVision.
Wireframes
From the sketches, I made wireframes to establish the basic structure of the information of the main features of the app.
Mockups
I created a series of mockups from the wireframes using Figma.
Styling Concepts
The colours used were a combination of:
- Mostly desaturated dark blue for the text, slide down menu box (90% opacity) and home icons,
- Bright blue for icons and links,
- Strong cyan for top navigation bar and some of the backgrounds such as splash screen, Explore, Favourites and Practicalities screens,
- Light grayish blue for subtle coloured backgrounds,
- Bright orange for CTA buttons.
Blue was chosen for its overall calming effects and to represent the idea of travel, blue sky and sunny weather. As the app contains a lot of pictures, blue tones down the overall feel and look of the app.
Orange is a complementary colour of blue. It adds contrast and makes the CTA buttons stand out.
Styling Concepts
The colours used were a combination of:
- Mostly desaturated dark blue for the text, slide down menu box (90% opacity) and home icons,
- Bright blue for icons and links,
- Strong cyan for top navigation bar and some of the backgrounds such as splash screen, Explore, Favourites and Practicalities screens,
- Light grayish blue for subtle coloured backgrounds,
- Bright orange for CTA buttons.
Blue was chosen for its overall calming effects and to represent the idea of travel, blue sky and sunny weather. As the app contains a lot of pictures, blue tones down the overall feel and look of the app.
Orange is a complementary colour of blue. It adds contrast and makes the CTA buttons stand out.
City Way Features
Showcase
Please click on the picture below to view the app showcase.
Prototype
To view the prototype, click on this link: