Restructuring, redesigning, and supporting a website which provides local traffic and transit information for the San Francisco Bay area in Northern California.
As part of Civic Resource Group’s design and front-end development team, I supported the 511.org website since 2011 with content, design and development updates.
Throughout this project I worked on the UX and UI designs with several team members, provided design feedback on the Needs Assessment and Technical Documentation and developed the HTML prototype for the Drupal website.
Having worked on support for 511.org, I discovered people visited the site for transportation alerts, the regional traffic map, and a single source of information from over 20 different transit agencies. The organization needed an easy way to make sure the alerts and traffic map were real-time, but also a way to provide information from other services and partners.
Most of the audience analysis and user research was done in 2015 since the client had already performed focus groups. Taking into consideration all the feedback, and general trends in the Bay Area and technology, I put together personas with user scenarios depicting the various target markets.
I directed a design mapping exercise with the client to help them focus on their goals for the website. Each grid would focus on one aspect of design such as content, voice, design, and look & feel. We added competitors for references such as Google Maps, FasTrak, SFMTA, and BART as well as 511.org in its current iteration.
The 511.org content strategy focused on the map and tools balanced with services, communities, social media and personalization. Our team used GatherContent to help re-organize the content into the site structure.
For the site map and navigational structures, we worked on terminology that was clear to users, but at times, compromises were made when organizational structures took precedent. The old Blogger websitem which had been used for emergency alerts also needed to be integrated into the sitemap. The team and I worked on several iterations and eventually grouped content into different transportation modes.
The trip planner and transit departures tools were a huge focus for 511.org, so a lot of user workflows and mockup designs were tested using the InvisionApp to make sure the new tools were not confusing to site visitors. To understand how the alerts were created and why, we focused on the best way to organize them in such a way that made sense to the user. Even after launch, we made small iterations to the navigation, map and tools on the homepage for both desktop and on mobile.
To provide UX data on a design decision, we would use online user testing via heatmaps in CrazyEgg and A/B testing in UsabilityHub of various layouts to see which design, icon or layout would work best.
The well-known 511.org brand was simplified for the updated website, and logo changed slightly as the focus of the organization shifted toward API data. I tested various color groupings and design directions with themes such as map, services, community or conversational, each with their own feelings and corresponding colors.
The site needed to show an interactive map of the San Francisco Bay Area, so the rest of the UI was focused on iconography and interactive elements to make use of space based on specific transportation modes.
The navigation was updated to a new design with a mobile-first, 1-level expansion, and pages with more content included tabs and accordions. For the Drupal iteration, I adjusted the navigation to allow for more levels, and full visibility on all pages and all screens, including secondary page menus visible on mobile for easy access.
The design team worked together on bringing in more promotional graphics for various announcements and programs and banners on each page. I eventually set up a design system for images sizes and layouts, including how to integrate the branding of partner services such as the AllNighter Service. As an extra treat, I created the logo for the Bay Area Commuter Benefits program.
When the client decided on Drupal as the next CMS, I helped define the various content types and how they would be entered into Drupal, as well as displayed as text listings and on the interactive map. The emergency alert content that was on Blogger and the special event content were also defined and added to Drupal.
We moved away from AngularJS as the basis for the main site code, but kept the code for the interactive map and alerts. I coded an HTML prototype on the Bootstrap framework for the client to review various UI elements. The prototype was used as reference for the developers to build the page templates and as reference for the QA team to compare the completed site. I also coded an HTML style guide for the client to reference when creating new pages, images, or content blocks.
511.org was the first website where I could truly delve into HTML code semantics, and how to create modern web design while still being accessible. I learned how to code linking cards, when to use alternative text for images, and being able navigating a website with keyboard.
With the Drupal site changes, we created a beta site to test the changes. We put together a launch checklist, which included redirects for most pages due to the website restructure.
After the website launch, we continued to make small improvements to the site, updated documentation, and continued support for new additions, including special pages during the Covid-19 pandemic.
