Tokyo Metro:
Tourist Website Redesigned
A redesign that helps Tokyo tourists ride the subway.
OVERVIEW
A website aimed for tourists
Duration:
5 weeks
Role:
UX/UI Designer
Type:
DesignLab UX Academy
Capstone 2: Add a Feature
The Tokyo Metro is one of the busiest metro systems in the world with thousands of tourists visiting every year. The tourist website offers information on tickets and routes in English.
THE PROBLEM
Public transportation sites can induce information overload.
It is important for a public transportation website to have easy to access information in how to pay for and find tickets, how to ride, and where the stops/stations are located.
Goal of the redesign:
Make the information that users need as accessible and easy to navigate to as possible.
WEBSITE: BEFORE AND AFTER
Before
After
RESEARCH: USER INTERVIEWS
Users value convenience when traveling abroad.
The goal is to learn more about how users:
-
Plan a trip abroad
-
Navigate an unfamiliar city
-
Use a subway’s website
🔎
Users tend to plan out their trips starting with researching sights and attractions.
🚉
Users prefer affordable and convenient transportation.
💻
Users expect easy access information for routes, payments, and planning.
USER PERSONA: BASED ON USER INTERVIEWS
The Preparerd Traveler
Age: 26
Occupation: Office Worker
About:
Amanda is planning a trip abroad to a foreign country. She has never been to this country before so she wants to make sure she researches as much about it as possible before her trip. She is planning on staying in the capital city and wants to prioritize convenience in traveling and access to attractions.
Goals:
-
Plan as much of her trip prior to traveling
-
Become familiar with how to get around the city
Needs:
-
Easy to access information about navigating the city
-
Information on the sights, attractions, where to stay, etc.
Pain Points:
-
Information overload
-
Websites have many different layouts and formats which can be difficult to navigate.
GOAL OF THE REDESIGN
Make the information that users need as accessible and easy to navigate to as possible.
The redesign needs:
-
Simpler navigation and formatting
-
Relevant information
-
Clear direction on where information is located
STORYBOARD
The Story of a Prepared Traveler
Amanda is starting to plan her trip abroad.
She needs to think about where to start on her process to plan.
After some research, she now has her flights and hotel booked, and looked up some attractions.
Now, she needs to decide on her main mode of transportation while abroad which is the metro train.
However, not all metro websites are the same so she typically needs to find supplemental websites to get all of her information.
Luckily, the city’s metro website was recently redesigned and she was able to find the majority of the information she needs.
INFORMATION ARCHITECTURE
My redesign lessons the need to navigate through multiple pages.
Original Sitemap
Redesigned Sitemap
SKETCHES
-
I went through different variations of how I wanted to lay out the information.
-
My priority was to organize the information by what the company appears to be promoting more heavily than others.
-
I went into creating my high fidelity wireframes afterward.
USER TESTING
Users were able to complete the tasks and find information successfully.
Users were tasked with identifying information on the redesigned Tokyo Metro homepage, using the trip planner, and finding the appropriate ticket to buy when given a scenario.
The desktop version was used for testing.
3/3
were able to use the trip planner.
2/3
wanted to know how to pay for tickets
All users found the tasks to be straightforward.
Branding:
I kept the overall original branding from the company and created some assets to enhance the visual experience of the website.
HIGH-FIDELITY WIREFRAMES
Enhancing the visual experience
I changed the top navigation from a hamburger menu to a standard horizontal menu in order to help users find what they need easily.
I kept the train service status because it is a helpful feature that is useful to users.
I simplified the hero section from the “Welcome” statement, current date and time, search bar, and frequently visited pages to just the “Welcome” statement and current date and time.
Users expect to access a trip planner when visiting a transportation website. This trip planner has the user input their specific or general location and destination and the date and time of departure.
The trip planner uses Google Maps for directions. These directions also show what stores, shops, and/or restaurants are located inside each station, if applicable.
The Google Maps map is embedded into the website so users are able to use the map normally.
To help with navigating the area, I added an "Attractions" section in order to help the user find places to go after getting to their destination.
Home page:
-
I organized the important information in an alternating image and text pattern in order to help provide more information on each section and its purpose.
-
Used language that indicates the information on the page is for overseas travelers.
Tickets Page:
I changed the tickets page to a tabs hierarchy pattern in order to eliminate the need to navigate to multiple pages.
After
Before
Tablet & Moble Versions
%20Mockup.png)
%20Mockup%20-%202.png)
Tablet
Mobile
-
Trip planner is simplified. The user inputs their destination first.
-
After selecting "GO", more text fields will appear.
-
-
Tickets page has simplified icons to help with scannability in a smaller screen
REFLECTION
My overall process for my research and design went well. I was able to gather the information I needed and receive helpful feedback on how others plan their trips abroad. I wish I had more time to design more screens but I am pretty satisfied with my current end product.
If I were to redesign this website again, I would do more research on the cultural differences between East Asian versus Western user experience. I recently came across information about the cultural psychology of East Asian web design and how people in those countries process information differently than people from western countries. I unfortunately already completed this project and was unable to incorporate this information. Therefore, I wonder what changes I would make if I took East Asian user experience into account.
PROTOTYPE
