Shanghai — Designing the Identity of a City

2023 · Interaction Design · Editorial Web Experience

A concept website exploring how editorial layouts, bold typography, and immersive imagery can communicate the identity of a city. Rather than simply presenting travel information, the project explores how interface design can make users feel the atmosphere, energy, and personality of Shanghai before they even arrive.

Context

Shanghai 31.23° N · 121.47° E

Beyond a Traditional Travel Website

Most travel websites focus on helping people find information quickly. While practical, they often feel interchangeable, reducing destinations to lists of attractions, restaurants, and hotels.

This project began with a different ambition. Instead of designing another information-driven travel website, I wanted to explore how digital design could communicate the emotional identity of a place.

Shanghai became the perfect subject—a city defined by the contrast between historic streets and modern skylines, tradition and innovation, energy and scale. The challenge became designing an experience that captured those qualities while remaining useful for planning a trip.

Shanghai's iconic skyline inspired the visual direction of the project, serving as a symbol of the city's energy, scale, and modern identity.

My Role

I independently led the project from concept to final prototype, including research, information architecture, wireframing, visual identity, interface design, responsive layouts, and interactive prototyping.

Throughout the project, I explored how editorial design principles could be translated into an interactive digital experience, balancing expressive visual storytelling with practical travel content.

Role: Led independently
Scope: Concept to final prototype
Disciplines: Research, information architecture, wireframing, visual identity, interface design, responsive layouts, interactive prototyping

Apps/skills involved in this project: Safari, Pixelmator Pro, Balsamiq, Pages, Visual Studio Code.

Design Question

Rather than asking

How can users find attractions more quickly?

I asked a different question.

How can an interface make people feel the personality of Shanghai?

That shift changed the entire direction of the project.

Instead of designing pages around navigation alone, every layout became an opportunity to express the city's character through typography, composition, photography, and movement.

Large-scale typography and expansive imagery were used to create an editorial visual language inspired by modern travel publications rather than traditional tourism websites.

Design Philosophy

Designing Emotion Before Information

Travel begins long before arriving at a destination.

The interface should create curiosity before presenting details.

Throughout the project, photography establishes atmosphere before introducing content. Large typography gives the city a confident voice, while generous spacing allows imagery and editorial compositions to breathe. Information is introduced progressively, encouraging exploration instead of overwhelming users with dense content.

The goal was never simply to organise travel information.

It was to make discovering Shanghai feel like reading a beautifully designed travel publication rather than browsing a conventional tourism website.

Designing a City's Identity

One of the central ideas behind the project was treating Shanghai itself as the hero of the interface.

Rather than placing information inside conventional content blocks, I explored oversized typography, panoramic photography, and editorial composition to create layouts where the city's skyline became part of the reading experience.

Instead of sitting behind the interface as decoration, the skyline actively interacts with surrounding content, creating visual moments that reinforce Shanghai's scale, ambition, and modern identity while guiding the reader naturally through the page.

Editorial System

Rather than repeating a single layout throughout the website, I developed a flexible editorial system capable of supporting different types of travel content while maintaining a consistent visual language.

Inspirational stories, destination guides, recommendations, and planning tools each use different compositions, yet remain connected through shared typography, spacing, image treatment, and rhythm.

Hierarchy is created primarily through scale, whitespace, and photography rather than decorative interface elements, allowing complex information to remain approachable without sacrificing visual impact.

Content: Inspirational stories, destination guides, recommendations, planning tools
Shared: Typography, spacing, image treatment, rhythm
Hierarchy: Scale, whitespace, photography

Information Through Composition

Practical travel information often competes for attention.

Instead of separating inspirational content from planning tools, I explored ways to integrate maps, recommendations, and search into the same editorial experience.

Carefully balanced layouts allow photography to inspire exploration while interface components remain immediately accessible when users begin planning their trip. This creates a smoother transition between discovering Shanghai and organising a visit.

Refinement

The project evolved through continuous visual refinement rather than dramatic redesigns.

Across multiple iterations, layouts became simpler, typography more confident, and spacing more deliberate. Card designs were progressively simplified to improve readability, while translucent overlays allowed photography to remain visually dominant without compromising accessibility.

Rather than adding more interface elements, each iteration focused on removing unnecessary complexity and creating a clearer visual hierarchy.

Reflection

Although the project began as a destination website, it ultimately became an exploration of editorial storytelling within digital interfaces.

It taught me that interfaces do more than organise information—they shape how people feel before they read a single word. Typography, imagery, composition, and interaction can communicate the identity of a place just as powerfully as written content.

That perspective continues to influence how I approach interaction design today, encouraging me to think beyond usability and consider the emotional experience every interface creates.