Zurich City Guide App

Prioritisation & Planning

Having gathered the feedback, we collaboratively ideated new features and analysed the feasibility and impact of these ideas using the Impact Effort Prioritisation Matrix.

Our intention of accommodating the needs of both tourists and locals alike guided us in our decision making. In particular, we prioritised features which would turn the app into a more practical tool.

The previous analysis of these features enabled us to define a roadmap as to which features to tackle first in the next big release.

Information Architecture

The increase and restructure of content meant that the Information Architecture had to be revised. By doing so, we also had to take any future features into consideration which we had previously defined in the roadmap.

With the goal of strengthening the accessibility and discoverability, we focused on redesigning the primary navigation, placing key features at the top of the hierarchy.

With this navigational revision, we decided to follow common design patterns and introduced a traditional bottom navigation bar. By replacing the unconventional accordion navigation, users could now orient themselves more easily and access key features with one click.

Wireframes

With wireframes we quickly opened the discussion with Zurich Tourismus on how to integrate the Zurich Card and each feature.

The challenge lay in promoting the Zurich Card without being too pushy as to deter locals or users who don't possess one.

Everyone agreed on not restricting users without a Zurich Card. Instead, indicators are applied, highlighting its benefits and thereby encouraging users in completing a purchase.

To promote the Zurich Card, CTAs were mostly placed in appropriate contexts, for example in the home screen as an introduction or in the detail pages of points of interests that offered benefits or reductions.

Designs

The app's final focus lay in the discovery and sharing of the city's sights, activities and events.

A "favourite listing" feature, allowing users to mark POIs and organise them into groups, targets both tourists and locals: while tourists can make use of it to plan their trip, locals can mark their favourite locations and share it with others.

Component Library

To ensure consistency and to scale up production, I was responsible for setting up the component library. It involved respecting the brand’s identity, while rebuilding existing and creating new components.

Using Brad Frost’s Atomic Design, the library was constructed using atoms, molecules, organisms, templates and pages. For atoms and molecules, I often created a master component, making it easier to edit spacing, layout and design across multiple components.

Dark Mode

Zurich Tourismus' brand identity is easily recognisable due to its use of diverse colours for each topic category.

With this new app release, Zurich Tourismus was very keen in releasing a Dark Mode version - a common request from user feedback.

It became our responsibility to map for each Light Mode colour style an equivalent for the Dark Mode. By doing so, we prioritised WCAG conform colours that ensure a good colour contrast.

These Dark Mode colours were later added to Zurich Tourismus' brand style guide and implemented into their website.

Guerilla Testing

The usability testers were recruited on-site at the tourist office located in Zurich's main train station (Zurich HB).

Two observers participated in the usability test: a moderator who conducted the interview (myself) and a notetaker who recorded the feedback and observations. We definedthree test cases in advance and tested each with 5 users.

The results were documented in a usability test report, including suggestions as to how we can improve the app in a future iteration.