The Hague Peace App
Introduce the theme “Peace and Justice” to tourists and locals for The Hague International Zone
The Hauge Peace App
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

Interaction design
Visual design
Prototyping (javascript)

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.

The Hauge Peace App
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.

The Hauge Peace App
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.

The Hauge Peace App
Wireframes

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 backwards. 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.

The Hauge Peace App The Hauge Peace App
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.

The Hauge Peace App

App key screens design

The Hauge Peace App

App icon design

The Hauge Peace App

App logo design

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-fedility with precise graphics and animations.

The Hauge Peace App The Hauge Peace App