Profile

Design and Navigation for dresden.de Everything's so yellow!

The Starting Point

In 2014 the city of Dresden contracted out the update of its online presence. The design did not reflect the actual appearance, the navigation was only partly controllable, the front end was neither modern nor responsive.

We found it to be an exciting task. We devised an innovative approach for the navigation and translated the new communication methods of the city into a highly distinctive online CD.

The Dresdeners liked our proposal.

Internal Development – The Workshops

In design terms, we had already hit upon the needs of the Dresden city council. With this positive energy, we went through a number of workshops with the client in the creative strategic process in order to find out:

  • What are the main topics and how should they be made available
  • Which user groups should be focused on and which user needs should be specifically addressed
  • How much hierarchy should be mapped visually and what navigation elements are needed
  • How can we make life easier for the editors and still implement an appealing and diverse design
  • How can we create attractive areas for partners and advertisers which do not disrupt the overall impression of the site

UX Design & Front End Prototyping

Based on the results of the workshops, for the development of the UX designs we concentrated on:

  • Offer easy entry into the wide range of services and content
  • Reduce the main menu to 6 entry points 
  • Offer accessible content based on the interests and needs of users
  • Restrict the hierarchical representation of the structure on the upper levels and otherwise navigate through content, context and search
  • Provide a clear set of styles and modules, which makes it easier for the editors to create consistent yet varied content
The main menu with a focus on the search and six clear entry points
A simple set of styles and a flexible grid ensure consistent and varied content

The Design

In design terms, we continued the striking new patterns of communication of the city consistently in a digital and interactive application. The design is independent and invites you to experience the diverse culture and rich nature of Dresden on smart phones, tablets or desktop computers.


HTML Prototyping

In order to observe how styles, page types, content and navigation elements behave responsively during development, the prospective design was finalized and optimized in HTML prototypes.

The resulting SASS files and build scripts served as foundations for later front end implementation of the site.

Creating an Overview - The Navigation Concept

Dresden.de is a web portal that has been growing for over 20 years. Its content depth and breadth has grown accordingly immense. Supposedly, the site contains about 30,000 content pages on 7 to 8 levels. They attempted to represent it navigationally. In the end, this was no longer working out.

A facilitative measure would certainly have been a comprehensive analysis and combing through of content, which was not, unfortunately, part of the call for proposals.

Alternatively, we developed a navigation concept which gives the user a clear overview, connects the content and makes it easy to selectively dive into its depths. The following aspects were the most essential to us:

1. Knowing everything doesn't always make it any easier

It is not helpful for the user to fully understand the complete hierarchy of content through navigational paths. It should be possible for anyone to to quickly and easily find what they are looking for without being thrown off course by the considerable breadth and depth of content on the site.

2. Even multiple paths can lead to the goal

It took a lot of persuasion, but eventually it all worked out. The main menu was no longer responsible for being the sole access route to all - preferably strictly sorted by tier - content.

3. First eagle, then bees and truffle pig

At various points of the user flow, the site offers different navigational options and tools:

  • On the upper tier, the new navigation provides a quick overview of the main offers and areas of the site. 
  • Once immersed, the user can follow paths that connect similar content and invite one to explore.
  • The ever-present search feature and sitemap always provide the user with the possibility to go from one point to another.

Take a look:

The End Result

After the lively strategy, concept, design and front-end development phases, the editorial team and the city's own IT operations were working at full speed to bring the new look of the city online. Since July 2015 www.dresden.de/en is live.  Really different, really new.

We are very pleased that we were able to actively participate in the appearance and accessibility of the city online. We hope many citizens and visitors explore Dresden online, find the what they are looking for, recognize themselves and maybe even have a little pride in their exceptional city online.

Project details

  • URL: www.dresden.de/index_en.php
  • Customer: Stadt Dresden
  • Branch: Public Administration
  • Realisation: 4 months
  • Work: strategic and creative consulting, UX design, online CD, navigation concept, HTML prototyping
News