Motivate

  • Multiple Website System
Designing a system to rule them all

Motivate makes cities more accessible, healthy, and sustainable by planning, launching, and operating bike share systems around the world. They launched Portland’s Biketown, expanded New York’s Citi Bike, and currently facilitate the operation of a dozen world-class bike share systems.

Problem

Managing their old sites had become a nightmare. Users on the go were unable to find the information they needed on mobile. The sites weren’t effectively communicating the value proposition of joining a bike share. Motivate needed a new platform that would solve these problems and allow them to spin up a website faster than they could launch the city’s bike share.

Solution

We worked closely with Motivate to create one system that would rule them all. While every city’s site is hierarchically consistent in layout and information architecture, each feels visually distinct and uniquely their city.

2017 Webby Honoree, Green

gif of motivate sites

Process

After stakeholder interviews, we began with an on-site workshop. Before moving into design, we created page description diagrams to help us identify content needs for each page template.

page description diagrams

The visual design began with the Citi Bike brand. We created a number of templates that could serve as the launchpad for future bike share websites.

homepage for Citi Bike

We designed a flexible “banded template” that could work with a variety of content needs. Our developers devised a clever way to allow admins to choose options for images to lay within or overlap a band’s background, all in one template.

banded template for Citi Bike

We designed with future content needs in mind, such as events that build up during the summer months, and city exploration tips that can be filtered by categories and attraction types.

Events and Explore pages for Citi Bike

The “Explore” pages also feature a fun biker that moves on scroll.

biker gif on Citi Bike

After launching Citi Bike, we helped Motivate launch Biketown, Toronto Bike, and Hubway using the same structure and design system. We also created a reference guide to help Motivate’s web admins select typefaces and colors for future websites that will work within the design system.

Reference guide pages

In the time since Citi Bike’s launch, Motivate has independently launched a few additional sites within the system: Divvy, CoGo, and Capital Bikeshare.

gif of Motivate websites
mobile screens of Citi Bike website

My Role
Lead design, Design system, QA, Reference guide
Year Completed
2016
Credits

Designed for Motivate at Happy Cog.

Design Direction: Michael Johnson, Brent Arnold
Design:
Amanda Buck, Aura Seltzer, Dana Pavlichko
Front-end Development: Allison Wagner, TJ Pitre
Back-end Development: Dan Delauro
Project Management: Abby Fretz

Visit live site