Faded Ink - Charles Dickens Exhibition

Interactive Touchscreen Prototyping

This projects aims to showcase Charles Dickens’ works, life, and the place he lived with multimedia methods. We have three teams: Interaction team, movie & motion graphic team, and VR team. I chose the interaction group since interaction design is my strength. This interactive design was touchscreen based, we mainly showcased things related to Charles Dickens.

Final Presentation
Video not playing? watch from:

(You may need to zoom in or zoom out your browser)

members

Xiangyu Shi
Xiaoyi Yue
Zihui Zhai
Jia Guo
Ding Wang
Jennifer Cheng

client:

My Role

We played different roles in this touchscreen project. Some designed the UI, some contributed to illustration and sketches, some were in charge of making animations, and so on.

In this teamwork, I mainly contributed ideas and designing interactive prototype in Axure to connect all the content and buttons, and make the prototype simple and usable.

Tools

Axure

Illustrator

Photoshop

After Effects

Sketchbook Pro

Design Process

Moodboard

Idea 1

Inspiration

The inspiration for this idea came from Apple “Time Machine”.

Interaction

There are two buttons at the right side of the window which can change the year, and the window will move forward or backward accordingly.

Idea 2

Interaction

This idea utilised a “Parent Animation” to demonstrate the relationships between the timeline point and what happened at that point of time.

Idea 3

Interaction

This idea is to use the ink effect to reveal the detail page. The timeline is located at the button of the home page, users can control them by tapping the years.

Idea 4

Interaction

Users can swipe at the home page to go to different years, and click the “more” button to see the details. In the detail panel, visitors can view different tabs such as “event”, “life”, or “his works”.

Lo-Fi Prototype

Detail Page Building Sketches

There were different buildings constructed at different period of time, so I drew two of them and applied them to the detail page design

Detail Page Design

Problems of the idea 1-4

The interactions and UI of the ideas above can clearly demonstrate Charles Dickens’ works, life, and events. However, as a project for the exhibition, the 4 ways of demonstration are not attractive and engaging. What visitors can do is to change the time points and read the text, it lacks interesting interactions, they will lose interest soon. Thus, we came up with a better idea.

Final Idea

The final idea mainly showcases Charles Dickens’ life, homes he lived, routes he walked, world events, and urbanisation of London in different periods. People can select different periods at the timeline navigation, meanwhile, they are able to choose different content at the content navigation, such as “life & events”, ” homes he lived” and “routes he walked”. In addition, while changing different periods, the map will show the urbanisation of London with animation; The events are also shown as interesting animation on the map.

Sketches of Interaction

  • Launch Screen

We used fog as foreground of the launch screen. After clicking “Explore”, the fog will fade away and reveal the Home page.

  • Home Page Structure

There are 2 main navigations. The timeline navigation and content navigation.

  • Content Navigation

There four items in the content navigation: Logo to go back to the launch screen; Life &Event to see what Charles Dickens experienced and what happened around the world; Charles Dickens’s Homes shows the places he lived; and Walks presents his walking route in London.

Visual Design

  • Iteration of  Map Illustration

Version 1

Version 3

Version 2

Final Version

  • Icon Design
  • Building Illustration

National Gallery

Westminster Abbey

Victoria and Albert Museum

University of London

Big Ben

  • Launch Screen Design & Reveal Animation

In the launch screen, we utilised a fog effect. The inspiration came from the air condition of London in that period, which was usually called London the City of Fog. In addition, the fog floated above the map, which can also give people a sense of depth when they tap the “explore” button.

  • Home Page Design

Prototype Making in Axure