icbc e-book project process book
DESCRIPTION
The process book for ICBC conceptual e-bookTRANSCRIPT
ICBC Learn to drive smart
Conceptual E-book
Process bookLois Wang + Helen Lai
COMD 415 ebook conceptualization
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
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.
5
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.
7
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.
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.
10
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.
12
Brainstorming
We de-constructed the ICBC guide book, and brainstormed on
how to present different content in a more understandable and
engaging way.
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.
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.
15
16
Prototype Testing
We made a set of paper prototype, and had our classmates
tested on.
17
Home page
Table of content page
Chapter 2 page
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.
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.
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.
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
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.
23
Wireflow
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.
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.
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.
27