Citi Bike, Nike Biketown, et al: One system to rule them all

Multi-site system. Strategy, research, direction, design.
Made at Happy Cog. 

Feb–Jun 16 



The original concept has a very Citi-fied interface and layout.


In the first concept, above, the layout and interface heavily references the overlapping pixel grid emblazoned on bikes and vans, but a literal attempt at ‘brand as interface’ was actually less than ideal. (I remain rather fond of it though.)
Because Citi Bike is identical in service to other major-city bikeshares administered by Motivate, the design system needed to be easily adaptable to all of them: both those already in operation and those to be established.
Launching a branded web experience for each new city was at loggerheads with how quickly and efficiently Motivate could deploy a bikeshare in a new city. Finalization of the agreement with the brand sponsor and host city to the first station installation was often mere weeks, so rolling out a branded experience for each new bikeshare would have led to delays and operational losses.
The final design then aimed to be a kind of cure-all: templatized, confined, but still brandable. 



What sometimes gets lost in the implications of human-centered design is all the humans between designer and user. An argument could be made this deployment chain of people matters as much (if not more than) the customers and users the thing is intended for. Untold products have failed because the design was “user-centric” to the exclusion of all its handlers.
In Motivate’s case, the “white glove” CMS and design system my team developed satisfied the needs of all users, internal and external, client and customer, while the balance between flexibility and fixity left plenty of space for brand sponsors such as Nike and Ford to play. One of the cleverer implementations was the use of SVG icons which would adapt to the brand hex colors specified in the CMS.
The system was nominated for a Webby in 2016 in the green design category, I believe because bikeshares are considered a transporation alternative, though the design’s intent certainly fits the bill: this as sustainable as web design gets.

Designer-in-charge: Amanda Buck. Front-end developer: Dan DeLauro. Project manager: Abby Fretz. 




© 2018 Michael Johnson. Updated 8-16-18.