City Guide

UX/UI Design
City Guide is designed to help visitors easily navigate and explore a city’s top attractions. Aiming to simplify the experience of discovering and enjoying new places by offering curated recommendations and intuitive navigation.
DESIGN BRIEF
A responsive web landing page about a city, designed for three breakpoints: desktop, tablet and mobile.
PROBLEM
Berlin city visitors might often feel overwhelmed by the vast number of sightseeing and entertainment options. They struggle with finding reliable reviews and navigating through scattered information, making it difficult to plan their trips efficiently or adjust arrangements on the go.
City Guide UI on different screen sizes

Solution

City Guide offers a streamlined platform that consolidates curated top attractions and reviews in one place. Adapatble interface allows visitors to explore, plan, and enjoy their trips with ease no matter the device they're viewing on.

Key features include:

  • Curated Lists: Highlighting must-see attractions based on popularity and user reviews.

  • Interactive Maps: Providing easy navigation with personalized recommendations.

  • Integrated Reviews: Offering comprehensive insights and ratings from curated reviewers.

POINT OF VIEW

"Ryan, an avid traveller, would like to have a customized visitor's map for his short trips to global urban destinations; the suggested map takes into consideration his budget constraints, as well as interests and preferences."

HOW MIGHT WE

  • collect the information about Ryan's interests, preferences and budget?
  • aggregate the location reviews and other desired tips on exploring a new city?
  • analyze all available information against Ryan's preferences?
  • display personalized visitors map for Ryan in a practical, digestible fashion?
  • collect feedback from Ryan on how well suggestions match his needs?

Design Sketches

My idea was to create an app that creates a plan for a curated city visit for a traveler based on their profile, interests and preferences, using data from open sources with the help machine learning technology. The designs represent a commercial webpage for the app and would illustrate one or more city guides.

Webpage layout sketches with comments

brand platform and Style guide

A Berlin-themed city guide provided an interesting exploration of design philosophies, I drew inspiration from the Bauhaus and Technicolor aesthetics to craft two distinct style tiles. These style tiles integrate core brand elements such as fonts, colors, basic interface components, and a logo. By establishing a cohesive visual language, they effectively convey the brand's essence to stakeholders, ensuring a unified and compelling design direction.

Provisional style tiles

The next step was building the project's photographic library. The final gallery featured iconic sights of Berlin, along with images of public transit, traditional German street food, and several photos showcasing the city's famous ambiance.

Photographic library for the project

Bringing all the elements together for the final style tile, I built upon my previous work to showcase how the UI would appear in both light and dark themes. The design demonstrates how elements adapt to each theme, providing a cohesive look for both options.

Final version of the project's style tile