El Dorado Transit (old)

Branding, Maps, and Website

El Dorado Transit demonstrates in every service it runs the care that its operators have for their community. This small agency in the foothills East of California’s capital of Sacramento provides fixed and flexible transit pinpointed for specific community needs:

  • local fixed route services that move people within and between the communities on the highway 50 corridor;
  • paratransit that extends far beyond the required complementary service area;
  • a flex route providing access to an otherwise community of just over a thousand;
  • peak hour commuter services to jobs in Sacramento;
  • a shuttle for jurors, and a shuttle for the county fair;
  • and soon taxi vouchers for a community where fixed route transportation just doesn’t make sense.

El Dorado Transit takes on a lot, it carries through with all of it, and wins accolades from the community.

Great service needs great customer info

It’s easy, when we focus on service, to put energy into the act itself before thinking about communicating the service to the public. As technology has changed rapidly in the last 10 years, and rider expectations have changed just as quickly, it’s been even easier to fall behind on the most up-to-date technologies.

While working with our friend and partner Selena Barlow at Transit Marketing on a comprehensive marketing plan, El Dorado Transit’s online presence was identified as needing a reboot. But the agency wasn’t quite sure where to begin. They knew they didn’t like their website, but what about it needed to change? Was a full re-design necessary? Or tailored updates? What about social media accounts, and the newly acquired RouteShout system? How do these various systems work together.

Website review

As part of the marketing plan work, Trillium was contracted to provide an overview of El Dorado Transit full online presence, and to identify the key upgrades or changes that could be made to improve that presence. We reviewed market research for the agency, and analyzed their schedules and services to get a picture of who the agency served, and what those riders wanted and needed.

We identified a list of measures that would get the right information to the right riders, and put them in order by a cost-benefit analysis. A full website redesign was pretty low on the list–it was needed, and would have a huge impact, but it’s a big project. Other items could likely be handled quicker and cheaper. But El Dorado Transit identified internally another cost saving measure: combining projects to streamline processes and prevent duplicate work. The RFP that came out went for the whole list.

A good time for re-branding

But the agency went further, and recognized that a major customer information overhaul was the right time to address another issue that they’d had on their minds. It had been quite some time since the agency had gotten a “facelift”–the logo looked out of date and there was no clear definition of agency colors or other brand specifications that would facilitate a consistent, clear identity. El Dorado decided to add a full brand review, and leave everything on the table for change.

We’re glad they did. Trillium teamed up with Transit Marketing to put in a proposal that demonstrated our thorough knowledge of El Dorado Transit’s service, excellence in the full suite of requested services, and ability to work within their budget and time frame.


A mountain in El Dorado County
credit: flickr user Sebastian Werner
We started the process in February from the ground up. The first step was to tackle the branding. Making a website is much easier–and the end product much better–when you have a strong set of principles and brand specifications to work from.

We worked with the agency to call together a branding committee of citizens and public servants from El Dorado County. A transit agency is more than just buses, it’s a community organization–especially one like El Dorado Transit that actively engages with the community. The brand should reflect that community, not just be a snappy image a graphic designer came up with. We had social service agencies, local colleges, transportation commission staff, paratransit riders, bus drivers, and others represented to make sure that different perspectives got in the mix.

We came out of the meeting with a clear sense of the common ground that tied all the various groups together.El Dorado Transit commuter bus

The permanence of the El Dorado hills and mountains.

The movement that symbolized the connection of communities along Highway 50.

The blue of the commuter buses, that so distinctly stood out in the morning rush hour.

Logo and applications

Creating a logo is hard. You have only a few pen strokes and colors to communicate something that should be instantly understood and stand out in a sea of images. Paul Clay, our web developer and graphic designer. Ran with just these few concepts through dozens of iterations, landed on something simple, evocative of the old logo, but modern, distinct, and adaptable.

El Dorado Transit logo

Along with the logo came applications, so there was clarity on how the whole brand could be shaped around that one image.

  • Different versions for on blue and on white, in color, and in grayscale, vertically and horizontally aligned
  • Color codes so there was no ambiguity about what the right colors were
  • Bus stop sign, bus wrap, letterhead, and a print ad promoting the brand change
  • A print system map that laid out the routes consistent with the brand theme

And suddenly, the same service started looking like a whole new agency.

Except that now we needed to tackle the biggest change of all: recreating an eldoradotransit.com that would be the new online home of this brand.

Prioritizing rider needs

Like the logo design and branding process, building a website is much easier when you know exactly what your principles are. In our initial online presence review, we’d come up with 4 that we suggested to the agency:

  1. Always put rider needs first
  2. Be accessible to individuals with disabilities such as blindness
  3. Prioritize more cost effective solutions
  4. Use “open-source” applications and data wherever possible

The tone of principle #1 should make it clear that it really takes precedence. A transit website isn’t really for the agency–it’s for the riders.

We worked through a series of conversations with the agency, including feature set lists, navigational flow charts, wireframes, and mockups, to come up with a design that brought the tools riders need to the top, organized the services under a navigation that helped riders see the breadth of services but also drill down quickly, and brought to life the brand and logo we’d already made.

The new eldoradotransit.com

eldoradotransit.com came to life on July 3 after 3 months in development. Difference between the general look of the old site and the new site is just as stark as the difference between the old and new logo.

old eldoradotransit.com

new eldoradotransit.com

But the changes weren’t just about looks. The layout of all the information changed, and many new tools and features were integrated.

Rider-focused navigation

On a web page, putting rider needs first literally means putting the things riders are most likely to want near the top of the page. The old navbar highlighted administrative and contact info for the agency.
old website navbar
Contact info is good, of course. But we’re past the point when riders come to websites just to find the agency phone number. It’s great to leave that in the top right so it’s easily found, but most riders come to websites to learn about the routes and services offered by the agency directly and immediately

So we dispensed with navbar options like “about” and “board of directors”. These are simply not rider priorities. We replaced them with a shorter navbar organized around the services provided.
new website navbar
Now a rider is immediately presented with options that direct them to the services they’re actually interested in, rather than administrative info that they don’t need.

Tools for common questions

The creation of GTFS data and system maps for the agency allowed us to add two new features near the top of the home page that provide a huge amount of rider information quickly: the Google trip planner, and the clickable overview system map.
trip planner and system map on homepage
These two tools address the two questions riders most likely have on their minds.

  • The trip planner: “how do I get from point A to point B?”.
  • The overview map: “where does the service run?”

Because each route of the map can also be clicked on to go direct to the relevant route, the map provides an additional and more visual way of helping riders navigate towards route info.

Thoughtfully mobile-responsive

mobile version of website
This order of rider questions changes if the rider is using a mobile phone. Visiting the site from a smartphone means the rider is very likely to be out and about. They may need basic rider information, and that still needs to be prominent. But it’s more likely that they’re a consistent rider asking a different question that assumes they already know how to get to point B. They’re asking, “where is MY bus?” So the mobile version of the site brings to the top of the page El Dorado Transit’s real-time RouteShout system that helps riders get just that info.

It’s not necessary to make a separate mobile website to have this level of specialization depending upon device. All that’s needed is responsive design: a website framework that responds to whatever screenwidth it’s given, and tailors itself to how it’s being viewed. With this methodology you can have a single website maintained seamlessly on one backend CMS, but also display in a way just right for every mobile phone, every desktop, and every tablet.

An interactive system

The next core component of the website is Trillium’s Interactive Map software. This software allows an agency to visualize its GTFS data, in order to place draggable, clickable, zoomable maps on their site. The El Dorado interactive map played a central role in the site, because it was also a great tool to help visualize the possible connections between El Dorado Transit’s fixed and flexible services.
interactive map showing fixed and flexible services
Dial-a-Ride fare calculatorThe El Dorado Transit fixed routes all tie together, and allow transit over nearly 60 miles of the Highway 50 corridor. But with much of the dial-a-ride services open to the general public, and a huge service area for elderly and disabled riders, it was great to be able to show people that they could get to Sacramento, for example, by taking dial-a-ride into the fixed line from such small, distant communities as Coloma or Nashville on Highway 49.

One of our favorite features we added to the map is the dial-a-ride fare calculator. As with many zone-based dial-a-ride services, fares can get complex for both El Dorado Transit and their riders. Now, it’s as simple as clicking on two big polygons on their interactive map.

All route info in one place

The individual route pages for their commuter and local fixed route transit, previously PDFs accessed by links on the schedules page, got a number of upgrades. The first was putting all the info in one place. The old eldoradotransit.com separated route schedules from route maps. The new route pages unify all the information relevant to a route–basic info like service hours, detailed timetables, and fully interactive route maps–in one page.
50 express route page
Critically, the timetables are HTML and accessible to screenreader software. PDF timetables, especially scans of actual printed timetables, can’t be accessed by screen readers, and present big problems for search engine optimization. El Dorado’s new HTML timetables are fully searchable and accessible.

Easy to maintain

There are plenty more rider benefits to the new site. But it’s important to note that the website is also an important agency asset, which means that the ease and cost of maintenance needed to be considered in all upgrades we made. By utilizing the open-source WordPress CMS, we provided a backend system to El Dorado Transit that was easy to learn to use. And further, because it’s so widely known, any website contractor they work with in the future will be able to pick up where we left off. This helps keep costs down for the agency, and ensures the site stays up-to-date.

Customized for the community

From beginning to end, our project with El Dorado took just over 4 months. We covered a lot of ground, and worked with the agency and community to reframe how they marketed every service they had. We’re proud of the results, and they are too. The lesson we (re-)learned, in what was our 12th website project for a transit agency, is that there’s no substitution for getting to know the service, the riders, the operators, and to build a brand and website just for them. Transit websites aren’t posters on the web. And brands aren’t just pictures and colors. They’re living, breathing hubs of communication between agencies and their riders and iconic symbols that stand for community services. Fostering good communication and strong communities means working hard to get to know them, and to serve them.