Our user-driven approach began with research. We interviewed key stakeholders at FasTrak to better understand their context and goals for the site. We analyzed the reports and research they shared with us, including insights from customer surveys, and past usability research. And since some of our team members were already FasTrak users we were able to get a wealth of insight about the problems they experienced with the existing website. All of this allowed us to arrive informed and prepared for an on-site workshop with key BATA stakeholders.

On-Site Workshop

We lead a day-long collaborative workshop at the BATA headquarters in San Francisco to bring the organization’s collective insights into the project more directly.

Our workshop began with identifying the most common tasks FasTrak customers aim to accomplish, categorized by each of their four user types. We mapped the paths users currently follow when completing these tasks, noting points of frustration on the current site. Then, we collectively identified the most important challenges to address in the design charrette.

A charrette is a short, collaborative meeting where members of a team quickly explore and draft solutions to a design problem. Most clients do not self-identify as artists. So, we find this rapid sketching exercise reduces the pressure for perfection, allowing a diversity of great ideas to surface.

We formed teams around each audience type, and gave each group approximately 20 minutes to sketch their solution to their persona’s most common problem. Each team presented their outcomes to the group, followed by a facilitated group discussion. Different departments, some of whom rarely interacted with one other, gained new insights and enthusiasm for the benefits we could all bring to Bay Area commuters.

The User’s Journey

After we returned home from San Francisco, we set to work translating the workshop’s insights into clear deliverables to inform the next phase of the project. We examined toll sites from around the country to analyze how others solved similar problems. Then, we began to develop recommendations to help users self-serve efficiently on the FasTrak website without requiring a call to the support team. They included improved navigation, writing more scannable content, and clear labeling.

Types and Goals

We simplified the current personas into three primary user types: FasTrak customers, new FasTrak customers, and general motorists. Then, we detailed the top goals for each user type.

For instance, current FasTrak customers may need to log in and manage their account, new customers may seek information about what a transponder or “toll tag” is, and general motorists may hope to find specific information about rules for rental cars.

User Journey Mapping

These user types and goals informed a user flow diagram that visualized the path users were taking to complete common tasks both on the website and out in the physical world. In this case, it allowed everyone to see how phenomenally convoluted the current process was. By identifying negative interruptions in red, we were able to identify key moments where their experience could be improved.

Content Collaboration

Content organization always matters, but especially on transportation websites. Their users expect to find information specific to their needs quickly and intuitively. A productive collaboration between Convey’s copywriter and our senior UX designer guided the translation of our research insights into user-centered content.

Content Architecture and Framework

Informed by an audit of FasTrak’s existing content and our understanding of their new strategic communication objectives, we created a content map that expressed how and where key pages would live in the new site’s structure. This type of diagram allows us to visualize the narrative flow for each user type across the website.

UX Design

After completing a content-first approach to structuring each page, we were ready to proceed into UX design.

Wireframes

Like a blueprint of a house, wireframes allow us to focus on the structure of a page without the distraction of visual design. We always prefer to complete this exercise with real site content, as we did for FasTrak, to ensure the words guide the structure rather than the other way around. To best serve FasTrak’s users, we focused on creating scannable pages with a clear information hierarchy.

Visual design

While we were not originally intended to complete the visual design of this site, the partnership we built with Convey inspired them to entrust us with it. We created style tiles to express a coherent design system, then layered visual design on the wireframes to create design comps for key pages.

High-Fidelity Prototype and Style Guide

We used our rapid prototyping tool, Kalastatic, to develop a living styleguide and a high-fidelity, component-driven HTML prototype. Kalastatic prototypes are fully functional static sites, so clients can see how designs will appear across browsers and devices before they invest in backend development. They also allow us to test for accessibility against WCAG 2.1 AA standards along with cross-browser and device compatibility.

Testing Prototypes with Users

We always design with users in mind, and whenever possible we advocate for testing prototypes with real users. User testing allows us to validate our ideas and iterate appropriately. While we can test with low-fidelity prototypes created with wireframes, high-fidelity prototypes allow us to test a more real experience while also accommodating nimble changes. For instance, our testing of the FasTrak high-fidelity prototype prompted a redesign of the toll location maps to improve legibility.