Problem
The current site is frustrating for users as the site is hard to navigate and visually distracting.
Goal: Perform user testing in order to find pain points in the design. From my findings, I'll be able to reorganize content into manageable sections and simplify the design, making it user-friendly.
Competitive Analysis
After identifying what the problem was, I wanted to see how other transportation sites were organized and what they provided to users. I looked at both domestic and international sites in hopes of getting more varied results. Some sites I came across were well built and visually pleasing, while others were lacking in both areas. I took detailed notes on each to use throughout the project.
Competitive Matrices
Competitive Matrices were created in order to see what other transportation sites were offering their users. Some categories that were taken into account were the design of the site, if it was user-friendly, who their primary users were, and how they were involved in the community.
Survey Excerpts
I created a survey to identify what users were looking to get out of the site and to get a better sense of who the target users were. I shared a link for the survey on social media and asked people to complete it. The following are the results:
Personas
Before I could begin reorganizing the site, I needed to create user personas. They would be used to guide my decisions and give me something to follow.
Card Sorting
I completed an analysis of the old MBTA site and wrote the topic of every page on an index card. I asked a handful of people (independently) to organize the cards into groups. Once they were done, I provided them with sticky notes so they could write down the "category" that the cards fell under. My hope was that the results could influence the new navigation topics.
User Testing
I wanted to get a better idea for how people were interacting with the site. The best way to do that was to complete user testing. I came up with 5 separate tasks that coincided with the roles and needs of the user personas. I wrote a moderators guide to ensure each test was completed the same and asked permission from each of the individuals to record the sessions. I used Quicktime to create a screen recording, allowing me to both listen to the audio and rewatch how the users interacted with the site. I asked a few follow up questions (the same for each individual) and created a summary based on the data.
User Journey
Site Map
Using results from both the card sorting and user testing sessions, I turned to the whiteboard to begin creating a new site architecture. I began by inspecting the current site architecture/content and wrote it down as is. I then went back and identified where content was repeated or places that the structure just wasn't making sense. After marking it up, I was ready to find a more user-friendly approach to organizing the content.
Wireframes
Using Balsamiq I created low fidelity wireframes to start identifying where content should go. As the testing primarily centered around commuter rails, I only created pages for that flow. With the pages linked I worked through the functionality.
Testing Round Two
After multiple iterations of wireframes I created a prototype that could be used for testing. I had the same individuals perform this round to see if their experiences improved.
Style Tile
Design
To ensure the user would have the same experience regardless of device, designs were created at mobile, tablet, and desktop.
Before & After
Fully Responsive Design
