Interactive Design | Print Design

Having a system the helps you bike smarter and harder is something that is difficult to achieve. Using the advancements in AR and HUDs we were able to come up with a product that allows riders to not only bike smarter and harder, but also safer. Cadence is a pair of glasses that you wear that can show you obstacles in the road, get you where you are going, keep you connected to your social media, and keep you motivated while working out. This project allowed us to fully explore this concept from start to finish and create a whole brand experience from visual design to ux.

Timeframe 6 Weeks
Roles UX / UI Designer Branding / Logo Design Market Research Video Production Project Management VR / AR Design User Testing & Research 3D Modeling
Skills Blender InDesign Illustrator Whiteboarding After Effects Adobe XD

AR is an exciting new field that is being used primarily in gaming situations. When biking users don't have standard apps that are used while driving and walking such as maps and alerts for keeping yourself safe and on track they feel behind the rest of the community. Also riding bikes presents an opportunity to take photos and videos of scenery and situations that otherwise wouldn't be possible. The bike world needs to catch up to the rest of the transportation and exercise industry.


Create a solution that allows bikers to have directions from one place to another. Use their phones. Take photos and videos, and keep track of their physical activity all while riding their bike and staying safe on an always more dangerous world.


Cadence is an AR app combination that allows for users to interact with their phone without sacrificing safety. Users can have real time information displayed on their goggles. Such as directions, speed, locations, dangers, and special situations. It also learns from you and can respond to texts and calls for you as well as take photos and videos that you share on social media. Non invasive headphones allow you to still hear the outside world while also talking to the device. Also custom glasses will adjust themselves to the current sun level and become the needed level of sunglasses to keep you safe on the road.

Preliminary Research

Starting off a project that we didn't fully understand the scope of required us to take a look at the entire ecosystem that we would be working in. We decided to look at the current market place, our competition, and do interviews of local bike riders to help us fully understand the problem that we were trying to solve. It's always a good idea to make sure you truly understand the space that you are working in before you start making design decisions.

Augmented Reality Heads-up Display

We did research on what exactly AR and a HUD were. Knowing the in and outs of both would later allow us to take these to their current limits and use them in very unique ways. Augmented reality is a technology that superimposes a computer-generated image on a user's view of the real world. A Heads-up Display is a transparent display that presents data without requiring users to look away from their usual viewpoints. So a HUD is very useful to us because it allows our bicycle riders to stay focused on their ride while still getting the information that they find interesting. We can then also use AR To highlight important objects around them to help them see what they need to.

Our Competition

Our competition was a small batch that mostly all followed the same patterns. The most common theme is the Google Glasses-esque HUD that is a small box off to the side of your vision. While this works as a partial solution to the problem, it very easily can block vision of the rider and cause them to feel unsafe. It also forces the HUD to be in a specific location, and with riders all positioning themselves differently while they ride, being able to move around the HUD is a must.

The Marketplace

Our marketplace research showed that the AR / HUD marketplace is currently growing and prospering. It is a place where a product like our would likely thrive and do very well. This was a good confirmation that we were on the right path as to selecting technology that is going to make a huge splash in the world.

Interviewing Bikers

Now that we had a viable hole in the market, we needed to figure out what the best way to fill it was. We didn’t want to make any assumptions about our users, so we created a long survey that we gave to all different kinds of bike riders. We had a couple of goals while interviewing these bike riders: the first was to identify the user base, and the second to gauge interest in our feature set. We also decided to each do a few in person interviews instead of a huge amount of online interviews. These in person interviews would allow us to really understand the people we were interviewing and ask follow-up questions when they were needed.

We had a number of different topics including the type of cyclist, their fitness, questions about instructional biking, how they would want to interact with a AR HUD, saftey, and how and when they would want to use social and entertainment features. Below is some of our questionnaire results.

We took these results and broke them down into 4 different personas.


These 4 personas represent how our users were broken up into different key groups. We then took these personas and looked at the feature set that would be important to them.

Feature Set

We first wanted to gather a list of all the features we could. We got this from a number of different places. The first of which was the competitor analysis that we did. The second was from all of the user interviews we did. And the final way was just all the things that we could come up with on our own. We have a list of table stake features that we figure everyone needs to have to even be in the space. And then a list of our unique features that competitors don't already have and that would set us apart in the marketplace.

It became pretty obvious pretty quickly that this was a huge list of features that we were not going to be able to make smaller on our own. The product, while big in scope, was not this big. So as a UX question we had to ask ourselves what our users would want to see and what they would want to use. We broke all the features up into an excel spread sheet and looked back at the personas and our interviews and looked at what users were most likely to use what features.

We learned a lot from this feature experiment. The first thing we learned was what user-base we should focus on. Fitness and Commuter riders were not only more likely to use the app throughout all age ranges, but they also had the most interest in the different features that we would offer. We also learned what the must have features were in order to keep our users interested. The key one of these was the upcoming hazard feature. Anything that would keep our users safe was a must have. And that is also why all of our users were hesitant to listen to music during a ride. Because of this we decided that if we did include music in our app it would be played in a way that would not stop the rider from hearing sounds around them. All of this information informed the choices and decisions that you will see throughout the rest of creating this app.

UX / UI Design

Using the feature set that we created as well as the chart of how likely our users were to use what, we were able to start creating the experience that our riders would go through when they went to ride with Cadence. We started off by white-boarding our ideas and thinking about the on-boarding experience as well as some key user flows that would explain how a user interacts with Cadence. While doing this we thought about a number of challenges that we needed to overcome first. These were always keeping safety first, thinking about the hardware and how to integrate technologies that usually get in the way. Dealing with the information overview that can be provided to the user by minimizing visual distractions and considering using visual vs. audio ques to make sure that our users understand what is happening. And finally helping different riders with all their different needs.

With out on-boarding experience we really wanted to make sure the user felt confident in Cadence. We wanted them to know that they were in control of their experience. That is why there are many different ways a user can first experience Cadence. The shortest route is just one or two clicks to start riding with Cadence. But a more ambitious user might want to try and customize things from the start, and we allow that user to have the experience that they want. One of the biggest things that we learned from our user studies was how much users want to be able to have the ride that is custom to them. We also make sure to make the experience as pleasant as possible by using both audial and visual ques to interact with our app.

Other Userflows
Lo-fi Wireframes

We then got together and decided that before we could finish working on the app and decide what it would really look like, we needed to understand more of the user story. Particularly how they interacted via the app side. So we got together and created a Lo-Fi wireframe version of the HUD setup part of the app. This is demonstrated in the following images. Note that this is Lo-Fi and just used to get an idea of how this interaction would happen.


Now that we had the basic overview of how the user would be interacting with out app, we needed to really start thinking about how they would see the app when they used it. Especially when they were wearing the headset / looking through our special glasses. In order to start this process we first gathered a list of all the important things that could possibly go on the HUD. This was broken up into different categories which we decided would be different screens the user could select between. Each one of these screens would be customization by the user if they wanted anything to be changed, and also could be switched between mid-ride if asked for. First we all came up with different ideas of what those different HUD elements might be and where they would be located.

From here we discussed the benefits and drawbacks to each idea. Once we had selected three close contenders that we thought might work well we took them in front of our users and asked them what they thought. Our users taught us some very important things. One of the most important things was where the eyes are depending on how you ride. Some riders like to ride in the "drop" position where there heads are closer to the handlebars. When a rider is like this they are looking out and up towards their forehead. This means that we can't have any information at the top of the screen in this case. But riders who don't ride in this position really wanted to have the information at the top of their vision. We also learned that once a rider learned what a certain piece of information was, they were very easily able to remember that. Making having icons there all the time fairly useless. Therefor we decided to remove these icons once the ride started. Giving the user the ability to call them back if they ever forgot.

Here are some example screens in both the icon mode and the sleek mode as well as a third text mode that had both text and icons.

These HUDs all have the ability to also be pinned to the bottom of the screen for a user who would prefer it that way. They are all shown at the top here for consistencies sake.

The Glasses

Now that we had a lot of the experience mapped out, we needed to start thinking about other things that an investor would want to know about if they were going to invest in something like Cadence. The first thing that we decided would be very helpful was a mock-up of what the glasses would actually look like and what technology they would use in order to actually function. All of the technology we reference here is real and could be used to create these glasses with the right engineering team. To create these mock-ups Blender was used.

The Branding

Now that we had the majority of the product built out it was time to think about branding the product. We left off from doing this from the start because we really wanted to make sure that we truly understood the product before we tried to give it an image. We did a logo and name selection process which involved all of us coming up with a bunch of names and then testing these names on the bike riders that we knew to see what they thought of them. The name that definitely stood out the most was Cadence. The qualifications we wanted for the name was for it to relate to biking, not immediately associate with someone real, and to be a person's name so the user would know who they were talking to. Cadence fit all three of these perfectly.

From here we started with a simple mood board which conveyed the feelings that we were going for throughout this process.

Once we had the mood board, the next task was to create a logo. The logo was an amazing team effort that I don't think I have experienced again. I started off with the basic idea of the logo, and then we just passed it around everyday for about a week until we eventually all had worked to create something that we were all very proud of. The letter forms in the logo were also slightly adjusted to fit our needs.

This logo was perfect because it not only felt fast and sleek, but it fit really well into an app icon, and in the competitive marketplace, which was something that we made sure to test it against.

Once we had a logo that we really liked, we expanded it into some basic merchandise to give an example of what that might end up looking like.

And then finally for branding we created an icon suite that you saw earlier in our HUD mock-ups.

The Movie

As a final piece to this body of work, we created a video of Cadence in action. This helps to capture a lot of the basic functionality of Cadence as well as inspire our potential users to think about what they might be missing.