Metrolinx Eglinton Crosstown West Extension (ECWE) main page
Metrolinx Eglinton Crosstown West Extension (ECWE) updated main page
Metrolinx ECWE Engage Website (previous version)
— PROJECT NAME
Metrolinx ECWE website design
— PROJECT GOAL
Awareness, Engagement improvement, Content-first design, Voice consistency
— MY ROLE
Content strategy, Lean UX
Information architecture,
User research, User archetype,
UX writing, Cross-functional collaboration, Project management
— TOOLS
Figma, Google docs, Google Slides, Mural, Miro, Figjam
— DATE
Fall 2021 to March 2023
As part of Dillon's consulting design team, I collaborated with our client, Metrolinx (the crown transport agency of the Government of Ontario) to redesign their responsive website for the Eglinton Crosstown West Extension (ECWE) subway program in Toronto.
Due to the diversity of Metrolinx's projects and digital products, it was important to leadership that the ECWE web and mobile pages had well-organized and structured content that helps users interact better with the information, resulting in an seamless user experience.
CHALLENGE: The pages had outdated design and copy, which disrupted the user experience and did not adhere to the objectives of the program. There was also technical jargon that was confusing and unnecessary.
SOLUTION: My team and I strategized on the website structure, information architecture and content strategy. I rewrote copy to follow Metrolinx's style guide and leveraged a simple, informative design.
The Strategy
My team of seven conducted different brainstorming sessions (images below) to identify the content strategy goals. I organized in-person whiteboard sessions and virtual mural exercises to create affinity maps that organized similar ideas and objectives. The strategy helped us to align our user assumptions and project goals; scope the project and think strategically about the information architecture.
lll
This session helped us to align our user assumptions and project goals; scope the project and think strategically about the information architecture.
User Research
From March 2nd to March 31, 2022 and in May 2022, I engaged with over 700 users through an online survey on behalf of Metrolinx. The survey asked respondents to share their thoughts about potential design options for the elevated section of the subway.
The findings (chart on the right) showed a strong preference for protecting parkland and recreational spaces around the elevated section.
User Archetype
At the beginning of the project, my team and I understood there were two users of the ECWE: the primary (residents/transit users) and the secondary (institutional stakeholders). The findings from the user research was helpful in understand the feelings and pain points of our primary users.
Based on the patterns identified in our user research, I came up with two primary user archetypes.
Brand Voice
It was important to our client that we combine the brand voice (image on the left) with the preferences of the users while designing content. The tone and style for Metrolinx are simplistic, friendly, and futuristic which evokes reliability and professionalism across all platforms.
Information Architecture
Triangulating findings from the user research, content strategy and brand voice/tone, I developed the final information architecture to help users and customers navigate the website information they are looking for easily in an intuitive way.
I organized the information architecture with the end user in mind.
Taxonomy
I classified content into categories based on what users would like to see. These categories became helpful with tags, suggestions, enquiries and feedback on the website forum.
The content team and I created detailed definitions of each content type’s elements and their relationships to each other. We took the top-down approach to content modeling by identifying the intended outcome, organizing the high level information, then the details.
I designed the final taxonomy structure following feedback from the various stakeholders.
Designing the content
Improving the Landing Page
The initial copy filled with technical jargon, project features, excessive information and difficult language the users did not need. The improved copy was simpler, clear and concise and emphasized the benefits.
Leading with the benefits of the project helps users see how it is of value to them and reduces the amount of mental energy required for them to understand the information. I also adjusted the map legend so that it doesn't cut into the map routes and wrote alt text for accessibility.
Updated landing page
Previous landing page
Making the CTA pop
The client wanted to transform the different segments of the project in colourful components and very minimal text. I suggested different colours for each component and summarized the content into headlines and consistent CTAs.
The CTA colours were suggested based on WCAG accessible colour palette
Subscribe!
After discussions with the UX, project and legal teams, I simplified the newsletter sign up copy to merge the multiple screens into one, and explained how Metrolinx uses data. I also rearranged the elements to make the most important information stand out.
Multiple iterations of the subscribe microcopy
Multiple iterations of the subscribe microcopy
Multiple iterations of the subscribe microcopy
Form Field Labels
In advance of Metrolinx events, I prepared different copies of the registration, polling and contact forms, with fields and CTAs, providing details about the events. I applied the brand's voice and used a conversational tone.
Registration form
Registration form
Call in page
Proactive Hint Texts
I wrote hint texts for the ECWE account creation page. For users to comment and provide feedback, they need to create an account using their email. The hint text informs users of what kind of email to enter, how Metrolinx protects the data and what happens after.
Hint text
Welcome and Nudge Emails
In collaboration with the communications and community teams, I wrote the copies for the welcome emails (after event registrations), post-event thank you emails and newsletters.
Following Metrolinx's style guide, I used the formal style with few verb contractions to soften the tone. I used active verbs for the CTA with the survey hyperlink and provided other helpful information users might be interested in. The system was set up to send reminders to registered users who haven't completed the survey. I added an opt-out copy
I wrote the headlines and body for weekly ECWE newsletters providing latest updates regarding the project to keep customers interested.
Welcome email
Appreciation email
Adding to the design system
I designed the content template for all the community notices for the ECWE project which was added to the client's design system. The template became the standard for public notices published on the website.
Published in the community notices page of the website
Plain language in UX Writing
Due to the project's multidisciplinary nature, I collaborated extensively with the architectural, design and construction teams to translate technical maps into colourful, informative, easy-to-understand maps. I asked lots of questions regarding the project features, took notes, transferred information to the designers, created the legends, labelled the streets and wrote image descriptors.
I organized bi-weekly meetings to ensure that the individual design/construction materials required for the responsive website are simple, easy to understand and user-friendly.
Multiple iterations of Kipling station's map- final version
Kipling station map: Initial draft
Kipling station’s map- Original architectural map
Cross-functional Collaboration
I collaborated with Marketing, project management and the stakeholder engagement teams to prepare and review all the information, postcards and project signage posted on the website (images below). I also prepared updates on the project design and activities for social media posts.
Results
- Increase in sign-ups: The redesign of the sign up page led to a jump from 200 to 700 sign-ups within the first 2 months of relaunch.
- Increase in event registrations: Since I simplified the copy of the registration/feedback form field page in Dec 2021, we have received over 230 000 entries so far. This was a major achievement for the content team.
- Stakeholder/Leadership buy-in: Consulting with stakeholders and users early on for feedback helped the content team address users' and business needs and ensured the project was headed in the right direction from the start.
- Lean UX: Impact of user research on construction design: The user research findings was adapted iteratively by the construction design and architectural teams with each survey and interviews.
- Project management expertise: There was a huge emphasis on procedures, protocols, multi-level approvals and processes in this project. I applied my project management skills to effectively coordinate multiple requirements, stakeholders, budget and potential risk. I also learnt patience and modesty in accepting UX decisions influenced by socio-political and environmental factors which the client defers to.
- Leadership Skills: As the UX Content Design lead (of 7 UX writers/designers), I displayed and improved my leadership skills through efficient delegation, mentorship, lessons retrospect sessions, convincing senior leaders of UX strategies, team building activities to maintain motivation, workflow distribution and learning by doing.
Lessons Learned
Agility and openness to change: The political nature of this project has taught me that websites are like living organisms, whose change is influenced by internal and external factors. This client loved swift changes. As a UX professional, I had to become extremely agile and flexible to adapt to the user needs by incorporating feedback as soon as possible. Currently, the client's senior leadership has decided to archive the entire Metrolinx Engage Website in December 2022 and migrate all content to Metrolinx main website. I was tasked to create a content inventory and I successfully adapted to the new direction.
I prepared the latest content inventory to take stock of the existing information before the upcoming content migration. The goal was to identify content that can be reused or repurposed. I found redundant content, broken links and gaps, while providing a clearer picture of the information hierarchy.
Most recent content inventory (December 2022)