Roast and Coast

Roast and Coast is a coffee and bike shop in Boulder, Colorado. As many cyclists drink coffee before bike rides, Roast and Coast provides a location where cyclists and coffee lovers can come together for community, bike services, and a good cup of Joe.

Project Objective

For Roast and Coast, the biggest challenge I faced was creating a design identity that represented cycling, coffee, and Boulder, Colorado, in a cohesive design. For this project, I wanted to highlight the cycling and coffee at Roast and Coast and how they can benefit the Boulder community. Second, as cyclists were the primary target audience, I wanted the messaging and the flow of the website to reflect that in my design.

Knowledge Utilized

  • HTML
  • CSS
  • JavaScript
  • Bootstrap
  • Figma
  • Photoshop
  • Illustrator
  • User Experience Design
  • User Interface Design
  • Responsive Web Design
  • Logo Design

Bridging the Gap

For the logo mark, I wanted to utilize the organic shapes that connect coffee and the environment riders ride in, whether it's road or mountain biking while incorporating the mechanical elements associated with the bike, such as the spokes and hub on a bike wheel.

For cyclists, especially in the Boulder area, elevation plays a huge part in determining a route to ride within a given time frame. Cyclists have used topographic maps to better understand elevation changes to aid their planning for a bike route. Because of their organic ring-like shape I incorporated them into the section images to highlight the organic nature that both coffee and this tool cyclist use to evaluate the environment around them allowed me to make a visual connection to coffee, cycling, and Boulder’s environment.

The Topographic design also creates a beautiful backdrop for the hero section emulating the free-flowing movement of steam coming off a freshly brewed cup of coffee or the flow of a mountain bike trail as a rider moves through it.

Home Page

Coffee and Cycling today go hand in hand, so I wanted to find a commonality between the content, like the design elements, and reflect it into the text. If you ride with a group of cyclists, you will soon find out that most riders start their rides early in the morning so they can ride while there are few vehicles on the road, beat the heat in the summer in warmer climates, or even to give themselves more time to spend with their families throughout the rest of the day. Because they start early, cyclists tend to gravitate to coffee to give them a boost before they head out the door on their ride. Because of this, I start the central message of movement with “Get Your Adventure Going” as the Hero text and how Roast and Coast can benefit the cyclists of the Boulder community to get them the boost of caffeine or bike maintenance they need for their next adventure. As you move throughout the page, I continue the idea of movement through the layout of section headers and images by swapping the orientation, creating a zig-zag motion the same way riding through a winding road or a mountain bike trail while moving the viewer down the page.

As the goal of Roast and Coast business is to provide great coffee and bikes, the Our Story Section is used to set the stage for the user that this is a place of community where cyclists can hang out at any time and while they are their Roast and Coast will provide them with the services they need.

Similarly to the hero text, I keep the message of movement going with “Bikes and Services to keep your adventure going.” for this section, I had three factors to the cycling part of the business I needed to showcase. First is the different levels from new to professional riders and other disciplines such as road and mountain biking. Second is what brands Roast and Coast offer and how they help each customer. Finally, is the bike maintenance service provided for every level of cyclist and any maintenance their bike might need.

As I have established earlier, coffee is an essential part of many cyclists' pre-ride routine, so for the coffee section of the website, I reflect that in the section header by writing, "Every great adventure starts with a good cup of Joe." For the menu itself, I separated the food categories so the viewer can select the section of the menu they want to view based on their need, whether that is planning on eating lunch with their friends after a long ride or getting a coffee before that ride.

As the community is a crucial aspect of cycling and for Roast and Coast, for the web page's footer, I included the store hours and contact information, and times they organize group rides to establish that community element to their business model.