Peloton - A speculative project for enhancing social interaction, participation, and community through cycling

A peloton is the main field of riders in a road race, translated literally from French as a “pack”. This project, the outcome of a ten-week immersive bootcamp, took the form of a mobile locative tool. It seeks to enhance social interaction, participation, and community by bringing together cyclists both in the digital and physical world through group riding.

The project took form through a rigorous identity design process, creating a visual language structured around the circle. Taking inspiration from rotating wheels and hubs, gears and pivots, laps and race intervals, the circle became the DNA around which all visual elements within the brand were designed. A custom wordmark and resulting letterset was designed using a circular grid, positioned alongside a bespoke symbol representing the configuration of cyclists (within a peloton) visualized from a bird’s eye view. A secondary numeral set was developed — designed in adherence to the pixel grid — as a means of enhancing the brand experience by capitalizing on the display of data in the form of distance, speed, and time statistics. Buttons, maps, symbols and icons have all been custom designed based on circles and rounded aesthetics.

The identity capitalizes on a clean, stripped down aesthetic, providing a focussed, intentional design. As the app will be used by riders on the move, design considerations in all of their deliverables required minimal, purposeful forms to prevent distraction and confusion.

Brand Audit - Establishing where opportunities can be found

The process of designing a mobile app for tracking, saving, sharing, following, and leading group ride activities began by surveying the existing market of digital tracking products. Many of the features that I was interested in exploring for the Peloton app had already been brought to market, but many of these were either difficult to use, intended for different purposes and activities, or were poorly designed. The importance of initiating a brand audit and looking at what currently exists is an effective place to start as it provides insight into what current products offer, where gaps can be found in the market, and what visual languages have already found currency with audiences.

Peloton App - Designing an experience with movement in mind

Elements were created with the cyclist in mind. From the placement and design of buttons to the ability of the app to respond to changing light conditions, the features offered through the product keep the interests and safety of the rider in mind. As more and more cyclist are integrating handlebar-mounted phones into their riding experience in order to access GPS and Google Maps, the design sought to allow cyclists a safe and effective experience while in the saddle on a ride.

The ability to find, track, and save rides was fundamental for the product. Completed rides, as well as the amount of followers participating within each ride, becomes a form of currency for users. Mapped rides and all of the resulting statistics are saved, providing followers with information and options for making choices for participation. The ability to search for rides ahead of time, as well as rides currently in progress allow users to join group rides at any time, as well as the ability to locate and find rides. Rides can also be searched for by individual leaders or followers, with the ability to review ride histories through a saved rides library. A culture of sharing is quickly developed, with cyclists offering both new and familiar experiences to the wider community.

Lots of sketching and wire framing was produced before developing high fidelity prototypes. InVision was used as a testing ground with participants, and the design was finalized over a series of stages, iteratively improving the experience.

Peloton Responsive Marketing Site - Promoting the history and future of cycling

A simple, responsive website was developed in order to promote the product, focussing on key features and attributes of the app. The site — in line with the brand — incorporates a lean and light aesthetic, extending the visual language of the identity into a desktop environment. A simple scrolling page layout presents all relevant information, while a typography driven “About” page communicates the intention and reason for the development of the product. The experience has been designed with consistent elements in order to secure viewer trust and confidence from one platform into all other brand touch points, while at the same time building excitement and awareness for the brand.

Peloton Responsive Marketing Site - Responding to tablet for home

The Peloton ecosystem of product design responds to tablet in order to extend the experience into a larger mobile screen. Keeping track of statistics, upcoming rides, leaderboards, and followers from the comfort of home on rest days allow riders to stay connected through a number of mobile devices.

Peloton Responsive Marketing Site - Scaling the experience into the palm of your hand

All aspects of the responsive site have been considered for display on mobile. The simplicity built into the DNA of the identity has allowed for a seamless, consistent translation and migration into numerous environments. All content appearing on the desktop site adapts to mobile, offering the same rich and informative experience to all viewers on all platforms.

Peloton - Extending the identity into product and cross-promotional channels

While the digital products integrate the Peloton identity in a conservative manner, the application of the mark, colours, and logo onto clothing and product is done in a much more bold manner. The identity extends around corners and off of edges, is applied in a more generous scale, and is used more artfully as a graphic flourish. Where all online and digital applications of the identity work towards securing a level of familiarity with the identity, printed applications of the mark expand the visual identity into more playful and energetic configurations. The physical world is where the action takes place through movement and discovery, and the identity responds to this dynamic environment. The identity continually adapts to this context, artfully and playfully morphing and translating in order to prevent the language from becoming tired and expected.

Printed stationery and ephemera, online banner adverts, printed posters, and product marketing applications extend the visual identity across a wide array of media, integrating numerous touch points within the marketing of the brand.