Ways to go to Work is a standalone initiative concept that helps working millennials spend their money optimally on their second-biggest expense: commute. 

TYPE

TYPE

UI/UX, Data Viz
UI/UX, Data Viz

TIMELINE

TIMELINE

6 weeks
Feb-Mar 2018
6 weeks
Feb-Mar 2018
Preview_GIF_TO_2

Context

This project came out from an information design course. I was tasked with creating an expanded data visualization that addresses an issue around Toronto neighbourhoods.

RESEARCH

Energy Depleting

RESEARCH

Energy Depleting

Commuting to work is a necessary evil. However, the unpredictability and lack of control drain energy, so much so that it impacts work productivity.

Commuting to work is a necessary evil. However, the unpredictability and lack of control drain energy, so much so that it impacts work productivity.

Hidden Cost

There are many things go unconsidered when choosing our commute. Gasoline, time, maintenance, and depreciation value to name a few. It is challenging to do the mental calculations on them for a repetitive activity like commuting to work.

Disdains Personal Finance

Millennials ranked ninth on bank marketers’ priority list, so most millennials show little interest in them: study suggests that only 27% of the generation have sought professional financial advising.

CHALLENGE

How can we encourage working young adults to assess their second-biggest monthly expense based on their unique circumstances?

How can we encourage working young adults to assess their second-biggest monthly expense based on their unique circumstances?

Approach

Ways to go to Work intends to minimize the cognitive load on the topic of money starting from their basic necessities. By making the hidden cost visible in a breeze, users obtain a sense of congruity and wisdom to begin taking control of their finances. I will use the following strategies:

OBJECTIVITY

providing users quantitative data on indicators of commute such as time, distance, and cost. 

CURATION

Showcasing data to inform, not to overwhelm.

DELIGHT

Aesthetic appeal and micro animations contribute to a frictionless experience that only needs users’ minimal effort.


Structure

I wanted to create a data storytelling experience to make commute expenses less daunting. Imagining wireframes as storyboards and flowcharts as scriptwriting helped me emphasize the storytelling aspect and the content as first and foremost.

sketch-storyboard
to-site-map-1

Reframing flowcharts as character dialogues helped me realize there were many things to consider for each flow: public transport result, park and ride, and car result.

Considering the tight timeline, I focused on developing public transport results flow since I have a time constraint and more familiarity with it.
to-transition-iA
to-iA-1

Visuals

For the visuals, the pre-existent visual language of the city's signage and car plates is implied using typography.

to-visuals
DESIGN

Taking Concept to Form

001 ONBOARDING

Curated quantitative data and minimal navigation provide a reliable narrative that can be understood with minimal effort, creating a sense of intrigue.

In order to maintain users’ retention rate, attention was given to creating consistency using the navigation details.

to-design-01-onboarding
to-design-02-formdesign
002  FORM DESIGN

Questions and input fields with an overarching goal of obtaining an optimal commute to work make personal finance less daunting.

The following on the left are efforts in breaking down the form and figuring out what information is most relevant to put on the screen.

003 MONTHLY OVERVIEW

A big picture of commute expenses to ease the cognitive load and mental calculation for the users.

Version A is the monthly overview as an extension of the form, whereas Version C puts the section on the same information hierarchy as the pros and cons section.

to-design-03-monthlyoverview
to-design-04-prosncons
004  PROS & CONS
004  PROS & CONS

The side-by-side comparison is a suitable method to easily enhance insight.

Statistical modes of visualization are gradually improved with experimentation on layout and usage of color, accompanied by some content creation. 

to-transition-solution
SOLUTION

Public Transit Flow

Ways to go to Work is a standalone infographic website that can be accessed on devices that the working Millenial generation prefers: mobile. 

Ways to go to Work is a standalone infographic website that can be accessed on devices that the working Millenial generation prefers: mobile. 

001 ONBOARDING

Comparative Stats

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

feature-1-comparative-stats
feature-2-form-design
002 CREATE PROFILE

Optimised Data Input

Optimised Data Input

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

003 MONTHLY OVERVIEW

Get Personalized Analysis
 

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-3-personalized-analysis
feature-4-prosncons
004 PROS & CONS

Make Informed Decisions

Make Informed Decisions

Users can intuitively and simultaneously interact with the data from both sides.
 

to-transition-takeaway

Takeaway

With Toronto as a big city that puts an emphasis on finance, I hope this brings awareness to the young working citizens on taking control of their personal finances starting from their commute expenses.

A free, personalized, and mobile add-on service like Ways to go to Work as part of the banking experience helps banks differentiate themselves and build lifelong relationships with their millennial customers.

Despite not completing fuller research prior to designing, this was a good experience in bringing a concept to life — from idea, visual compositions, and finally to motion.