Metra Redesign

RESEARCH

Identifying Problems

After a quick audit of Metra's website, we transitioned to a more thorough evaluation to better identify and understand the problems by performing a task-based heuristic analysis. We chose two tasks to focus on that we believe best exemplify Metra's goals:

Task 1: Finding train departure time.

Task 2: Contacting Metra (in this case, to find a lost item)

FINDINGS

1. Navigation and Flow Issues

•

Unclear Navigation and Submission Feedback: Users face unclear navigation paths, with missing back buttons, insufficient confirmation prompts, and minimal feedback for actions.

2. Information Overload

•

Cluttered and Overwhelming Layout: Pages are overloaded with information and lack visual hierarchy, making it difficult for users to locate and process the content effectively.

•

Confusing Data Presentation: Key information (e.g., schedules, forms) is not displayed clearly, leading to misinterpretation and user frustration.

3. Cognitive Load and Recognition Challenges

•

High Reliance on Memory: Users need to remember steps or interpret confusing features (e.g., icons and maps), increasing cognitive load.

•

Inconsistent Application of Familiar Design Standards: Familiar design patterns are applied inconsistently.

IDEATION

Developing a Solution

Based on our research, including task-based heuristic analyses, competitive analysis, and pain point identification, we identified four main redesign objectives:

Evaluate Current Information Architecture: Evaluate the organization and structure of the navigation section and its effectiveness in displaying information and user experience.

Propose Alternatives: Propose recommendations to improve and enhance the site navigation to be more user-friendly for Metra commuters.

Implement & Test Solutions: Perform task-based tests to assess our recommendations and improve on future iterations based on feedback.

Revamp UI: Design a modern and organized user interface.

IDEATION

Re-Evaluating Metra's Content

We refined Metra's information architecture by performing a comprehensive content inventory and audit. To ensure our newly organized information was clear, we conducted three rounds of closed card sort testing, re-evaluating the content inventory and making changes after each round.

Organization After Testing

FINDINGS

What We Noticed

•

Participants were putting cards they were unsure about such as Lost and Found and Accessibility into Resources.

•

85.7% of participants didn't know where to put Lost and Found.

•

42.9% of participants didn't know where to put Title VI of Civil Rights Act, Late Slips, and State of the System Report.

•

Overall, most participants had difficulty understanding some cards. I will elaborate on this further in my reflection.

KEY TAKEAWAYS

Improvements Based on Insights

•

Removing terms irrelevant to Metra reduced user confusion.

•

Adding details to unclear cards clarified their purpose.

•

Dividing broad headings into specific topics improved organization and usability.

•

Using user-friendly language enhanced user clarity and experience.

IDEATION

Further Evaluation of Metra's Content

To further validify our findings from the card sort, we additionally performed three rounds of tree tests where we gave fake scenarios for participants to try navigating through our categories in order to further understand.

FINDINGS

Turning Tree Testing Failures into Wins

•

Made a new group called Rider Information with Accessibility as a subcategory.

•

Reworded the task to ask, "Where would you find more details about the accommodations?" to deter users from going to Customer Support.

•

Replaced FAQs with Customer Support and made Contact Us a subcategory under it.

•

Moved Alerts/Delays under Train Information.

•

Changed News & Updates to News about Metra so users wouldn't confuse it with train Alerts/Delays.

KEY TAKEAWAYS

Tree Testing Results

•

Our remaining tasks had a consistent high success rate of over 80% after every round.

•

Making the questions and categories more detailed greatly improved participants' success rates after each round.

•

The high success rates after multiple rounds indicate that the final structure aligns well with user expectations and mental models.

DESIGN

Final Wireframes

Information Architecture That Makes Sense

The refined information structure of our redesigned Metra site allows users to easily navigate and quickly find what they're looking for without getting lost.

Planning Your Commute

A more streamlined process for finding nearby stations and train departure times without overwhelming the user.

Service Alerts

An easy-to-understand list of updated service alerts labeled with symbols to make the interface less cluttered and help users quickly recognize the information.

Less Cluttered Design

Metra's original UI overwhelmed users with the amount of information on one page. Our redesigned interface condenses information into dropdown menus to prevent users from being overloaded with too much information at once.

CONCLUSION

Reflection

This project was completed for one of my graduate-level HCI classes, which focused on designing information architecture. Throughout this redesign process, I explored various IA research methods that expanded my knowledge of designing website structures to ensure users can easily navigate without difficulty. This process also reminded me of the phrase, 'the user is not like me,' as our initial structure, which made perfect sense to me, was unclear to participants during card sorting and tree testing. Additionally, Janice, Daniella, and I collaborated smoothly and accomplished our goals. Each of us had different strengths in various areas of UX, and we taught each other along the way with the guidance of our professor.

What I Would've Done Differently

•

Find participants that fit the target audience:
For this project, we used a site provided by our university that allows students to post research tests for other students to complete (many classes require students to participate in research tests for points). Additionally, we had our classmates complete our tests during class. However, many students were not from Chicago and were unfamiliar with Metra, leading to confusion about some of the terms and what Metra actually is. This created challenges during the card sorting and tree testing, as we had to clarify the meaning of some of our content. In the future, I would ensure participants meet specific criteria to obtain more accurate testing results..

•

More in-depth visual design process:
Since our class focused on information architecture, we primarily worked in that area of UX for our designs. Although the main problem with Metra was its confusing information structure, it also had additional design issues unrelated to the IA that could be improved. While we touched on visual design when creating wireframes and redesigning features for better functionality, due to the information architecture objectives we were asked to prioritize and the limited timeframe, I would have conducted more comprehensive work when redesigning features unrelated to information architecture, such as the service alerts.

Metra

BACKGROUND

The Process

RESEARCH

IDEATION

DESIGN

CONCLUSION