The Project

Adeo won the pitch to design and develop an accommodation directory carefully curated for motorcycling enthusiasts. The purpose of the site was two-fold: 1) help (hirsute or otherwise) bikers search for places to stay with biker-specific facilities; 2) enable Motogoloco’s salespeople to sign up accommodation providers for a one-off or recurring fee.

Since user engagement is a major part of Motogoloco’s strategy, they wanted to build a community rather than a mere accommodation directory. The core functionality of the site is an innovative Google Maps integration allowing users to plan routes around biker-friendly accommodation and other points of interest, discover and share great roads with friends, and export routes straight to their GPS device.


What I did:

  • Visual design
  • Interactive prototype for route builder
  • Collaborated with developers on front-end implementation using HTML5, CSS3, jQuery, PHP
  • Cross-browser testing

Discovery & Research

Getting to know the brand Through a series of meetings I gained a thorough understanding of the Motogoloco brand, their business model, and long-term goals. Motogoloco already had a strong brand identity and marketing collateral in place, including a range of merchandise, so it was important for the website to fit seamlessly into this.

Sizing up the competition Although this was the first site of its kind to cater exclusively to bikers, I looked extensively at competitors that occupied a similar niche, assessing their strengths and weaknesses, and identifying ways in which the user interface could be improved upon.

Getting to know the users Motogoloco already had a presence within the biking community, the team being a regular fixture on meets, message boards, and social media channels. They spent a lot of time canvassing bikers in order to research must-have features. Being bikers themselves, Motogoloco had a solid understanding of what users would want to achieve on the website.

Accommodation Listing

The directory is split into categories by country and region with filtering options allowing the end user to narrow their selection.

I used CSS3 techniques and pseudo elements to create the nifty ‘porthole’ effect on the accommodation thumbnails.

Accommodation filters
Country category
Accommodation list


I sketched out the map UI in Balsamiq before rapidly moving onto interactive prototyping in the browser.

  • Create Route
    Route Itinerary

Search Integrates with Google Map’s search functionality to suggest location matches as the user types.

Discover Filters and layer toggles allow users to narrow down points of interest or routes by different criteria.

Create The route builder wizard lets users quickly and intuitively plan a route and share it with others.

Export Routes can be downloaded for onward use in most major GPS device formats.

Visual Direction

I worked closely with Motogoloco on the visuals to create a bold, welcoming and quirky style.

Button styling
Iconic photography
Custom icons
Illustrative elements

Final Map UI

The initial version of the map was fully responsive but due to the complexity of the interactions and weight of Google Map’s Javascript dependencies, this proved to be less than ideal for the mobile user experience.

When Motogoloco secured funding to develop a dedicated app I was able to refocus purely on the core desktop and tablet experience, resulting in an elegant, intuitive and more stable interface.

Final Map UI