2021

Metropolitan Transportation Commission

government agency Website   •   UX/UI, Interaction
mtc design mockup

Intro.

I was contracted by San Francisco based creative agency Visual Strategies to work on a website redesign for thier client, MTC. The Metropolitan Transportation Commission is the government agency responsible for regional transportation planning and financing in the San Francisco Bay Area.View Website

Key Views

  • home icon

    Home

    Users are greeted with a newly designed homepage showcasing latest stories, meetings, and MTC updates.

  • news icon

    News

    The landing page displaying the latest transportation stories was upgraded into a few simple categories.

  • basic-page icon

    Basic Page

    This universal template for all content pages allows the MTC team to build a page with a library of components.

  • mega menu icon

    Mega Menu

    The vast network of info needed a clean, organized nav system that allowed users to easily get around.

Role.

The tasks facing me included reaching a broader array of users, bringing full accessibility compliance to the new website, and making it much easier to navigate MTC’s complex network of tools and information.

  • wireframe icon

    UX/UI Design: The most prominent role in defining the User Experience led me to restructure the flow of the new website to create a seamless journey for any user.

  • prototype icon

    Prototyping: Once a clear user flow was reached, I created a hands-on feel of the new site direction with a click-through prototype using InVision.

  • design system icon

    Design System: Throughout the project I began building the system of guidelines for all team members to refer to, complete with classic design components.

Design.

It was in my hands to develop the layouts of each mid and high level page and create templates throughout. In collaboration with Visual Strategies’ Creative Director and Project Lead, we worked on the visual element of the website redesign.

MTC was looking for a new, friendly approach of appealing to new users while keeping the design smart and focused. The design was to be complete with ease of use, openness, and lots of white space.

  • Sitemap Sitemap
  • Nav Exploration Navigation Exploration
  • Wireframes MTC Wireframes 1 MTC Wireframes 2
  • Mockups MTC Design 1 MTC Design 2
  • Mobile MTC Mobile Mockups
  • Design System
  • MTC Logo Mockup
  • MTC Colors Mockup
  • MTC Components Mockup
next projectnext arrowhomeexpert