While FasTrak’s electronic toll collection keeps the Bay Area moving, their website included too many roadblocks for users. Kalamuna partnered with the transportation experts at Convey to redesign the site so people can find what they need, where they expect it.
FasTrak, a service of the Bay Area Transit Authority (BATA), came to us with a website that lacked the streamlined intuitive experience needed by their wide audience, which includes everyone behind the wheel from tech giants to tourists.
Common activities like paying an invoice or registering a transponder or “toll tag” required navigating an obstacle course of text-heavy, repetitive pages, and important content buried behind too many clicks. The poor mobile experience and lack of sensitivity to cultural differences, translation, and accessibility frustrated both BATA and their diverse audience.
With all these challenges and without a help section on the website, FasTrack received an undesirably high volume of support calls, often about account questions the website could be answering.
FasTrak brought in local transportation experts, Convey, to improve the user experience of the public-facing informational pages of their website. Impressed by our expertise in UX design and accessibility, Convey sought out Kalamuna to apply a user-centered design approach, ensure that accessibility and diverse user needs were considered at every stage, and to design and deliver a working prototype that Conduent could use to build out the new site on their legacy enterprise platform.
Understanding the Users
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.
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.
Problem to solve
Create an Online Account
Check status of a violation
How Do I Pay?
What about rental cars?
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.
Sketches produced by key MTC stakeholders within the Design Charette to shape the structure of key pages of the website.
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 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.
Convey leveraged their deep transportation expertise to rewrite the content for the new site, taking into account FasTrak’s diverse audience. Thoughtful translation into Chinese and Spanish was undertaken by native speakers at InterEthnica, not robots. Kalamuna contributed feedback from our user-centered web expertise, including crafting accessible in-line hyperlinks, drafting microcopy, and informing labels and navigation.
After completing a content-first approach to structuring each page, we were ready to proceed into UX design.
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.
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.
This project exemplified the value of a user-centered approach, especially for times when we need to create simplicity within complex systems. It also demonstrated our distributed team’s ability to collaborate with clients and partners remotely.
The high-fidelity prototype and style guide were used to update FasTrak’s proprietary system into a modern, responsive, accessible, and user-centered experience. Once it went live, their support center saw a 20% decrease in website-related inquiries.
We enjoyed the best type of collaborative relationship with Convey – one where each partner’s unique skills and expertise came together to create something greater than either could have achieved on their own.
Our partnership with FasTrak continues as well, as we begin to apply our expertise to the logged-in user experience.
And the partnership with Convey continues on a new Northern California rail project, where we are designing and building a Drupal 8 site together.
“Convey and Kalamuna brought a high level of technical expertise to the redesign of the FasTrak website. Their creativity, deep experience in transportation, and ability to untangle and cleanly organize information vital for Bay Area travelers was paramount to the positive outcome of the redesign. It has been a pleasure working alongside them.”