Toronto Commute

Printed Infographic, UI/UX (Tablet)

Acknowledging that the second-biggest monthly expense in Toronto lies in transport, This project explores Toronto through its civilians' commuting expenses —— whether it be private or public transportation.

ROLE

Data Visualization, Branding, UI/UX

Data Visualization, Branding, UI/UX

TOOLS

Illustrator, Photoshop, Risograph Printing, Sketch, Principle

TIMELINE

January - March 2018 (3 months)

January - March 2018 (3 months)

proj1-splash-1-0

 Dear Toronto,
Give me a Brake!

PRINTED INFOGRAPHIC

PRINTED INFOGRAPHIC

Owning a car is a dream for many, but are youths fully aware of its cost? And how can I develop youths' interest in the high cost of auto insurance rates?

Choosing Toronto neighbourhood as the main topic, I delved deeper on Toronto auto insurance rates as a starting point. The goal was to raise awareness to the group of people that are least exposed to the issue but who desired car ownership the most — youths.

Owning a car is a dream for many, but are youths fully aware of its cost? And how can I develop youths' interest in the high cost of auto insurance rates?

Choosing Toronto neighbourhood as the main topic, I delved deeper on Toronto auto insurance rates as a starting point. The goal was to raise awareness to the group of people that are least exposed to the issue but who desired car ownership the most — youths.

infoPrint-01-03

VISUAL STYLING

I selected the font OCR A Std to mimic the blocky, smooth curve characteristic of cars. FF DIN Pro was used to pay homage to the industrial strength of the automobile industry, and Berthold Akzidenz Grotesk for its good readability at small sizes.

infoPrint-visualStyle-01

LAYOUT EXPLORATION

infoPrint-02
infoPrint-03
More close-ups of the risograph infographic poster.
Photography: Yasmin Mukino
More close-ups of the risograph infographic poster.
Photography: Yasmin Mukino
More close-ups of the risograph infographic poster.
Photography: Yasmin Mukino
More close-ups of the risograph infographic poster.
Photography: Yasmin Mukino
infoPrint-04

Ways to go to Work

Ways to go to Work

EXPANDED VISUALIZATION

Branching out from the issue of high auto insurance rates, Ways to go to Work is an interactive iOS infographic for iOS tablet devices. Targeted towards working young adults, it provides the best means of transportation to go to work based on one's unique circumstances.

01 | ONBOARDING

Comparative Stats

A brief analysis of recent findings attached to commuting, conducted through a comparative slides format to draw readers’ attention.

feature-two-toronto-commute
02 | CREATE PROFILE
02 | CREATE PROFILE

Seamless Data Input

Receive a personalized result of Ways to go to Work by first easily inputting a few information about yourself.

feature-3
03 | MONTHLY OVERVIEW
03 | MONTHLY OVERVIEW

Get Personalized Analysis

Easily tap on each segment to find out how much time and money spent based on the distance of your commute.

feature-5
04 | PROS & CONS

Make Informed Decisions

What better ways to see what's best for you than a pros and cons list? Users can intuitively and simultaneously interact with the data from both sides.

feature-6

IDEATION

Initial ideas, user journey and screen flow of the website.
After drawing them, I had an idea of what information to put.

ideation-1

VISUAL STYLING

VISUAL STYLING

References were drawn from the pre-existent visual language from the city's signage, car plates, and typography. I chose Barlow Condensed because of its shared qualities with the state's car plates, highway signs, and Univers 55 Roman for its good legibility. Both typefaces are part of superfamilies, and this is useful to establish a typographic hierarchy sufficient for the extent of this visualization.

Since the target audience of the interactive tablet is working adults, the hue of the blue is darker to signify a more serious tone in comparison to the playful, tongue-in-cheek infographic poster.

infoDigital-visualReference-1
infoDigital-visualStyle

REFINEMENT

A wide variety of ways of the content layout and navigation were explored in this project. For instance:

  • general layout — horizontal or vertical tablet orientation?
  • Create Profile screens — one section per screen or to put all four sections on one screen?
  • Onboarding screens — are 'next' / 'previous' navigations necessary?

KEY TAKEAWAYS

God is in the details
Whether it be print or digital, paying attention to details always pays off.  Consistency and cohesion through the use of colour, typography, navigation, and animated interactions within this project can only be achieved because of these details.

Go beyond the comfort zone
As my first information design project, I am glad I was able to explore beyond the print medium. I realize how delightful an experience can be through sensible use of animations.

Selected Works

Toronto CommuteInformation Design (Print, UI/UX)

YUSC RebrandMotion Design, Wayfinding

Bauhaus.SemesterGenerative Design, Printed Interfaces

SteeyrApp Design