MTA Website Redesign: User Research & Information Architecture

While at Connective DX, I was able to work extensively on the Massachusetts Teacher's Association website. This project is a favorite of mine because I was integrally involved from it's conception. I was able to come in during our first round of pitching to the client, where I helped present work we had previously done. Once we won the work with MTA, I wrote a survey geared towards MTA users (teachers/parents/retired members) asking them pointed questions about the website. We pulled that data and presented those findings to MTA. From there we held card sort sessions where 5-6 users in several cities around MA helped us get a sitemap together.

Once we had the sitemap together, we jumped into wireframes. I was able to work with the client to whiteboard my ideas and explain the concept of Sitecore "widgets" which they loved. The idea of having reusable sections of the website was really appealing to them, and so we got to work creating experiences for them. I'm happy to say the site is now live, and at the bottom of this page you can see my designs come to life!

Here is our finished sitemap. We created this in Slickplan which has been an awesome tool for us. This sitemap wa slargely based around our Cardsort sessions with MTA users — Here is our finished sitemap. We created this in Slickplan which has been an awesome tool for us. This sitemap wa slargely based around our Cardsort sessions with MTA users

Here's our sitemap with certain "special" pages highlighted. We wanted these pages to get incorporated into our user flows so we could sketch them

Here is an example of a user flow we created. Caroline is based off of a long term teacher we met in a card sort session, and her user flow covers a need to find information

Here is the finished homepage! Each "section" of this page (and every page on the MTA website) is a widget within Sitecore. The client loved the idea of having reusable widgets so they could reuse sections (for example the "Join the Conversation" wi… — Here is the finished homepage! Each "section" of this page (and every page on the MTA website) is a widget within Sitecore. The client loved the idea of having reusable widgets so they could reuse sections (for example the "Join the Conversation" widget) elsewhere on the site.

This is the "Who we are" page within "About the MTA." This page was interesting to design because the MTA really has a solid idea of who they are, and conveying that was a challenge. I wanted to include the "How can we help today" piece universally … — This is the "Who we are" page within "About the MTA." This page was interesting to design because the MTA really has a solid idea of who they are, and conveying that was a challenge. I wanted to include the "How can we help today" piece universally on these sub level pages, so users can dig directly into resources if they wish. The "Related Resources" was great as well, because it allows users to link off to other areas of the site if they wish to explore.

This page/experience I am especially proud of. This is an example of the MTA's "Current Initiatives" pages. If I know anything about the MTA it's that they are a passionate group that fights for what they believe in. Charter schools (as shown above)… — This page/experience I am especially proud of. This is an example of the MTA's "Current Initiatives" pages. If I know anything about the MTA it's that they are a passionate group that fights for what they believe in. Charter schools (as shown above) was one example of the Initiatives they stand vehemently against. We wanted to express the richness and complexity of this issue through the experience, and we did so with rich visuals, and compelling content, broken up into widgets the team can move about on the page as they wish. From compelling testimonials and latest supporting news articles, to maps and FAQ's, these page experiences really tell the story of what the inittaive is all about.

This is an example of the MTA's news page. It was a challenge designing for their news page because of the sheer volume of content. I felt it especially necessary to include a filter, so the user doesn't have to scroll for ages to find the article t… — This is an example of the MTA's news page. It was a challenge designing for their news page because of the sheer volume of content. I felt it especially necessary to include a filter, so the user doesn't have to scroll for ages to find the article they wanted. I also wanted to feature news items that were relevant (either to what the MTA is fighting for at the moment, or down the line, what is relevant to the user).