The Hague Peace App

Introduce the theme “Peace and Justice” to tourists and locals for The Hague International Zone

Overview

Initiated by Museon, a museum for culture and science in The Hauge, this app is meant for introducing the theme “Peace and Justice” by taking both residents and tourists on an interactive tour of international buildings and historic sites in The Hague’s International Zone.

In the app, users can find out how these international organizations are working to achieve world peace and see what goes on inside their offices. The app will take users to places like the world-famous Peace Palace, the OPCW (Organisation for the Prohibition of Chemical Weapons) and the World Forum, where Obama, Ban Ki Moon and other world leaders met on 2014 March to discuss nuclear security. Through stories and walking tour guidance, users can put themselves in the shoes of famous peacemakers like Martin Luther King, Nelson Mandela and Gandhi.

Time

06/2013 – 07/2013

Role

Sole designer

Design process

The design process of this project can be illustrated in the following graph. I took the lead from step 3 to 7, making the design deliverables while communicating internally with PM and developers and externally with the client.

Persona’s and user stories

With the client’s participation, the team firstly created 5 persona’s that consist of a middle-age family-oriented engineer, a well-educated Japenese business traveler, a laid-back retiree, a teenager boy who’s active on social media, and a hard-working business owner. They are all potential users of this app and thus their lifestyles, behaviors and devices they use were thoroughly discussed and described. The result led to the user stories that explained the needs and wishes of these users followed by the possible app features. All stories were prioritized into three lists: 1. must have; 2. Should have; 3. Nice to have, which were considered as the requirements of the app and the basis to continue the project.

Mood board
Flowchart

Based on the persona’s and user stories, the flowchart were created to demonstrate the main structure and the content of the app. The client team, including both marketing and techinal professionals, was closely involved in this stage to make sure all stakeholders are on the same page about the scope and feasibility of the proposed features. In this case, the main features are a map with POIs (Point of Interests), the spontaneous quizzes related to POIs, the latest news and events, and the general background info and stories.

Wireframe

In the wireframes, all discussed features were translated into screen-by-screen solutions with a logical flow that interlinks each other. In the graph, the blue lines stand for moving forward and the red lines mean going backward. By following the lines, the interaction of the real users with the app was simulated. In this stage, the effort in the iterations was made to check if all the discussed features are included and figure out if the flow makes sense to users.

Visual design

Basically the visual design is the screen-by-screen pixel-perfect visualization of the wireframes in detail. Blue and white were chosen as the main colors because they can be universally associated with the theme “Peace and Justice”. The “dove symbol” was designed to strengthen the identity of the app. The icons were kept light and refreshing to balance the heavy and inconvenient topics.

App key screens
Iconography
App logo
Prototyping

The clickable prototype was made by Framer, a prototyping program that allows users to animate elements in Photoshop by writing Javascript. The purpose of this prototype was to communicate the unconventional transitions designed in the app with developers. Therefore, it was made in high-fidelity with precise graphics and animations.