CookUp!
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 -
A Bike Share Program
Hubway is a public bike-share program with 1,600 bikes and 180 stations. It's owned by the municipalities of 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 & Findings -
01. Product Research
Current Interface: What Brand Story Does Hubway Want to Tell?
Besides the benefits brought by cycling for individuals' health and time-saving, we can tell from the official website, Hubway is proud of its social impact as it puts "go green" in bold. Obviously, Hubway also wants to promote the "go green" idea on the interfaces. In the basic function pages such as timer and riding records, Hubway adds "gas saved" and "CO2 reduced" to tell the story of how riding can reduce carbon emissions and contribute the environment of the city on the interface:
Does User Buy Hubway's Story?
Interview: I interviewed 6 people about the question, asking them if they noticed the "green" stats on their screen and how they love the story.
Findings: all of my interviewees said that they noticed the "green" data, but, this story is hidden in the stats and does not tell a coherent narrative. More importantly, although they like the idea to calculate the "green" data and talk this idea to friends, 2 interviewees said, "I don't wanna share the screenshot on my social media, it is weird to just show off the data."
Findings: Problem From the Product Perspective
Hubway has a great idea about promoting its social impact on environment and users are also proud of it. This brand promotion could be a win-win situation. But I found users do not get a coherent narrative of product's "go green" story for two reasons:
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?
- improve the storytelling-
Can We Tell a More Convincing Story with Data Visualization?
01. The Opportunity: Data behind Hubway
During the whole biking journey from unlocking, ride to return, a huge amount of data has been recorded in different action categories.
02. Translate Customer Data 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 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
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
Check how many trees "planted" by riding
Share the visual-attractive riding record
02. User Research
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 group of question: one is to ask if they noticed the "green" stats on their screen and do they love the story. Another question group is about their experience with Hubway, and how they feel about the current interface across platforms. Below are some insights from the affinity mapping.
Findings: Problem From the User Perspective
I found people care about the riding time a lot, but they are not satisfied with the current timer and the way Hubway charges every 30 mins without notification. I grouped the pain points in two main scenarios:
Pain Points in the scenario of riding Hubway bike:
It is inconvenient to take out the phone while riding.
It's just a timer, this function can be replaced by a clock.
Pain Points in the scenario of checking the riding record:
Put data in boxes doesn't make them clearer.
I want to share my "go green" data, but too much private info here.
"Yes, Hubway provides an in-app timer.
But how can I track my ride with the phone when I am riding? It is dangerous! 😱"
"Actually I am not sure what is this record page for... since I can check these statistics on my phone... 😅"
- 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. High-fidelity Design Version 1
Version 1 User Test Feedbacks
Color: for the first version, I tried to apply Hubway's visual system on watch, but the result showed that users didn't mind color change on watch interface, all of them still tend to like the black background, for it is frameless and easy to glance the time with sunshine when riding a bike.
Less swipe action: some users were confused with the swipe dots under the "biking" page.
History function: some users like the history checking function, but some users said it would be better to move this to the phone --- less complex info on the watch can help users focus on one task.
06. Visual Design and Explore on Version 2
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.
- evaluation -
Although the watch-based time tracker is a supplement of the phone App, I still wanted to test if it could be understated by new users separately from the phone. So I tested with both people who used Hubway before and 2 new users.
Issue 1
Issue 2
Issue 1 is one of most frequent questions from the Hubway users, as a bike is unlocked by the phone app, the "start grow" button on the watch is confusing. Yes, it is more like a placebo button to active users' attention.
The solution: Replace the words as "start grow in 1 min", it could be tabbed or jump to next page automatically in 1 min.
Issue 2 came from the new user: there is no button to say I'm done but the trip will automatically end after returning the bike to a dock.
The solution: Make the words "ride complete" as a popout button with vibrate, and by tabbing this could bring the user to the stats checking page of this trip.
- brand promotion -
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 designing for a watch --- 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.