ICBC E-book Project Process Book

ICBC Learn to drive smart

Conceptual E-book

Process book Lois Wang + Helen Lai COMD 415 ebook conceptualization

Table of Content

Project Abstract

04

Thesis Statement + Concept

06

Research

08

Brainstorming

12

User Flow

14

Prototype Testing

16

First Generation

20

Final Outcome

22

Project Abstract This Project aims to create a more engaging ebook narrative using interactive story telling methodologies. A print-based book is chosen as the original source for the ebook development, which can be a children’s book, an university textbook, a “howto” manual or a “pop psych” book. The final outcome is a digital prototype, which demonstrates how the chosen interactive features and visual elements contribute to the narrative of this ebook.

4

5

Thesis Statement + Concept Our team chose the ICBC Learn to Drive Smart guide book as our original design source. We intended to create a dynamic and playful reading experience for the new drivers during their learning process. The ebook provides features such as virtual driving scenarios, learning process diagram and highlighted content sharing.

6

7

Research We looked at several applications and websites, and were inspired from ICBC iPhone app, facebook iPad app and the website of Exposition Monet.

8

ICBC iPhone app The ICBC iPhone application provides options of practicing test, viewing digital version of learn to drive smart guide book, watching videos of driving tips, and searching for licensing locations. The feature of unlocking videos is a good rewarding system that is built in this app: when the user gets full marks in the test, an entertaining video will be unlocked to the user as a reward.

Since the guide book is not an easy book to read, an encouraging feature is needed to keep readers’ attentions.

Facebook iPad app The sliding menu in Facebook app is a really useful navigation style. It not only save the extra home page, but also creates an on-time and on-site navigation. This navigation style offers possibility of having a number of pages exist in a parallel layout, which offers a more flexible non-linear reading experience. Also because the menu can be hidden into the backstage, more space is available within every page for more information.

9

10

Website for Exposition Monet This website uses a lot of input and feedback mechanism to create a playful interactive journey for people to experience Monet’s paintings The input mechanisms include sound, hand gesture, webcam and keyboard inputs, which engages the viewer deeply into each detail.

This kind of input and feedback mechanism can be used to assist content that needs to be understand through actions. In terms of the ICBC driving guide book, this mechanism can be used to create life-like driving situations , in order to let the reader understand knowledge though “doing” it.

11

Brainstorming We de-constructed the ICBC guide book, and brainstormed on how to present different content in a more understandable and engaging way.

12

Blind spot alert We wanted to create a scenario that the user is “driving” a car passing by a truck. When the user’s car enters the truck’s blind spot, the device will vibrate to warn the user. This interactive feature helps to emphasize the importance of avoiding entering other road users’ blind spots.

Adjust side mirror It is really difficult to understand “adjust your side mirror to a proper position” by just looking at this line of text. We intended to create a scene that the user can have a view of the side mirror from a driver’s point of view. The user can also adjust the side mirror in the scene to get a sense of “a proper position”.

Control panel New drivers often get overwhelmed when first time see the control panel of a car. It is really useful to provide them a virtual control pane that is “clickable”. By press different control buttons or switches in this control panel image, the user will see how these controllers do to the car.

Game with feedback We wanted to add a little game with possitive or neggative feeback. For example, if the user can stop his/her car properlly in front of the stop sign, he/she will get a smiling face, a funny driving joke or a piece of driving tip; if the user fails to do it, he/ she will get an angry face or a video of car accident.

13

User Flow We created a user flow to see how the user navigate through and interact with the ebook. We designed the ebook into three parts–practice test, learn to drive smart (book content) and more (reward videos and personal learning statistics). The practice test section is linked to ICBC online self testing page to allow users to test themselves. The learn to drive smart section is divided into ten chapters, and there are further break down within each chapter. The more section contains videos that are unlocked as rewards from online test, and personal statistics of the user’s learning progress.

14

15

Prototype Testing We made a set of paper prototype, and had our classmates tested on.

16

Home page

Table of content page

Chapter 2 page

17

Pre-trip-check tutorial page This is the outside view of a vehicle, and the car can be rotated.

The glowing parts on the car are areas that need to be checked. Once the area is checked, the glowing light will change from red to green.

Pre-trip-check tutorial page By tapping the inside/outside switch on top of the right corner, the scene will be switched into the control panel view.

The areas that have floating red triangle icons need to be checked. When the wiper controller is selected, a zoom-in view of the controller will pop out. The user can switch the controller by swiping up and down, and will see the wiper response to it.

18

In-class prototype testing The participants really like the experience of switching the controller to activate the wipers. However, they found there is disconnection between the chapter pages and the interactive activity pages: the first half of the ebook prototype is too static and book-like, while the second half of it is so interactive and playful. What’s more, the participants prefer the glowing highlighting idea more than the triangle icon idea, because the former one indicates the areas more clearly than the latter one.

19

First Generation During the design of the first generation, our team focused on the visual aspect. We used the same colour as ICBC official colour to keep consistency, and used decorative photos to create a real-life driving environment.

We presented it to the class and got very useful feedback. The layout of the ebook is much more like a website instead of an ebook. The overall look is really clean and official, but is a little bit too static that it loses the interests from the users. The interactive elements that we wanted to build in should be moved a little bit to these three pages, in order to bring the fun through the whole ebook.

20

ICBC

Home page Log in | Sign in |

building trust. driving conficence.

Practice test

ICBC

Learn to drive smart

Objectives

Log in | Sign up |

building trust. driving conficence.

Table of content page

Learn to drive smart

Chapter

01 You in the driver’s seat Chapter

02 You and your vehicle Chapter

03 Signs, signals and road markings Chapter

04 Rules of the road Chapter

05 See-think-do

ICBC

Chapter 2 page Log in | Sign up |

building trust. driving conficence.

Learn to drive smart Chapter 02 You and your vehicle Adjust for safety Hand controls

Pre-trip check Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor

Foot pedals

at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consecte-

Control panel

discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de

tur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Pre-trip check Periodic check

Tutorial

Driving and the environment

21

Final Outcome We decided to blend the practice test and learn to drive smart sections together with a linear narrative. The objectives section will be designed into a sliding menu as a side information. Also we created a personal learning chart to show the user his/her learning progress.

We made a new wireflow for the ebook: The first page is the ICBC logo followed by a sliding out page of log in/sign up. Once the user log in, he/she will be given a learning progress chart. On the same page, the ten chapters are listed for navigating. When one chapter is selected, this page will sliding away to the left, and the text will appear. We added a linear narrative under the text to show further break-down sections under this chapter. The test will appear at the end of each chapter, where the interactive features will be applied. Once the user finished the test, he/she will see a growing portion on their learning chart, and they can compare their chart with other users by pulling out the side page again.

22

Wireflow

23

Side menu The side menu contains two parts—one is the table of content, and the other is a personal learning chart. The table of content can be scroll up and down for users to access different chapters.

The personal learning chart is a diagram that shows the user’s learning progress from three different aspects—Basic knowledge, Observation and Decision Making. Each time the user takes a test, a certain portion will grows in each aspect, and the user can have a overall sense of which part he/she did well. The user can click the area of each aspect to view more detailed information. Also, users are able to see other learners’ charts and their learning time periods. This function aims to enhance the users’ learning interests though comparison.

24

Main content page At the bottom of the main content page, there is a linear narrative shows breakdown sections under each chapter. The small car icon, driving on a tarred road, represents the reader, and the bubble signs indicate the sub titles under this chapter. This design intended to create a playful environment by mimicking a real-life driving image.

At the top of the page, basic tools are offered such as search bar, bookmark, sharing, info and setting. We also embedded a highlight function and a view others’ highlights function at the right top corner of the gray frame. The user can highlight content he/she thinks is important and share with other users, as well as view other users’ highlights.

25

Test page At the end of each chapter, there is a set of test. We created an interactive testing style, in order to make the test more effective and engaging than just plain text questions. In the above case, the user is asked to adjust the left side mirror into a proper position using the controller on the right side. The user is also able to re-take the previous question or skip to the next one.

26

27