top of page

Redesign Hubway

Promoting brand stories with data-driven user experience design, from strategy to interface.



Feb 2018- Apr 2018

(it is part of my thesis)



Individual project

Interaction Designer

Visual Designer




Journey Mapping

DataViz Model


Usability Testing






Pens / Paper  

1:1Mockup Print

- tell the brand story -

And Apply It to Everywhere

- the challenge -

Can We Combine Branding into User Experience Design?

Product Research

User Research


& Ideation

Lo-fi Design

& Test

Hi-fi Design

& Evaluation





User review


Product goal,

Brand promotion,

Current interface


Pain points,

Customer journey map,

Area of opportunity,

Data Vusualization


Wearable design vision,

Pen & Paper,


Test with 1:1 Paper​

Visual design,

Interaction design,

Test with InVison,

Twist UI details

Data-driven brand stories

in various platforms,

Vision unify,

Art director



branding strategy


- what is hubway -

Hubway is a public bike-share program with 1,600 bikes and 180 stations. It's owned by the Great Boston area and operated by Motivate. On May 18th, 2018, Hubway was renamed to BlueBikes. Before Hubway was renamed, it achieved 5 million rides with 9,206,640 miles ridden and 6,626,551 Lbs of CO2 reduced, 1,721,460 gallons of gasoline saved. 


- research & the problems -

01. Current Product Research: The Carbon Footprint Saving Story.

But the Great idea Is Too Weak to Be Seen...

The data on gas and CO2 saving on interfaces does not stand out and does not keep consistency visually or logically;


For the whole experience, something or to say data demonstration is missing before the riding and after checking the record, as a data-oriented company, can Hubway use data to connect the whole customer journey to make them loop in a virtuous circle? 

02. User Research: Pain Points in Scenarios

User Interview

I interviewed 5 people who take Hubway as a daily commuter and 1 of them riding Hubway for fun as a city traveler. When preparing the script, I set two groups of question: one was to ask if they noticed the "green" stats on their screen and if they love the story. Another question was about their experience with Hubway, and how they feel about the current interface across platforms like mobile and website.​

Pain Point: Time Checking When Riding

It is inconvenient to take out the phone while riding.

It's just a timer, this function can be replaced by a clock.

Yes, Hubway provides an in-app timer.

But how can I track my ride with the phone when I am riding? It is dangerous! 😱


----Felde, 55, Somerville

Pain Points: Record Checking after Riding ​

Putting data in boxes doesn't make them clearer.

I want to share my "go green" data, but too much private info here.

Actually I am not sure what is this record page for... since I can check these statistics on my phone... 😅


----Kate, 27, Cambridge

- improve the storytelling-

01. Find a Common Ground in User Goals and Business Goals


Checke riding time

Contribute to environment

Social impact


carbon footprint

saved via




Engage users

Product awareness


Users goals

Business goals

02. Translate Riding Time to an Imagery of “go Green”


The concept on the right is to illustrate the carbon savings of biking in terms of how many trees it would take to generate the same savings. The formula is:  

Duration *Average speed of bike = total distance(mile) 

Total distance / vehicle average emission CO2 per mile = total CO2 emission  

03. How Can the Data Stories Better Engage the Customers?


After I have the data imagery, several data-driven stories can be generated from the Hubway dataset. These data stories can be designed in a consistency visual system and can be added to support and connect the whole user journey, so as to make them to a virtuous loop system. I was inspired by Nir Eyal's HOOK model, and started to think how I can build a habit-forming product with storytelling data viz.

External: notifications

Internal: user wants to ride

and make a contribution to the environment

Social reward: sharing the riding record on social media

Individual reward: health, fulfillment and proud of riding.

Time spent on riding, sharing

Just riding!

Then I combined with the data-driven imagery of planting a tree to the whole hook system to make a virtuous loop, to make it as a habit-forming system. More importantly, more users' sharing could also form a public recognization on the brand story, it is a brand promotion by users themselves:


Hook loop

Plant a tree!


Plant a tree gradually

through riding process

Check how many trees "planted" by riding


Share the visual-attractive riding record

Branding in the users:

willing to plant trees by riding more bike under public recognization

Branding in the public: public recognization of riding = contribute to the environment  



01. Conceptualize: A Data-driven Solution for the Timer:

Users concern the time most, why don't we put the time tracker on a smartwatch --- a natural time carrier


Make the tree bold! Not just show the boring number


Involve the users in the story of feeding a tree, tell the user: "You are a city hero!" 


02.Sketching with Pen & Paper


Entering the design phase, I first read how Google designs a wearable interface. and Apple watchOS design themes. Some keywords I guide through my design: timely, glanceable, actionable, easy to tap, and time-saving. I kept in mind everything I had collected so far- pain points, and the new flows. Then I started roughly sketching out concepts:

03. User Tests: Size, Readability and Safety 

I was able to obtain some heuristic feedback from my peers. To ensure every visual element is clear and user-friendly on the watch, I sketched and tested in the 1:1 Apple Watch scale. 


According to the Google wearable design guideline, I kept asking the question about user safety: do you think the size of time/icon is OK for viewing and tabbing when you are riding on the street? Secondly, I carefully observed users' understanding of the progress of "growing a tree", and whether the goal-oriented progress would influence users' attitude/efforts toward their riding journey. 

04. Main Features and Wireframes

A riding target is set for the users: motivate more ridings

Let users see how their riding data “feed” his tree gradually when riding

Users will get a sense of accomplishment by using Hubway

Eye-catching and reliable data record encourage users to share

These steps were moved to mobile and web page after the user test.


05Visual Design and High-fidelity Design


User Flow and Notifications


User Stats Checking


Timer: make the Riding Process as a Story


Design Details

Simple information on screen,

visual groupings,

full width of the screen,

design for legibility.


- go across devices -

As in the Hook model and virtuous loop, I discussed how a brand story could be promoted by data-driven stories. For this project, to design a watch-based time tracker is just the first step to engage users in the story, as they can participate in the "grow tree" process with their riding action.


To activate the whole Hook loop, I apply the story visually across Hubway platforms, such as the stats check page, to encourage users' sharing on their social media; and even a data-driven advertisement for wider social impact!  

Make Each Riding as a Part of A Socially Attractive Story


User tests indicate that everyone is willing to share this on their social media!

Go to the Public


When we tell the story with the true data, the outcome could be more reliable and attractive - since it is produced by the real local citizens around us. It is the data-driven story

Actually the above is part of my graduation thesis Data-driven Brand communication. In my thesis, I am so proud that I have created a storytelling model that can assist in the decision-making process of designing various visual stories for branding. For more details about the whole process, you are welcome to explore more here!

Go broader

- Reflection -

Thank you for reading such a looooong post! This is a project I gave my best tried innovation and adventure in combining User experience design, Data visualization, and Brand promotion with Design thinking during the whole process. I learned a ton from this project. I can't achieve this without the mentor and help from my thesis advisor Prof. Miso Kim and Prof. Nathan Felde, and all the peers in our Information Design & Visualization program.

Think widely and at a high level

I found things have become clearer in a natural system when I think at a high level and go across disciplines. I am so grateful that I had the courage to do this design and learned a lot from the wises.

Users and products are not standing opposite
I am glad I keep the design process user-centered, and tried to push forward from a product branding perspective. When we found the interchange, a virtuous loop and win-win scene could be created.

My first watchOS design, it was really User-Centered 

It is my first time to design for wearable --- as it is a natural time career especially for tracking sporting.

Not surprisingly, watch interface has its own unique requirements. I found it needs more attention to focus on users, as it is designed around the timely core actions of suggesting and demand. 

Previous:Design @ Philips Lighting

Mobile & Web UI + UX Design

Next: Smart Agent

Service Design, UI/UX Design

bottom of page