A Recycled Bike Pop-Up Shop
The Problem of Bike Unfriendly College Towns
For many college students, bicycling to campus is a preferred mode of travel, simply because it is cheap and easy. However, finding a used bike in decent shape can be a challenge. This is especially true for college students who have a tight budget and want a quick solution. Many college towns have a few local bike shops that carry used bikes, but don't primarily focus on repairing and reselling them. New bikes are often too pricey for college students who only plan to bike to campus. In addition, some college students are unfamiliar with the process of finding the right bike for them, and don't even know where to begin.
The Solution: An All-in-One Used Bike Shop
Recyclery keeps a variety of used bikes and necessary cycling gear in stock at all times. Some college students have little experience with bicycle maintenance and gear, therefore Recyclery provides them with a reliable and budget-friendly source of bike commuting needs. Since Recyclery is a pop-up shop, it changes locations throughout the year, depending on the demand of bike-ready students returning to school. The website provides an updated source of information for Recyclery's location, and helpful bike maintenance tips.
Recyclery's Visual Identity
Trademark, Typography, & Colors
The Wheel Symbol
Recyclery aims to sell bikes to environmentally-minded college students, and the goal is to become a reliable source for used bike needs. The logo is a mashup between the recycle symbol and a bicycle gear, and the name is the combination of the words "recycle" and "cyclery," which is the term for bicycle shop. Also, the name and symbol implies that these bikes have been cycled on before, and are ready for another life of use by a new owner. The logo is slightly weathered, just like some of the well-loved bikes that go through the shop.
The logo and all headlines appear in "Bebas Neue," a condensed sans serif without any variety to its line weight. This typeface is easy to read, and upholds the kind of consistency any casualcommuter cyclist would wish to find on the road—no bumps or unexpected turns. Adelle PE is a slab serif that contrasts Bebas Neue's uniformity. Recyclery's body text primarily utilizes this typeface.
Bright, Contrasing Colors
Recyclery's colors borrow the bright colors of bicycle repair tools and the metal tool kits you'd expect to find in an old garage. The softer purple and gray balance out the attention-grabbing red and yellow, to create a more inviting, subdued color harmony.
Organizing the Website's Content
The information on Recyclery's site needed to be organized into several different pages. To get a visual representation of the basic content, a site map was built out of sticky notes. Page titles that would appear in the primary or secondary navigation are in pink, page content is in green, and unnecessary doodles that were just along for the ride are in orange.
From here, the information was applied to the layouts of each page built. The site map was referred to during the process of the initial iterations of the site, to ensure information didn't end up in the wrong page.
Paper prototypes of the Recyclery site layout were constructed to get a visual representation of how the content would appear on mobile. At this phase, user testing was accomplished by having people navigate through the paper version of the site. Small paper menus were created to give a similar experience to a menu appearing over a page.
Based on feedback from user testing, a wireframe version of the website was built to allow a more interactive user testing experience.
Additional Paper Prototypes
The Recyclery homepage, shown here at desktop size, presents customers with a brief description on what Recyclery is, and provides opportunities to explore the various sections of the site. The homepage is also a quick way to find the pop-up shop's current location.
Mobile Site Mockup
View a working prototype of the mobile version of the Recyclery website.
Mobile Site Map
Visit the Live Website
This website was hand-coded using HTML and CSS. The live version of the site is responsive to desktop, tablet, and mobile sizes.