PROJECT OVERVIEW

Objective

How to make it easier for users to travel with TTC belongs with using a helpful app?

Solution

Redesign the app existing on the market so users can feel familiar and easily use

Role

User Research
User testing
Prototyping
UX documentation

Duration

8 Weeks

Tools

Miro
Figma
Adobe Creative Suite

TTC WATCH FOR TORONTO

A transit app based on live GPS arrival times for Torontonians.

DEFINE PROBLEM

Competitive Analysis

I conducted a competitive analysis to compare the differences between the currently available apps on the market and extract prominent areas for improvement.

Customer Reviews

I sifted through all the user reviews to gather the common pain points experienced by actual app users, and subsequently narrowed down the list.

User Survey

After surveying a total of 31 respondents, I identified the underlying issues to improve upon.

While using the TTC (Toronto Transit Commission), users often encounter inconveniences. To conduct a market survey on existing transit apps, I surveyed 31 participants. The results showed that over half of them experienced difficulties while using both the TTC and transit apps.

Additionally, I included questions about basic icons to assess users' background knowledge. Only 25% of the respondents answered the questions confidently, indicating the need for more user-friendly and intuitive icons. I incorporated this idea into my design.

User Interview

I conducted interviews with a total of four interviewees over the course of one hour.
Through these interviews, I was able to derive insights regarding the current market landscape, usage patterns of existing transit app users, and areas for improvement.
The average satisfaction rating among current users was 1.02 out of 5.
Using the findings from the interviews, I have planned to incorporate them into the new design to ensure user satisfaction throughout the app usage.

User Testing & User Pain Points

Through a detailed competitive analysis, research, and user interviews, I have discovered several key user challenges. These challenges show what users are struggling with and what isn't working well in the market.

Solving these issues will be important to provide a user-friendly solution that meets their needs and expectations.

IDEATION

User Personas

Storyboard

Building upon the previously established personas, I've crafted more detailed fictional storyboards.

Sketch

With the design principles, I started sketching some ideas for an improved app. These are the initial sketches with various ideas.

Low-fidelity

Hi-fidelity Wireframe

This is based on an idea sketch and a rough low-fidelity version, resulting in a high-fidelity wireframe.

Prototype

View Prototype A (Main Flow)

View Prototype B (Nearby)

WHAT PROBLEMS I SOLVED

I made the process of saving frequently used buses or routes more intuitive for users, addressing the previous confusion where there were no notifications or animations confirming whether the save/pin action had taken effect. By briefly displaying a small popup indicating that the route has been saved, I smoothed out the inconvenience that users were experiencing.

The previous design lacked visual hierarchy due to its arrangement of font sizes, weights, and colors, making it inconvenient to grasp information at a glance. To enhance readability, I enlarged important content, differentiated bus numbers using distinct fonts, and used simple icons to indicate bus congestion levels. These changes make it easier for users to choose a bus and create a better experience for them.

In the previous design, users had to manually tap on the timetable, which led them to the TTC website instead of directly showing the next bus. This method made it challenging to grasp the information quickly. To solve this, I removed the need for website redirection and added reminders instead. This way, users get alerts as the bus time gets closer, so they don't have to keep checking their phones.

KEY TAKEAWAYS

Proactively incorporating user testing insights for personalized app enhancements.
Embracing inclusive design to cater to diverse user profiles and prevent exclusion.
Embracing iterative design cycles for continuous refinement using user feedback.
Continuous improvement of design skills and a deeper understanding of evolving user requirements.

NEXT STEPS

need to provide pixel-perfect screens for the updated design, following the specs and rules in the design system.
create screens for responsive web design
conduct more user testing and optimize the design based on user feedback and pain points.