designsbyben.co.uk
HTML 5 CSS 3 J Query Drupal 8 Photoshop Illustrator After Effects Mailchimp Zurb Foundation
Devices mockup

Southeast.bike

Southeast.bike is a rebuild/rebrand of one of my long-term feelance projects. Formerly known as Jab UK, the website is a resource for mountain biking in the south east; news reports, photo galleries, directories where to ride and clubs. Up until now the site had worked on a customised Wordpress template, but the latest set of changes meant Wordpress would no longer be sufficient - I would need something completely custom.

The concept was simple enough though; a shop local to a trail would be able to ‘manage’ the trail page. Their information would be displayed on the trail page, free advertising if you like, in exchange for local knowledge. They would keep the trail page up to date with the latest news, this would appear in a ‘latest news’ feed on that page, as well as on the homepage and news feed.

Venue details page

Design

As I was building from scratch, I decided to rebrand at the same time. A logo that was also the web address would make it easy to remember, and the new domain extensions that were due to go on sale would make this possible. Southeastmtb.co.uk was too long for a logo, .bike was the meaningful abbreviation needed. The only initial problem was the public not recognising it as a domain extension, this has improved over time.

I chose Roboto Slab as it has a modern but trustworthy appearance, with the green representing the outdoor world, the hue reflecting the modern, electronic side of the brand. The pointer and cog replacing the ‘o’ symbolised the locations for riding a bike, this was used as the profile icon on social media.

An animated version of the logo was also created for any YouTube videos, which played out along to the sound of bike’s clicking freehub body (the sound a bike makes when freewheeling).

Logo alternatives
Animated logo
Teeshirt
Mugs

Accompanying this theme I chose to use a cartographical pattern, which actually swayed me to base most of the media on a dark grey background. I felt this looked better, but was a risk at a time when everyone else seemed to be opting for the white, ‘minimal’ look. I think it helped the brand stand out.

This cartographical pattern has since become very popular in the mountain biking world, but this was a fairly unique choice at the time. It was used in the website background, teeshirts, mugs, business cards.

People looking at tablet
Downhill rider on the trails

The focal point of Southeast.bike is the trail resource. The previous site provided scant information on venues, and photos that often didn’t even relate to that place. It’s main focus was on news, but the google analytics results were telling me that the most interest to users were the trail information pages. So this had to change.

Interestingly, other online resources suffered from the same content issues that Jab did, so making these pages really informative and helpful would give Southeast.bike the edge. As a result, the year before the site build was spent driving to venues (2-3 per weekend), photographing and writing reports on return. The information was then carefully broken down so that essential details could be obtained at a glance, with further information below if required. Ratings were based on what other venues in the region offered, making them easily comparable.

Later that year I travelled to bike shops with the early concept art to gain interest. It was very well received.

Website navigation

An important website design requirement is quick, easy navigation. Southeast.bike can be broken down into it’s 4 basic categories, these are displayed with icons to help users to identify the ‘departments’ quickly. Drilling down could be achieved by a much disputed ‘hamburger menu’, or within the sections themselves. The hamburger menu was well suited in this instance, as stopped the header from becoming unnecessarily cluttered. On portrait tablet and mobile, the hamburger appears as a fixed button in the bottom right of the screen, mimicking Google’s Material Design layout, and making for easy thumb navigation.

Nav on phone

The news feed features a large, attention grabbing first article. A news story features an uncluttered, single column layout, complete with narrow width paragraphs and larger font sizes to improve user experience. A page manager is given the option to add a Youtube video and images, or just stick with a default set image for that venue if they don’t have accompanying media.

News feed
News artice

Development

Alongside the design mockups, I began trying some of the features in HTML and CSS. Once a basic UI had been established I began transferring these to a Drupal 7 installation.

Why Drupal? I had learned how to create Drupal themes at work as a developer, and quickly saw the benefits of how my ideas could work using its flexible framework. In Wordpress I would need to install multiple plugins to twist it’s Page and Post functionality to my needs, whereas with Drupal it could easily be achieved through it’s Context module and Content Types.

During development, Drupal announced it’s 8th version was to be released in Beta. It was a difficult decision as Drupal 8, due to be released the following Spring, would have less module support than 7, but any forward thinking person would see that transferring to 8 would ensure the site’s longevity. After testing Drupal 8, it’s advantages (Context being built into Drupal Core, the interface for a user that didn’t involve the clunky admin interface, the GUI for user posting built in, amongst others) meant I made the switch, and haven’t regretted it.

Conclusion

The project has been an incredible amount of work, firstly how manual Drupal is to build in and maintain, but also the news sourcing and writing, newsletters (B2B and B2C), social media and other content that requires regular updating. A small revenue is gained through the Google Ad banners, but otherwise I keep it up for the love of it. The project has taught me a lot and have been thankful for the positive focus it has been over the years.