Redesigned Responsive Website of Public Transportation System of Toronto (TTC)
Overview
The Toronto Transit Commission (TTC) is the public transport agency that operates bus, subway, streetcar, and paratransit services in Toronto, Peel Region and York Region in Southern Ontario, Canada. It is the oldest and largest of the urban transit service providers in the Greater Toronto Area, with numerous connections to systems serving its surrounding municipalities.
Role
Research
UI/UX Designer
Information Architecture
Prototyping
User Testing
Timeline
5 Weeks
Tools
Figma, Maze
Problem
Solution
TTC being the public transit system of one of the largest city in Canada completing 100 years is still lacking in giving user’s a better experience on their website. Their current website design and information seems outdated and it can get difficult for users to navigate to specific information.
A redesigned modern website will eliminate the difficulties of users and will enable pleasurable user experience. Redefining information architecture by taking user-centric approach will helps users locate to specific information without having any trouble.
Conducting Research
Knowing the competitors
​
I initially started my research by knowing TTC’s competitors to evaluate their strength and weakness. Considering public transport system of some of the major cities similar to Toronto, I did competitive analysis. I examined their website focusing on visual elements, structure, responsiveness and visibility of call to actions.
With regards to age group and type of travellers, I considered creating provisional personas to have a broader sense and make myself aware of different situations and users needs at earliest to deliver designs keeping in mind of those group of people.
​
​
​
Provisional Personas
Competitive Analysis
Findings
-
Information architecture is key to such websites, especially when it has so much information to provide.
-
Some information needs to stand out so that it is easily available right away.
-
A combination of visual elements and content can make the experience better
-
Having a responsive design for users to have the ability to access from anywhere.
Knowing the users
After gaining insights from competetive analysis , I conducted user interviews to better understand their needs, wants and what frustrations they have with current design of the website.
User Needs
-
Users want to reach their destination without any delays meaning they want to stay updated on any unexpected delays.
-
All users want the ability to do some task like trip planning or looking for schedules right away.
-
Easily able to find information about parking space availability near stations.
-
For quick and easy way to find information users would like to have dropdown navigation menu.
-
Easy to follow instructions.
-
Display of Information along with visual elements.
Frustrations
-
Not able to know about service alerts.
-
Users get frustrated when too much unnecessary information is there on the page.
-
Have to go through several pages to look for specific information.
-
Repetitive links leading to the same page confuses users.
-
Unable to perform primary tasks due to overwhelming information on the page.
-
On trip planner page, map is overlapped once trip planning information is displayed.
-
Fare information page is very deep.
Define
Meet Ashlynn
With all information I gathered from research, I defined a user persona, which guided me make design decisions further in the process. Meet Ashlynn, a working professional expecting more from TTC . Although it is difficult to make decisions with just one persona in mind, but to create a scenario where I could design few pages followed by making changes to other pages is ideal at this moment looking at the time contraint I was in.
Ideate
Card Sorting
Since the current website has excessive information and lack of structure it was imperative to know how users see and group information,
-
9 Participants did card sorting.
-
Out of 20 cards users grouped 16 cards in similar categories whereas 4 cards were put in multiple categories.
-
It was easy to understand that the pre-existing categories provided worked and we can go ahead with the results and categories having multiple grouping will be tested further.
Site Map
With the results from card sorting excersice, I created a site map which includes information users would like to see eliminating outdated content inside different pages. I made sure only relevant information is displayed so that users are not distracted from the purpose of their visit.
Task Flow
I focused on two task which was planning a trip and looking for maps, which I decided upon research. Task flow helped me determine different pages I needed to design.
Wireframes
Based on all the gathered information from research to information architecture and task flow, I created responsive mid-fi wireframes to ensure that the design fulfills and can able to successfully complete the task.
Since the purpose of the whole redesign was to make the website look modern, cohesive and clean, I referred to several other similar kind of websites to get inspiration and came up with wireframes as shown below.
TTC being government entity and known to people by it existing branding, I made no changes to their logo and colors. There was a lack of heirarchy and improper layout for which I created design elements which will be used further for consistent design.
Style Tile
Prototype
Hi-Fi Design
I used style tile to implement on the wireframes. I put more emphasize on call to actions to grab users attention. The old website had repetitive CTA’s leading to same page which confuses user, I tried to solve that problem by having one CTA for any particular action.
After creating main pages for high fidelity design I created an interactive prototype which involves task my persona would likely do and I can perfom a usability test which will determine how successful the redesign was.
Usability Test
Usability Test Results
Test was 100% successful.
-
All participants mentioned the task was easy to follow
-
Call to actions were noticeable.
-
Liked the drop down menus.
-
All users mentioned that they can easily able to look for information and can successfully do any task.
-
Liked the colors and use of icon.
Since the prototype was 100% successful, There is no need to make any further changes as for now. After creating more pages test can be done again and make changes as needed.
As it was my first attempt on redesigning something which impacts a larger group of people it was really important to know different users perspective and how they percieve information. The project taught me the significance of proper information architecture and overall design elements. The only difficult part was not being able to know the business point of view and it was a challenging to make some crucial decisions as a solo designer.
Reflection
Other Case Studies
Ayna
Unify
Instacart
