Stadt Luzern

An intuitive digital home for the City of Lucerne – A website that addresses relevant questions in a targeted manner, reduces complexity and paves the way for e-government. The online information desk for Lucerne and those who strive to be part of it.

  • Disciplines Digital Design & Development
  • Project Duration 2008 >

In 2008, the communications department of the city of Lucerne commissioned us to redesign their city portal. In 2016, we repeated the success and won the pitch for the relaunch of the website. Our tasks: create the redesign of the website, program the prototype, define the image language and to create the newsletter template.

The visual experience
An important aspect of the redesign is a content-related preparation of the topics. We intensified the user experience with a clear page structure and responsive design. Due to the reduced design, the content moved into the foreground and correlated with contemporary, barrier-free standards. Large typography, convincing images and a lot of white space support the functional layout with clear rules, which the user quickly learns. The core values ​​of the «City of Lucerne» brand is of course retained.

New user practice *
We expanded the classic, linear web page steering with global navigation functions, which respond to the modern and diverse surfing behavior. Each page on the website is a starting point, whereby the location within the website is obvious at any time, independent of the device. The most direct way to navigate is the strong internal search function: Users ask questions and the website responds with the relevant information.
* As a starting point, we received a wireframe study carried out by the agency mesch.

Programming the prototype
We encoded the prototype of the website. The prototype forms the basis of the development process in which testing and feathering are carried out. At the end of the adaptation cycles, the prototype provides the starting point for the final web page. The prototype coding was handed over to the developers of i-web who implemented front- and backend to the final website.

@import "common/variables";

// Automatically injected Bower dependencies via wiredep
// bower:scss
@import "../../bower_components/bootstrap/scss/bootstrap.scss";
// endbower

@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/mmenu";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

Scenes from Lucerne
The images on the website are intended to appeal to people who live, or wish to live, in Lucerne. They represent familiar scenes taken from everyday life. An authentic atmosphere that the Lucerne photographer Heinz Dahinden knows how to capture.

User-friendly forms
If we view the website as an online counter, each user enjoys fast and uncomplicated processing. We therefore designed comprehensible forms that are quick and easy to fill in on all devices.