The Brief
The Challenge
JR East's previous app was struggling to find its focus for users. It was frequently filled with information from various groups within the organisation in an effort to gain internal support for the project. Those efforts created an intranet-like experience that was challenging for end users to navigate, despite useful information being available if it could be discovered.
“We want to provide more Human-centered services and move from just satisfaction to a better quality of travel”
— Takayuki Matsumoto, JRE Manager
The Process
We had 13 weeks to get from 0 to MVP before working with JR East's development partner, NTT Technocross. We incorporated Agile thinking into our Design Thinking process, breaking the project duration into cycles, with each week focused on either ideation, design, or iteration.
The first 'Explore Cycle' was where we could go very broad with our ideas and thinking, and try to collect as many perspectives from users and clients as possible.
As we identified key needs and understood the technological limitations from JR East, we then dove into the 'Design Cycle' to focus our efforts on the more promising directions. We created prototypes for validation and to test new forms of interaction within the train app space.
Finally, the 'Refine Cycle' solidified our direction in alignment with our clients and focused on finalising key user journeys, design details, and documentation to be used by NTT.
Explore Cycle
The ideas that we prototyped during this cycle revealed the challenges of JR East playing in the saturated train related app market in Japan. To understand how people usually search for journey navigation information, we had a number of prototypes that felt similar to what users may see in other similar experiences. But without any clear potential added value that could come from JR East, users unanimously told us that there would be no reason to move away from their current behaviours. That gave us the hint to learn more about what users value in their interactions with JR East at large both physically and digitally.
“Asobigokoro ga nai”
"I mix and match apps for different information"
"I've hid in a toilet in Shinjuku station before just to calm myself and have a moment to find my way"
With the scale of the train system and massive development projects happening at high traffic hubs, having the accurate information relevant to each user was a key insight and opportunity.
At times, using quick sketch fidelity prototypes was enough to convey ideas, and also gave users the opportunity to build upon them with their own ideas.
Design Cycle
We learnt from research that most users only tend to spend extended periods of time using train navigational apps when they travel for leisure or to less familiar locations. Otherwise, they want information that affects their commute. Being the biggest provider, JR East was in a great position as the source of information, but had yet to deliver it to users at their contextual level. Ideas in this cycle started to consider both commuters and explorers, to identify when and how information should be presented to users.
“I'll probably stop following the
official twitter account for this”
"I would only want maintenance information
on the stations you will use”
"Knowing the actual accident info reflected on your journey choice is great”
During this cycle, we also adopted a new prototyping tool, Origami Studio, that would allow us to create more realistic interactions and even allow us to use sketch-based illustrations, as less needed to be imagined by users during testing.
Refine Cycle
With a focus on JR East's largest user group, daily commuters, our final efforts went into finalising the hierarchy of information, such as making timetables and status updates accessible from the start, and allowing users the means to search for journeys, but save them for continued usage and updates. The previous cycle introduced a new paradigm for selecting journeys with a vertical timetable, and here we refined how that information was presented and validated what information informed decisions through a final round of testing.
The strategy and all of the design assets were documented into bilingual v1.0 styleguides to give the developers a starting point for creating UI and key user flows that could be expanded upon during beta testing and eventual release.
“Can I name my routes in the way I want?”
"I want this about all train company, and I also want bus information, plus monorail that I use…"
“Very simple, convenient, easy to use”
Presenting each train cars congestion status, and platform layout information was proposed to allow users the choice of where to ride from
The previous JR East app held information about their non-train offerings, so we proposed exploring microinteractions to take you to a dedicated Exploration experience.
Outcomes
IDEO Tokyo collaborated with Pivotal Labs' Tokyo office to transition from design to development, with a member of our team present to maintain the intended direction. JR East and their original development partner, NTT Technocross, spent 6 months developing the capability to manage the product independently, then spent a year stealth-testing the app on iOS and Android before eventually replacing the previous product with this version. With our initial guidance and experience working alongside Pivotal, the client restructured their team to accommodate the new direction and establish a culture of frequent testing, iteration, and app updates.
After launch, the app downloads rose from 3 million to 6 million users. It was also regarded as a key case study for JR East's transformation in providing more MaaS offerings.
