Junior Designer at
I first learned about Hammerhead through a blog about mountain biking. The team was a small group of passionate cyclists building a better bike computer. Their quest to bring technology into the cycling world was a mission that I wanted to be a part of. After a few cold emails I got in contact, interviewed, and then began my journey at Hammerhead.
My first year at Hammerhead was working as an intern for the design team. I initially created assets for the user interface of our device, Karoo. Over the next few months my work shifted towards creating marketing assets. Leading into the school year, I took on a larger role kickstarting the design of our web dashboard for users.
The dashboard was an opportunity to start thinking about UX principles of our software ecosystem from the ground up. We needed the user flow to be obvious. As an accessory tool to our main device, Karoo, the dashboard couldn’t add complexity.
The dashboard was presented as hobby project of an employee at the company. It was a hacked together website that could take .gpx files from bike computers and visualize the data. This GPS information could then sync with our device without the need of connecting it to a computer.
An early mockup of the main dashboard for a user flow chart
One of the unique challenges we faced was thinking about minimal interaction while conforming to the existing software’s structure. We were designing for what already existed, and we didn’t have the resources to completely rewrite it. Any deciscion I made was made alongside the developer who wrote the software.
Some of the to-be-integrated features couldn’t be made without design constraints, and couldn’t be designed without the constraints of development. The best example of this was dealing with syncing bike routes between the Karoo device and the dashboard. As we began testing, we noticed that users were stumped when it came to synced routes. Users didn’t know when routes had been synced. The software synced too well.
Many of the users had previously used old bike computers. Traditional bike computers require the user to connect it with a cable to a computer in order to transfer ride files. Our dashboard magically synced rides, which resulted in confusion. There was no explicit indication that routes have been synced on the dashboard side. I added check marks on routes to visually show that the routes had in fact been syncing. Along we this I added a label showing the last time a route was synced with the device.
A synced route
By explicitly showing to the user that a route has been synced, there were no questions of uncertainty. The syncing issue was an example of how user testing can provide very direct and impactful changes.
Over the next few months, we iterated over countless lo-fi to hi-fi prototypes. Earlier this summer we released the Karoo dashboard beta at app.hammerhead.com. The new designs are continuously being integrated.
The dashboard today
Custom Maps & Navigation
Finishing the school year I was eager to join up with Hammerhead again to continue my work. Luckily my timing led me to working once again with the dashboard. My project was to improve the mapping and navigational interface on the device and dashboard.
The only problem starting this project is that I knew nothing about designing maps. To familiarize myself with the best practices and tools for map design, I consulted with my friend Benny, a geodesign expert. His knowledge helped me understand the hierarchy of maps and how data could efficiently be displayed.
Hammerhead’s need for better map interfaces comes from the Karoo’s inherit need for accessibility. Karoo is intended to be ridden in all kinds of horrible conditions. Everything from handling the jolts from mountain biking trails to getting drenched in rain had to be anticipated. The default maps that came with Mapbox were designed to be viewed on computers and smartphones. Lack of contrast could make navigation impossible in poor conditions. On top of that, some users commute with the device at night which is blinding with light colored maps.
Karoo in the rain
Our second concern was about displaying terrain. Our device can’t download all of the topographic and lighting data needed to display terrain. But, users need to understand terrain when creating routes. Most users create routes on the dashboard, so we decided to make online and offline routes depending on how the route is viewed.
When I set off on the design, I narrowed down my primary concers:
- High contrast in light, color, and font size
- Color palette for colorblind users
- Light & dark maps
- Online & offline maps
We had the opportunity to take advantage of new bike path data as well. This would tell us not only where bike paths are, but which side of the street as well.
Editing the size of railroads at various zoom levels
A problem I ran into as the maps started to come together was that there could be over-contrast. If everything has to have contrast, nothing has enough contrast.
Too much contrast
Cool, but unreadable
Eventually I landed on a good middle ground between overpowering contrast and a solid grey map. The new maps are now used on both the device and on the dashboard.
Overview of one of my favorite rides, Lookout Mountain, on the dark map
Data Screens & UI Animations
This project was presented as the future of our software. Our software had been designed and built on the stock material design framework provided on Android devices. The software had been developed to the point where we could begin figuring out how to incorporate our branding into the UI. My job was focusing on taking static screens and figuring out how to dynamically display the data.
Video showing some animations of data screens
One of the most fun projects to work on was the boot sequence of the device. I needed to create a custom transition from the frozen Hammerhead logo at startup to the devices home screen. After figuring out technical requirements, I decided on having three states of the boot sequence:
- Intro animation to transition between the static image and the loop
- Loop animation
- Outro animation to transition between the loop and the home screen
The goal was to make a transition from the static to the dynamic. The new UI is made to be fun, interactive, and accessible. The animation is made to hint at the devices capabilities as a whole.
My time at Hammerhead has developed my skills not only as a designer, but as a professional. The unique challenges and opportunities from working remotely have shown me what it means to work in 2018.