Work

Play

About

Resume

Let’s work together

Feel free to drop me a message

kerischeng@gmail.com

kerischeng@gmail.com

© 2024 Keris Cheng. All rights reserved.

Let’s work together

Feel free to drop me a message

kerischeng@gmail.com

kerischeng@gmail.com

© 2024 Keris Cheng. All rights reserved.

Let’s work
together

Feel free to drop me a message

kerischeng@gmail.com

kerischeng@gmail.com

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

HKMTR: Station

Wayfinding System

HKMTR: Station
Wayfinding System

UX/UI Design

Wayfinding System

Client

MTR Corporation Limited

Timeline

4 weeks | 2023

Role

UX/UI Designer

Team

4 UX/UI Designers

2 Engineers

1 Product Owner

Overview

Prototype

Research
& Define

Challenge

Ideate

Design

Wireframe

Usability Test

Final Product

Final Thought

About the Project

Background

MTR aims to develop a new station wayfinding system at Admiralty station

MTR aims to develop a new station wayfinding system at Admiralty station

MTR is a leading provider of rail transport services, with a focus on safety, reliability, customer service, and efficiency. Their objective is to connect and enhance communities through innovative and sustainable services.


Our current challenge is to develop a next-generation station wayfinding system: a digital system map and exit directory display system at Admiralty station.

Problem Statement

Updating street maps and exit signs currently takes a year, leading to outdated information and difficulties for MTR users finding the right exit

Updating street maps and exit signs currently takes a year, leading to outdated information and difficulties for MTR users finding the right exit

As the current management of street maps and exit signs at MTR stations is clearly inefficient. Whenever updates are required, there is a significant waiting time. Consequently, it is challenging to guarantee that MTR users receive the most up-to-date information, resulting in difficulties for them in navigating. Moreover, the exit signs fail to reflect current events, such as the Double Duck campaign.


However, there is an opportunity to improve this process by utilizing digital and mobile channels for wayfinding, improving communication with MTR users, monetizing digitized displays, and effectively engaging end users.

As the current management of street maps and exit signs at MTR stations is clearly inefficient. Whenever updates are required, there is a significant waiting time. Consequently, it is challenging to guarantee that MTR users receive the most up-to-date information, resulting in difficulties for them in navigating. Moreover, the exit signs fail to reflect current events, such as the Double Duck campaign.


However, there is an opportunity to improve this process by utilizing digital and mobile channels for wayfinding, improving communication with MTR users, monetizing digitized displays, and effectively engaging end users.

As the current management of street maps and exit signs at MTR stations is clearly inefficient. Whenever updates are required, there is a significant waiting time. Consequently, it is challenging to guarantee that MTR users receive the most up-to-date information, resulting in difficulties for them in navigating. Moreover, the exit signs fail to reflect current events, such as the Double Duck campaign.


However, there is an opportunity to improve this process by utilizing digital and mobile channels for wayfinding, improving communication with MTR users, monetizing digitized displays, and effectively engaging end users.

Goals

Enhancing MTR users journey

Enhancing MTR users journey

Identify user pain points
Find out the pain points of MTR users when finding the exits and navigating to their destination.


Enhance user experience
Come up with solutions to solve these pain points and enhance user experience related to exit-finding and wayfinding.


Monetised opportunities

Explore on additional monetised opportunities which are beneficial and value-adding for both the MTR company and its users.

Solution

A digital solution that enhances the wayfinding experience for MTR users

A digital solution that enhances the wayfinding experience for MTR users

To enhance the wayfinding experience, we leverage the benefits of digitalization. We have digitized the system map and exit directory, and designed a web-based wayfinding assistant - FINDGO. This assistant guides users to their destinations using mobile devices, while also providing real-time information and nearby promotions.


These efforts not only improve management efficiency, but also create opportunities for monetization for MTR.

As a UX/UI Designer

My role in the project

My role in the project

I played a key role in designing part to maintain a consistent visual style for the project, including designing some graphics.


My involvement extended to user research, ideation, wireframing, and usability testing. Furthermore, I contributed to the overall prototype's development and made adjustments based on feedback.

Prototype Demo

Prototype
Demo

Research & Define

A combination of user surveys, interviews, and field observations is used to identify design opportunities

A combination of user surveys, interviews, and field observations is used to identify design opportunities

Both secondary and primary research methods are used to identify the pain points and user experiences related to the wayfinding system of MTR stations.


Our research approach includes a combination of user surveys, interviews, and field observations, mainly focusing on Admiralty station. This approach helps clarify project goals, identify design opportunities and constraints, and provides a basis for the subsequent define stage.

WHAT I DID

Secondary Research

Survey

Interview

Field Observation

UI References

User Survey

Users did not notice that there are QR codes in every exit directory, as well as their usage

Users did not notice that there are QR codes in every exit directory, as well as their usage

My team and I have conducted a survey with 50 MTR users in Hong Kong. The survey aimed to collect quantitative data and insights on the users' preferences, behaviors, and challenges when using the wayfinding system of MTR stations.


This survey helped us gain a better understanding of our users' attitudes toward a digital signage solution and guided our design during the development process.

My team and I have conducted a survey with 50 MTR users in Hong Kong. The survey aimed to collect quantitative data and insights on the users' preferences, behaviors, and challenges when using the wayfinding system of MTR stations.


This survey helped us gain a better understanding of our users' attitudes toward a digital signage solution and guided our design during the development process.

My team and I have conducted a survey with 50 MTR users in Hong Kong. The survey aimed to collect quantitative data and insights on the users' preferences, behaviors, and challenges when using the wayfinding system of MTR stations.


This survey helped us gain a better understanding of our users' attitudes toward a digital signage solution and guided our design during the development process.

User Interviews & Field Observation

Users tend to rely on mobile apps for wayfinding and QR code navigation, but there is room for improvement

Users tend to rely on mobile apps for wayfinding and QR code navigation, but there is room for improvement

We interviewed a total of 12 participants, including both local MTR users and tourists, at Admiralty and Tsim Sha Tsui stations to explore in-depth pain points, challenges, and experiences.


Furthermore, during the day, we closely observed the behaviors of 100 MTR users as they used street maps and exit directories. This provided us with valuable insights into their actual and real-time user behaviors, capturing non-verbal cues and actions that may not have been revealed through surveys or interviews.

We interviewed a total of 12 participants, including both local MTR users and tourists, at Admiralty and Tsim Sha Tsui stations to explore in-depth pain points, challenges, and experiences.


Furthermore, during the day, we closely observed the behaviors of 100 MTR users as they used street maps and exit directories. This provided us with valuable insights into their actual and real-time user behaviors, capturing non-verbal cues and actions that may not have been revealed through surveys or interviews.

We interviewed a total of 12 participants, including both local MTR users and tourists, at Admiralty and Tsim Sha Tsui stations to explore in-depth pain points, challenges, and experiences.


Furthermore, during the day, we closely observed the behaviors of 100 MTR users as they used street maps and exit directories. This provided us with valuable insights into their actual and real-time user behaviors, capturing non-verbal cues and actions that may not have been revealed through surveys or interviews.

Persona

From HK locals and tourists POV

From HK locals and tourists POV

To prioritise a user-centered approach, we have created
2 personas: Hong Kong local and Tourist.


These personas were developed based on research and data to understand their specific needs, preferences, and behaviors. We discovered that locals prioritise finding current and precise information, while tourists tend to concentrate on comprehensive information to discover landmarks and nearby destinations.

To prioritise a user-centered approach, we have created
2 personas: Hong Kong local and Tourist.


These personas were developed based on research and data to understand their specific needs, preferences, and behaviors. We discovered that locals prioritise finding current and precise information, while tourists tend to concentrate on comprehensive information to discover landmarks and nearby destinations.

To prioritise a user-centered approach, we have created 2 personas: Hong Kong local and Tourist.


These personas were developed based on research and data to understand their specific needs, preferences, and behaviors. We discovered that locals prioritise finding current and precise information, while tourists tend to concentrate on comprehensive information to discover landmarks and nearby destinations.

User Journey Map

Analyze the user's wayfinding experience, from leaving the MTR train to reaching their destination

Analyze the user's wayfinding experience, from leaving the MTR train to reaching their destination

We have created a user journey map for this MTR wayfinding system design project, which reflects the journey of an existing user.


This map shows the user's journey and highlights areas for improvement. By analyzing the map, we can understand the user's perspective and identify key aspects for our new digital solution.

We have created a user journey map for this MTR wayfinding system design project, which reflects the journey of an

existing user.


This map shows the user's journey and highlights areas for improvement. By analyzing the map, we can understand the user's perspective and identify key aspects for our new

digital solution.

Limited Client Availability & Constraints on Interactive Design Elements

Challenging to get client insights and approvals, also faced limitations on interactive design elements

Challenging to get client insights and approvals, also faced limitations on interactive design elements

Challenges in staying in touch with the client made it difficult to communicate effectively. It was hard to find the right balance between giving updates on time and not overwhelming them with too many messages. Additionally, it was challenging to get the necessary information and approvals from the client because of their busy schedule and limited availability.


However, we took a proactive approach to engage with the client. We consistently reached out, offering project updates and progress reports. By keeping the client informed and involved, we ensured that the project continued to make progress, even when they were not available.


We also faced challenges with interactive design constraints. Initially, we planned to enhance the user experience with touchable and interactive elements on the digital street map, as well as integrating a wayfinding feature into the existing MTR mobile app. However, the client preferred non-touchable designs and requested that we not use the existing app. This forced us to find a way to align with the client's preference while still delivering an engaging and seamless wayfinding experience for users.

How might we…

How might we…

How might we use the benefits of digitalization to create truly helpful wayfinding experiences for users to navigate?

How might we use the benefits of digitalization to create truly helpful wayfinding experiences for users to navigate?

To generate design solutions and concepts, we start by asking "how might we" questions.

To generate design solutions and concepts, we start by asking "how might we" questions.

How might we use digital signage to enhance MTR users' experience and satisfaction?

How might we effectively share updates about station events and promotions, attracting attention and encouraging participation?

How might we improve wayfinding information and help users navigate exits more easily?

Ideate

Ideate

Determine the core features for the
new digital solution that address the
identified challenges

Determine the core features for the new digital solution that address the identified challenges

After discussion, we all have come to a conclusion that the core features for the new digital solution should have real-time info display and improved QR code visibility for the system map and exit directory. This will reduce MTR user confusion. We also suggest a promotion section with seasonal themes to draw attention, and a web-based navigation system for a better experience.

After discussion, we all have come to a conclusion that the core features for the new digital solution should have real-time info display and improved QR code visibility for the system map and exit directory. This will reduce MTR user confusion. We also suggest a promotion section with seasonal themes to draw attention, and a web-based navigation system for a better experience.

First, take a look at the existing system map. This is my thinking process behind the ideation of a solution for the system map

First, take a look at the existing system map. This is my thinking process behind the ideation of a solution for the system map

As shown in above, navigating with a static map can be challenging. First of all, without the most updated information and a clear call to action (CTA), the QR code doesn't do much for MTR user. They are unsure of what to scan for navigation, which is a critical problem.

Ideate Solution #1

Improvement on System Map

Improvement on System Map

Information

Integration

Information Integration

Information Integration

Display real-time information about nearby landmarks/buildings or station information (e.g. exit closure), ensuring users have the most current and relevant information.

Display real-time information about nearby landmarks/ buildings or station information (e.g. exit closure), ensuring users have the most current and relevant information.

Display real-time information about nearby landmarks/ buildings or station information (e.g. exit closure), ensuring users have the most current and relevant information.

Monetise with

Local Business

Monetise with Local Business

Monetise with Local Business

Provide a promotion section for businesses or seasonal event to promote products or event, attract locals & tourists navigated.

Provide a promotion section for businesses or seasonal

event to promote products or event, attract locals

tourists navigated.

Provide a promotion section for businesses or seasonal event to promote products or event, attract locals tourists navigated.

QR Code

Integration

QR Code Integration

QR Code Integration

Enhancing the visibility of QR codes and clearly stating their purpose for scanning, navigating with mobile devices out
of stations.

Enhancing the visibility of QR codes and clearly stating their purpose for scanning, navigating with mobile devices out of stations.

My thinking process behind the ideation of a solution for the existing exit directory

My thinking process behind the ideation of a solution for the existing exit directory

As shown above, the critical problem similar to the system map with an unclear CTA. The QR code doesn't provide much value for MTR users. And I think we can utilize the blank space for a special promotional design.

Ideate Solution #2

Improvement on Exit Directory

Improvement on Exit Directory

Visual

Enhancements

Visual Enhancements

Visual Enhancements

Incorporating themes from seasonal events to attract attention, create visual interest, and encourage active participation from users.

QR Code

Integration

QR Code Integration

QR Code Integration

Enhancing the visibility of QR code and clearly stating their purpose for scanning, aiming to provide a more seamless and informative navigation experience.

I designed a logo for our wayfinding assistant,

which stands for "FIND your way and GO directly"

I designed a logo for our wayfinding assistant,

which stands for "FIND your way and GO directly"

Ideate Solution #3

Wayfinding Assistant

Wayfinding Assistant

FINDGO

Concept

FINDGO Concept

FINDGO Concept

Making it easier than ever to FIND your way and GO directly to your destination.


It is a wayfinding assistance system (web-based) that allows users to access detailed information by scanning QR codes

on signage.

Making it easier than ever to FIND your way and GO directly to your destination.


It is a wayfinding assistance system (web-based) that allows users to access detailed information by scanning QR codes

on signage.

Making it easier than ever to FIND your way and GO directly to your destination.


It is a wayfinding assistance system (web-based) that allows users to access detailed information by scanning QR codes on signage.

Improve

Navigation Experience

Improve Navigation Experience

Improve Navigation Experience

It aims to improve navigation experience by providing accurate and timely information, addressing the issue of confusion and frustration among users.

Information Architecture
Information Architecture

Information Architecture

User Flow - FINDGO
User Flow - FINDGO

User Flow - FINDGO

Design

I took a leading role in ensuring consistency and efficiency

I took a leading role in ensuring consistency and efficiency

I have implemented guidelines and two design systems (Digital signage & Mobile) that align with the existing signage and mobile apps’s typography, colors, icons and components.


Utilized low-fidelity wireframes to explore and refine design solutions before investing in detailed work.


I designed a navigation graphic for the FINDGO Call to Action (CTA). I also designed a simple graphic with text for a QR code to draw user attention and inform them about its usage.

I have implemented guidelines and two design systems (Digital signage & Mobile) that align with the existing signage and mobile apps’s typography, colors, icons and components.


Utilized low-fidelity wireframes to explore and refine design solutions before investing in detailed work.


I designed a navigation graphic for the FINDGO Call to Action (CTA). I also designed a simple graphic with text for a QR code to draw user attention and inform them about its usage.

I have implemented guidelines and two design systems (Digital signage & Mobile) that align with the existing signage and mobile apps’s typography, colors, icons and components.


Utilized low-fidelity wireframes to explore and refine design solutions before investing in detailed work.


I designed a navigation graphic for the FINDGO Call to Action (CTA). I also designed a simple graphic with text for a QR code to draw user attention and inform them about its usage.

For Digital Signage
For Digital Signage

For Digital Signage

For Mobile
For Mobile

For Mobile

Wireframe

Wireframe

Usability Test

Considering the time constraints of the project, we conducted tests using a limited sample size

Considering the time constraints of the project, we conducted tests using a limited sample size

To evaluate the user experience of wayfinding, we conducted a usability test. The purpose of the test was to assess the overall usability and experience of the digital system map, Exit directory Display, and FINDGO wayfinding assistant. 6 local commuters took part in the test.

Prioritise Tasks

Prioritise Tasks

Visibility of Final Product

Visibility of Final Product

Aim to assess the clarity, accessibility, and ease of information retrieval in our digital products through user feedback and analysis of their cognitive process. This evaluation will involve examining the digital system map, digital exit directory display, and FINDGO wayfinding assistant.

Wayfinding Experience

Wayfinding Experience

The task involves finding bus routes, locating exits, and assessing navigating effectiveness in MTR stations. This includes identifying difficulties, obstacles, and areas for improvement in the process.

Discover Seasonal Events

Discover Seasonal Events

The task includes finding events and destinations in specific areas and evaluating the impact of adding seasonal event promotions on the user experience.

Therefore, what is the feedback from the users?

Therefore, what is the feedback from the users?

After gathering all the test results, we organised them in an affinity diagram. The overall feedback on navigation and usability was mostly positive. Users found the FINDGO navigation page intuitive, and they appreciated the event promotion and nearby shops section. However, we did identify some design issues. To address the visibility problem, I made necessary adjustments based on the feedback.

Ease of Use

The navigation is user-friendly and intuitive. It’s easy to access the info I need.

Design and Layout

The QR code is not noticeable enough.

Design and Layout

The change station icon is a bit confusing.

Content

There’re quite a lot of useful info.

Content

I like how the nearest exit and estimated walking time are included.

Design and Layout

I can’t find “Exit A” sign instantly.

Display Comprehensive Information

The Digital System Map significantly improves the user experience by offering comprehensive and real-time information on various aspects. It provides up-to-date details on nearby destinations, landmarks, seasonal event (pop-up animation), and station conditions, including exit closures. Additionally, we have provided estimated walking times next to the recent exits, as users have found this information useful for their navigation plans. This enables users to navigate with confidence and stay informed throughout their journey.

Seasonal Event Promotion Section

By including a specific section for businesses and seasonal events, MTR can effectively promote their products and services. This will improve the overall experience for MTR users and potentially lead to increased engagement and
sales opportunities.

FINDGO Navigation CTA

Also added a CTA area for FINDGO to promote the navigation feature, allowing users to conveniently access extra information, exclusive offers, or valuable services. This not only enhances their overall navigation experience but also provides added convenience and value to them.

Final Product #1

Digital System Map

Final Product

This system includes the Digital System Map, Exit Directory Display, and FINDGO Wayfinding Assistant

After conducting usability testing and incorporating feedback, the development of the new MTR wayfinding system was completed. These products offer enhanced capabilities to address user frustrations and improve navigation in MTR stations, resulting in a more efficient and user-friendly wayfinding experience.

Final Product

Final Product

This system includes the Digital System Map, Exit Directory Display, and FINDGO Wayfinding Assistant

This system includes the Digital System Map, Exit Directory Display, and FINDGO Wayfinding Assistant

After conducting usability testing and incorporating feedback, the development of the new MTR wayfinding system was completed. These products offer enhanced capabilities to address user frustrations and improve navigation in MTR stations, resulting in a more efficient and user-friendly wayfinding experience.

After conducting usability testing and incorporating feedback, the development of the new MTR wayfinding system was completed. These products offer enhanced capabilities to address user frustrations and improve navigation in MTR stations, resulting in a more efficient and user-friendly wayfinding experience.

🔎 Hover for more details!

Final Product #1

Digital System Map

Digital System Map

Display Comprehensive

Information

Display Comprehensive Information

The Digital System Map significantly improves the user experience by offering comprehensive and real-time information on various aspects. It provides up-to-date details on nearby destinations, landmarks, seasonal event (pop-up animation), and station conditions, including exit closures. Additionally, we have provided estimated walking times next to the recent exits, as users have found this information useful for their navigation plans. This enables users to navigate with confidence and stay informed throughout their journey.

Seasonal Event

Promotion Section

Seasonal Event Promotion Section

By including a specific section for businesses and seasonal events, MTR can effectively promote their products and services. This will improve the overall experience for MTR users and potentially lead to increased engagement and
sales opportunities.

FINDGO

Navigation CTA

FINDGO Navigation CTA

Also added a CTA area for FINDGO to promote the navigation feature, allowing users to conveniently access extra information, exclusive offers, or valuable services. This not only enhances their overall navigation experience but also provides added convenience and value

to them.

Also added a CTA area for FINDGO to promote the navigation feature, allowing users to conveniently access extra information, exclusive offers, or valuable services. This not only enhances their overall navigation experience but also provides added convenience and value to them.

Final Product #2

Exit Directory Display

Exit Directory Display

Display Real-time

Information

Display Real-time Information

Display Real-time Information

Provide real-time updates on emergency situations, including notifications about closed exits. This feature allows users to make informed choices, navigate efficiently, and avoid any inconveniences.

Provide real-time updates on emergency situations, including notifications about closed exits. This feature allows users to make informed choices, navigate efficiently, and avoid any inconveniences.

Provide real-time updates on emergency situations, including notifications about closed exits. This feature allows users to make informed choices, navigate efficiently, and avoid any inconveniences.

Enhanced QR Code

Visibility

Enhanced QR Code Visibility

Enhanced QR Code Visibility

Enhanced the visibility of the

QR code and created a larger and more noticeable banner layout positioned at the bottom. This helps users understand the purpose and usage after scanning the

QR code, which guiding them to the

FINDGO website.

Enhanced the visibility of the QR code and created a larger and more noticeable banner layout positioned at the bottom. This helps users understand the purpose and usage after scanning the QR code, which guiding them to the

FINDGO website.

Enhanced the visibility of the QR code and created a larger and more noticeable banner layout positioned at the bottom. This helps users understand the purpose and usage after scanning the QR code, which guiding them to the FINDGO website.

Seasonal Event

Promotion Design

Seasonal Event Promotion Design

Seasonal Event Promotion Design

Exit Directory Display incorporates interactive and visually appealing designs that are specifically customised for seasonal events. This integration takes the user experience to the next level by adding more fun and excitement.

Final Product #3

Wayfinding Assistant

Wayfinding Assistant

Comprehensive

Information

Comprehensive Information

Comprehensive Information

FINDGO Wayfinding Assistant offers users up-to-date and comprehensive information, including suggested exits, optimal routes, estimated walking times, and other relevant details. Our goal is to improve navigation by offering accurate and timely information, reducing confusion and frustration.


With FINDGO, users can easily navigate without relying on complicated instructions or unclear signs.

FINDGO Wayfinding Assistant offers users up-to-date and comprehensive information, including suggested exits, optimal routes, estimated walking times, and other relevant details. Our goal is to improve navigation by offering accurate and timely information, reducing confusion and frustration.


With FINDGO, users can easily navigate without relying on complicated instructions or unclear signs.

FINDGO Wayfinding Assistant offers users up-to-date and comprehensive information, including suggested exits, optimal routes, estimated walking times, and other relevant details. Our goal is to improve navigation by offering accurate and timely information, reducing confusion and frustration.


With FINDGO, users can easily navigate without relying on complicated instructions or unclear signs.

Business

Promotion

Business Promotion

Business Promotion

We also includes a dedicated section for businesses to showcase their products, banners, and discounts. Users are encouraged to explore and engage with this section, creating a vibrant and interactive wayfinding experience.

Third-party

Navigation

Third-party Navigation

Third-party Navigation

In order to improve user guidance and facilitate a seamless transition from the starting point to the destination, we integrate with well-known third-party navigation platforms such as Google Maps and PinnAR (AR navigation app).

If I had more time…

What can I Improve?

What can I Improve?

If I had more time, it would be beneficial to conduct primary research with a larger sample size. This would provide a better understanding of user preferences and needs in the MTR project.


Moreover, incorporating the viewpoints of disabled individuals will further improve overall understanding.

If I had more time, it would be beneficial to conduct primary research with a larger sample size. This would provide a better understanding of user preferences and needs in the MTR project.


Moreover, incorporating the viewpoints of disabled individuals will further improve overall understanding.

Final Thought

What have I Learned

What have I Learned

I have gained valuable insights and knowledge in wayfinding systems through this project. It has enhanced my skills in designing user-friendly digital systems for public spaces, particularly MTR stations. The field observations were instrumental in understanding user interactions and objectives. To achieve shared goals, it is crucial to strike a balance between user and company needs and expectations. This approach guarantees long-term success and satisfaction for everyone involved.

Next Project

Practice: Your Personal Guide
to Wellness

All Work

All Work

All Work

All Work