City of Geneva: website design

A great city project 

We were very pleased to start the design work for this great website redesign project. This new mandate matched with our offices opening in Geneva. We were also looking forward to bringing our expertise to this platform, to serve the citizens of Geneva.

Year:
2020
Client:
Ville de Genève
Skills: Design
Mood image : preview of the Website on the left and preview of a map on the right - Antistatique
Mood image : preview of illustrations on the left and logo use on the right - Antistatique

The design approach in a major project

Antistatique is obviously not the only stakeholder in this ambitious project, there are different departments involved. Before starting, there will also be an upstream ergonomic analysis of Telono. We’ve absorbed the reports of usability tests from the former website and have also integrated the given recommendations into our workflow for the new platform. A fresher website that better meets current behaviours and, of course, people's expectations regarding access to information.

The plan - or the Art of wireframes

We often compare the design work of a website to an architect’s work, as for us, wireframes represent the plan or the skeleton of a page. This makes the information architecture tangible and shows the layout of each page. We make visible the hierarchy of information and the interface components. These wireframes also serve as a support for usability tests. For this project we created HTML template pages. This solution allowed us to demonstrate the "responsive" pages during the steering committee meetings. These deliverables facilitate the discussion with the team ant their awareness of the complexity or simplicity of the solutions proposed on the screens.

In parallel to wireframes, we maintain a comprehensive list of components called "component matrix". It’s a list of things that can be modified if needed: what, what name, in what form, what information, for what kind of display. This document is used by everyone during the different project phases.

The visual design

Art direction and web design

“Geneva: city life” or “Geneva – get informed, get inspired”. These are two sample catchphrases that could summarise our visual approach. Although the website has a public information service goal, Geneva is a city on the move, where the social and cultural scene is alive and kicking. Just like the two sides of a coin: the website of the City of Geneva must offer both of these aspects.

Art direction: font choice, Fira Sans - Antistatique
Art direction: fonts details, Fira Sans - Antistatique
Art direction: font use in the interface - Antistatique
Art direction: color palette - Antistatique

We’ve therefore proposed an interface that combines a strict construction with a charming “je ne sais quoi”. You'll find the information and we'll charm you along the way.

Again, we’re not starting this project from scratch. The City of Geneva has already a solid styleguide we can work on. We therefore made sure it extends online and can be expanded. All the mockups, templates, components, interactions and animations reflect these design intentions.

Interface: preview of the web design for the news page - Antistatique
Interface: preview of miscellaneous web components 1/3 - Antistatique
Interface: preview of miscellaneous web components 2/3 - Antistatique
Interface: preview of miscellaneous web components 3/3 - Antistatique

Illustrations “made for Geneva”

The footer of the site hosts a series of custom illustrations. This sympathetic and engaging illustrated landscape allows depicting the cityscape of Geneva to people passing by and to propose a refreshed look to the citizens. We made about thirty of these elements, which can be used by the team in different parts of the website. To compose new landscapes or embellish a communication detail. Some of these are even animated. We dare you to spot them of the website!

Illustrations for Geneva city website : construction principes - Antistatique
Illustrations for Geneva city website : sample for the Museum of Ethnography (MEG) - Antistatique
Illustrations for Geneva city website : sample for a couple of iconic Geneva buildings and places - Antistatique
Illustrations for Geneva city website : preview of the expanded collection - Antistatique

A collection of pictograms for city maps

When you think of a city, you most probably also think of a city map. The City of Geneva is no exception to this rule. These maps must display the numerous services of Geneva therefore we designed a custom icon collection. The aim is to bring visual consistency to information display. The second goal is to provide a foundation collection that can be expanded further as needed. You will will, of course, see a connection between the illustrations and this icon collection.

Pictograms for Geneva city website : construction principes - Antistatique
Pictograms for Geneva city website : the complete actual collection - Antistatique
Pictograms for Geneva city website : details - Antistatique
Pictograms for Geneva city website : use on a map - Antistatique

The “Que faire à Genève” newsletter

The newsletter is an important and powerful tool in today’s communication strategy for cities. Geneva has the possibility to stand out with a refreshing offer of weekend events. We composed a modular template for this newsletter. A fresh dose of information that shows readers what to do and where to go out in Geneva. You wonder what to plan? Start by subscribing to the newsletter!

“Que faire à Genève” newsletter preview - Antistatique
“Que faire à Genève” newsletter blocks - Antistatique

Handover for technical implementation

We made sure that all these design elements were well-documented, to get a smooth transition to HTML/CSS templates. We wanted to make sure that the work done so far would move forward in the given direction. We're used to coding both frontend and backend of projects, so we were able to provide the technical team with a well documented design. Of course, we had our curiosity sustained on a regular basis to make sure it was understood and well implemented.

Just below you can find an overview of the approximately 130 mockups made to document the design of this project.

Preview of the almost 130 mockups for documenting the project! - Antistatique

The "real" project begins

The new website is online, and we are happy and proud of it. It's time for the people of Geneva to make this new platform their own. It’s common for us to say that the projects begin once they have been pushed online… Now that everyone has access to it, the website will evolve and grow, like a child that’s leaving the family nest. Have a good trip, see you soon!

The Antistatique team