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.
Video not playing? watch from:
(You may need to zoom in or zoom out your browser)
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.
The inspiration for this idea came from Apple “Time Machine”.
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.
InteractionThis idea utilised a “Parent Animation” to demonstrate the relationships between the timeline point and what happened at that point of time.
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.
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”.
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.
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.
- Iteration of Map Illustration
- Icon Design
- Building Illustration
Victoria and Albert Museum
University of London
- 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