Longboarding delivers an adrenaline rush and sense of freedom unparalleled in most sports and activities. It also creates strong communities as like-minded boarders get together to share in the fun. Hillseeker is a mobile application designed to streamline exploration and social interaction, allowing users to experience the sport in a new and exciting way. This project was awarded a VFS Graduate Award for Best UX Design and an Applied Arts Award for Best Interactive Design in 2013.
For my VFS grad project, I examined the growing sport of longboarding in Vancouver and designed a mobile application which would streamline the experience of finding new and interesting hills to ride for boarders of all skill levels. The end result is called Hillseeker and focuses on 3 key areas: Community (meeting new people and groups to ride with), Exploration (finding new places to ride, catered to the user’s skill level) and Gamification (providing incentive by offering rewards for completing challenges, resulting in friendly competition). There is also a huge emphasis on rider safety, positive attitude and respect for the road/others while riding.
After performing an in-depth competitive audit, I developed a unique brand identity that speaks to different types of longboarders without falling into the typical design traps that many current brands exhibit. The final logo combines the dimensions of a speed limit sign, the H and S from the word ‘Hillseeker’ and a shooting star pointing the user to the perfect hill. The primary typography was loosely based on street signage, making use of a condensed font which would allow for more characters per line on smaller screens. The main colors used were dark blue and yellow, the colors of fresh pavement (yellow also reflecting safety and positive energy).
I engaged in a system thinking process, examining the sport from every angle and breaking all activity down into elements, interconnections, purposes and paradigms. In order to create accurate personas, I gathered survey results from riders in several countries. I also interviewed key players in the local longboarding community. This was integral to understanding what makes the sport so enjoyable in Vancouver in particular, and what risks were involved with my project, such as safety issues, bi-laws and the relationships between boarders, residents and police. I also performed a lengthy SWOT analysis of relevant applications and websites such as Nike +, Strava and Foursquare. After finalizing 3 personas with distinct interests and goals, it was time to move on to wireframing. With the invaluable help of my mentor (Carter Gilchrist), I went through several iterations, making incremental improvements until I was satisfied with the functionality and consistency of navigation throughout.
The application needed to look beautiful, so I put a lot of work into getting the minute details right. It was important that the aesthetic be instantly recognizable as related to longboarding/skateboarding. I accomplished this by layering textures to create the effect of surfaces such as grip tape, wood and denim. I created all the assets myself in Illustrator and Photoshop, including custom map overlays and a large set of icons and badges that appear throughout the different sections of the app.
The result ended up being much more comprehensive than I had anticipated. I succeeded in focusing on the 3 pillars of the company, and added privacy options for advanced users who wish to keep their activity secret. Another late addition was the implementation of a progress bar that tracks how many times a given run has been completed in the last 7 days. Once the bar fills up, that run will disappear from the map for a period of 3 days, ensuring that particular runs do not become overpopulated and ruined for the community. I learned an extraordinary amount throughout this project, specifically in the areas of information architecture, user experience and file organization. I invite you to take a look at screens of my process, watch the case study video and download the PDF Interactive Design Document for an in-depth look at the making of Hillseeker.
—-> Download the Hillseeker Outline PDF