March 27, 2018 | Website Design

Building A New Site for COAST: Pulling Out All The Stops

When it comes to public transport, finding your way to where you need to get should be simple and uncomplicated. For the team at the Cooperative Alliance for Seacoast Transportation, or COAST, this means helping those who ride the bus find get to their destination seamlessly. But by late 2017, it became clear that they needed a new website to help riders navigate easier in an increasingly digital world - and they picked Altos to help make it happen.

New COAST Site

We took a look at their site and drafted a proposal to drastically improve navigation and route planning on a number of fronts, guided by COAST’s own checklist of must-haves and propelled by our expertise in creating complex, highly usable web experiences.

The result is one of the finest examples of functionality and user-friendly navigation we’ve ever produced: the new coastbus.org, designed with riders in mind and built to make even complex trips simple to navigate.

Breaking Down A Complex Project

From the word “go,” we knew that working on the new COAST website was going to be a complicated, multi-step process. Apart from being a partnership with a publicly-funded entity (with all the accessibility and usability requirements that went with it), the COAST project touched dozens of contacts on the client side, and passed through just about everyone on our end as well. Keeping the project on-target, in scope, and in budget took some serious Project Management, and we couldn’t be happier with how it went.

By breaking the project into manageable benchmarks with individual team members accountable for each section, we managed to organize a wide range of content collection and timeline tasks in one straightforward experience. Using Teamwork, our Project Management platform, we were able to loop both the client and our in-house teams into one solid workflow to keep required assets and all of the moving pieces seamless to keep the project moving forward.

COAST Bus Home Page

A Simpler Way To Get Around - Starting On The Homepage

Busy bus riders on-the-go have little to no time - or patience - to spend minutes scrolling through menu after menu or page after page looking for their desired stop. That’s why we took steps to simplify that user experience and make navigating to the most commonly-used pages as easy as can be.

The homepage now features the site’s three main functions right on top of all other content: a Trip Planner, a list of Route Schedules by town, and a list of Alerts with Twitter integration to let riders know of any updates as soon as they come in.

The site is also built for total mobile convenience, with navigation and menus built to make mobile navigation simple and unobtrusive. The three main site functions (Trip Planner, Schedules, and Alerts) are also preserved at the top of the mobile menu, keeping that easy access even on a small screen.

And because some of the main content users are looking for include fare info, schedules, and holiday closings, we put those right at the top of each Route schedule - simple to find, and even easier to find again and again.

COAST Bus Trip Planning

Route Navigation & Trip Planning, Made Easy

We’ve spent plenty of time puzzled over poorly-drawn maps and subway routes, and we knew that COAST needed something clean, straightforward, and easy-to-read for riders to get where they’re going without the added hassle of trying to decipher some cryptic color-coded map.

That’s why we integrated COAST’s existing route listing structure into a new, clean layout, which easily breaks down routes into Southbound and Northbound directions, allows users to filter by Weekday and Saturday times. COAST also provides a route map using GTFS files to import routes onto a Google Maps visualizer to see your whole trip based on time of day, starting and end point, and day of the week.

And because COAST’s routes make distinctions between Timed Stops (which are guaranteed at each listed location) and all stops (some of which may not be guaranteed), the old site previously separated all stops and Timed stops on two different pages. With limited screen space and functionality in mind, we combined these pages into one, Timed Stops listed on the routes page and all other stops listed in hidden dropdown accordions. Users need simply select the "View All Stops" button to expand and show the expanded routes.

COAST Bus ADA

ADA Compliance Makes COAST Accessible for All Riders

Because COAST receives a portion of its funding from the federal government, the site had to follow all relevant Americans with Disabilities Act (ADA) compliance regulations. This includes a wide range of required formatting, from sight-impaired contrast and meta tagging settings to text size and ease of navigation.

Our development team is well-versed in ADA compliance requirements, and so we built the site to meet nearly all of these guidelines for all riders to easily and seamlessly navigate to exactly where they need to be.

COAST Bus Store

eCommerce Integration For Easy On-The-Go Shopping

Because everybody likes a bulk discount, COAST allows riders to purchase multi-ride punch tickets and monthly passes to help regular riders save money by buying up-front. To make that process just a little easier, COAST asked us to fully integrate these products into the new site, which meant eCommerce integration for all COAST users.

All users can navigate to the online store to browse COAST’s shopping options, register user accounts through the COAST site, and purchase through the online ordering system. This nets COAST around 200 orders per month currently, with plenty of room to grow in the years ahead.

Ready To Hop On Board?

In working with COAST to bring the new website online, we found ourselves diving into one of the biggest, most complex projects we’ve taken on - and we couldn’t be happier with the end result. Built for improved functionality, better navigation for riders, and compliance for a host of accessibility and usability requirements, the COAST site challenged us to find solutions for a range of problems, all while working with an extensive team and dozens of content requirements.

Tony Matos
The COAST project afforded an opportunity to flex muscles we knew we had but don't often leverage. Perhaps the most complex project in the history of the agency, COAST represented a blend of custom design, development and tightly coupled integration of the General Transit Feed Specification (GTFS). This spec defines a common format for public transportation schedules and associated geographic information. The result is an intuitive online presence enabling a 'rider' visibility of location-based services. And I'll add working with Team COAST was an absolute pleasure.
Tony Matos, Altos CEO

Want to see for yourself just how we took on the COAST challenge and brought a beautiful new site to the seacoast? Check out coastbus.org, and see how much went into the finished site - then, give us a ring and we’ll talk about what’s on your plate. We’re always excited to take on what’s next.

Visit Site

Let's Put Our Minds Together.

Work With Us