Scout: Bikebus

The original idea for Bikebus sprung from wanting to take advantage of the commute between one’s home and their office. By putting stationary bikes on bus with a patented safety harness, users are able to get to places that would have been less accessible by a normal bike. As time went on, Bikebus found itself moving toward a more “one-off” event in the form of corporate wellness events or birthdays. While it wasn’t the original intention, Scout and the client decided that the direction it was heading wasn’t necessarily bad and that we could really lean into that audience.

The client came to Scout in search of a complete rebranding as they felt that the current logo and site was dated and a new one could help boost their business while providing an opportunity for new designers and developers to gain experience with small-scale real work. It was helpful for Scout to know that this business was established and has been working with consistent clients for some time. However, with a dated logo and single-page site, we thought that Bikebus could grow to be a much more cohesive experience.

To create an successful new experience we had a couple capstones to reach:

1. Establish a refined brand guideline that includes voice, color, and typography
2. Create components and pages for a new site that uses the established guidelines
3. Ensure the client would be able to move forward with the new branding after handoff

Bikebus was meant to be a high-energy and luxurious experience, yet its initial site and branding reflected an opposite feeling of that. Its logo featured rounded letters shaped similarly to a bus—not usually thought of as the most luxurious form of transportation. Luckily for us, the client was more than willing to let go of their brand and create a new one, and so we did.

We started with a few branding exercises to get to know what the client really wanted in their company. In the very first meetings, we came up with answers to how we want to move forward with the Bikebus brand. Questions like: Was the company going to be unconventional or traditional? Conversational or authoritative? These kinds of questions would shape how we would color palettes and search for fonts. We also put together moodboards for inspiration.

After establishing the general atmosphere of the brand, we started ideating for the logo, color, and typography. In this phase, we came up with as many ideas and directions as possible. Starting with the logo, each team member came up with 10 extremely rough hand-drawn sketches. They included a variety of wordmarks, lettermarks, imagery, and abstract shapes. From these, we found that the client leaned toward abstract logos, and so we refined on those.

After establishing the general atmosphere of the brand, we started ideating for the logo, color, and typography. In this phase, we came up with as many ideas and directions as possible. Starting with the logo, each team member came up with 10 extremely rough hand-drawn sketches. They included a variety of wordmarks, lettermarks, imagery, and abstract shapes. From these, we found that the client leaned toward abstract logos, and so we refined on those.

While some refined the logo, others started working on color and typography. Again, we wanted to ideate and cast a broad net while being wary of overwhelming the client with options. In typography and color, we opted to only show her 10 total type combinations and 8 color combinations.

In the last two weeks of refining color and typography, we split the team and started with the second capstone: to begin creating components and pages for the new site using the established guidelines. We started with a basic hand-drawn sitemap. These established what the developers and designers would need to build from a high-level overview. The sitemap would dictate where information lived and the components to build.

With a draft of the sitemap in hand, we started building out lo-fi wireframes in Sketch. When we worked on the wireframes, we thought about all the components that would need to exist on these pages and how reusable these components would be.

This phase ended up taking a longer amount of time than initially anticipated. We revised the sitemap more than intended, which resulted in scrapping pages that we spent time creating and having to make new pages to reflect the sitemap. One of the largest changes included flipping back and forth with making a user platform for guests to check on their reservations.

The first plan was to flesh out a reservation platform and have users log in with credentials. This would mean that guests that planned on doing a single reservation could manage their reservation and recurring guests would be able to manage their subscription. However, as the wireframes were taking a longer amount of time than anticipated, we decided that we would have to cut down on some development time and building an entire platform would prevent us from being able to release an minimum viable product (MVP) by the end of the semester. In addition to cutting out the platform, we had to create a tighter timeline for hi-fi wireframes and development.

Continuing to use Sketch, we started working on the hi-fi wireframes. To conserve time, we came up with two style directions and had a single round of feedback. In addition, we started developing the reusable components we expected to based on the lo-fi wireframes, such as a checkerboard component, quote block, or something as atomic as a button.

To develop the site, we decided on a headless CMS, Takeshape, and React with Styled Components. In the CMS, the client would be able to edit content whenever and however they wanted (with some certain validations). By decoupling the backend from the frontend, a future developer could update the individual side without having to know how to update the other.

With the semester coming to a close, we started the brand book. The brand book would dictate how the client would go about using components for their brand. We wanted to make this as helpful as possible from a non-designer or developer point of view. This way, our client could easily use the brand book to edit their own site.

We overshot our deadline (last day of classes) by two weeks in the end while we finished up development work. In retrospect, it would have been helpful to start developing a little earlier in the process. Two-thirds of the way through the semester, we held 1:1 check-ins. From these check-ins, the team felt, for the most part, that they were decently satisfied with the progress so far and the direction but could have used more structure and guidance. In retrospect, establishing harder guidelines and starting development earlier would have helped finish the project on-time and would have created a more cohesive design. The designs were implemented in the end and as mentioned earlier, the brand book would help the client in the future with how to design their site.