Shortly after I joined Peloton, we redesigned the Peloton showrooms webpage, which helped users find showrooms around America. The goals of this project were to create a more compact listing of all our showrooms, make it easier to find the showroom nearest you, and make sure our users could get all relevant information they needed on that location.
Live Version: onepeloton.com/showrooms
Our old showroom page listed full-width thumbnails for each Peloton showroom, making inefficient use of screen real estate. With the redesign, we introduced an interactive map to the top of the page so that users could see all available showrooms at a glance and have the ability to click through to any showroom detail page.
In order to make our listings more navigable, we organized showrooms by state (as opposed to our previous design which listed all cities alphabetically) and made more efficient use of screen real estate by creating a grid of compact cards (each showroom used to take up the full screen width). These compact cards also allowed us to surface the most relevant information to our users—address and phone number—before even clicking through to a details page.
We introduced a minimal hover state using a thin line of Peloton’s brand red, so as not to distract from the information on the card, and created an ‘unavailable’ card state in order to notify users of showrooms that had not yet opened, but would be opening near them soon.
Showroom detail pages were redesigned to highlight a beautiful image for each showroom, and clearly display address, phone number, email, and hours of operation. This page also details a zoomed in map to show the specific location of the showroom.