CookUp!
Redesign Hubway
Promoting brand stories with data-driven user experience design, from strategy to interface.
Redesign Hubway: Data-driven User Experience Design
Storytelling UI/UX, Dataviz, Branding
Background: storytelling is a classic technical approach in the advertising industry that has helped a large number of businesses achieve great success. With the popularity of data visualization in people’s daily life, there comes an opportunity for visualization designers to tell the brand stories by storytelling data visualization on various applications/platforms.
- tell the brand story -
And Apply It to Everywhere
- the challenge -
Can We Combine Branding into User Experience Design?
Product Research
User Research
Discovery
& Ideation
Lo-fi Design
& Test
Hi-fi Design
& Evaluation
Brand
Promotion
Interview,
Observation,
User review
Research,
Product goal,
Brand promotion,
Current interface
Pain points,
Customer journey map,
Area of opportunity,
Data Vusualization
Wearable design vision,
Pen & Paper,
Structure,
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
Data-driven
Storytelling
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
Visualize
carbon footprint
saved via
RIDING
TIME
Engage users
Product awareness
Branding
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:
Plant a tree!
(visually)
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
- DESIGN -
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.
05. Visual 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!
- 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.