icbc e-book project process book

28
ICBC Learn to drive smart Conceptual E-book Process book Lois Wang + Helen Lai COMD 415 ebook conceptualization

Upload: lois-wang

Post on 28-Mar-2016

230 views

Category:

Documents


2 download

DESCRIPTION

The process book for ICBC conceptual e-book

TRANSCRIPT

Page 1: ICBC E-book Project Process Book

ICBC Learn to drive smart

Conceptual E-book

Process bookLois Wang + Helen Lai

COMD 415 ebook conceptualization

Page 2: ICBC E-book Project Process Book
Page 3: ICBC E-book Project Process Book

Project Abstract

Thesis Statement + Concept

Research

Brainstorming

User Flow

Prototype Testing

First Generation

Table of Content

04

06

08

12

14

16

20

Final Outcome 22

Page 4: ICBC E-book Project Process Book

4

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 “how-

to” 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.

Page 5: ICBC E-book Project Process Book

5

Page 6: ICBC E-book Project Process Book

6

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.

Page 7: ICBC E-book Project Process Book

7

Page 8: ICBC E-book Project Process Book

8

Research

We looked at several applications and websites, and were inspired

from ICBC iPhone app, facebook iPad app and the website of

Exposition Monet.

Page 9: ICBC E-book Project Process Book

9

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.

Page 10: ICBC E-book Project Process Book

10

Page 11: ICBC E-book Project Process Book

11

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.

Page 12: ICBC E-book Project Process Book

12

Brainstorming

We de-constructed the ICBC guide book, and brainstormed on

how to present different content in a more understandable and

engaging way.

Page 13: ICBC E-book Project Process Book

13

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.

Page 14: ICBC E-book Project Process Book

14

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.

Page 15: ICBC E-book Project Process Book

15

Page 16: ICBC E-book Project Process Book

16

Prototype Testing

We made a set of paper prototype, and had our classmates

tested on.

Page 17: ICBC E-book Project Process Book

17

Home page

Table of content page

Chapter 2 page

Page 18: ICBC E-book Project Process Book

18

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.

Page 19: ICBC E-book Project Process Book

19

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.

Page 20: ICBC E-book Project Process Book

20

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.

Page 21: ICBC E-book Project Process Book

21

ICBC building trust.driving conficence.

Log in | Sign in |

Practice test Learn to drive smart Objectives

ICBC building trust.driving conficence.

Log in | Sign up |

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

04Rules of the road

Chapter

05 See-think-do

ICBC building trust.driving conficence.

Log in | Sign up |

Learn to drive smart

Chapter 02 You and your vehicle

Adjust for safety

Hand controls

Foot pedals

Control panel

Pre-trip check

Periodic check

Driving and the environment

Pre-trip checkContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classi-

cal Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor

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

tur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,

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

Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Tutorial

Home page

Table of content page

Chapter 2 page

Page 22: ICBC E-book Project Process Book

22

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.

Page 23: ICBC E-book Project Process Book

23

Wireflow

Page 24: ICBC E-book Project Process Book

24

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.

Page 25: ICBC E-book Project Process Book

25

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.

Page 26: ICBC E-book Project Process Book

26

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.

Page 27: ICBC E-book Project Process Book

27

Page 28: ICBC E-book Project Process Book