Turbine website

June to December, 2013

Turbine was one of my favourite projects to date. Having the time to focus on creating an original logo, and then building a site up around that brand, was a great opportunity. It was fun to work with a team with a marketing background, as every bit of content was carefully planned and had to earn its right to exist.

After a lot of research, I started on the logo design. I wanted the branding to fit perfectly on the site, so I had to look at the typography in the logo and on the site together. I needed a typeface that would work equally well for both. I completely fell for Supria Sans. It has a clean readability with quirky curls that gives it a friendliness. In uppercase, Supria Sans is pretty geometric and tidy, which keeps the logo compact.

Taking an audit of the content on the existing site, and talking to Matthew about what we needed to market on the new site, I planned out basic wireframes for the redesign. I covered the planned changes in content and rough layout ideas for the existing content. The Turbine app has a mobile view, so it was important to cater to small screens as much as desktop screens.

Wireframes for homepage on wide viewport, narrow viewport and navigation

Wireframes for the Turbine homepage including maximum and minimum viewport widths and expanding navigation

The style tile came next, I threw together some basic typography and form ideas for the testimonials, which I wanted to feature on the site. I took the primary colours from the branding on the Turbine app, and combined them with the colours of the logo at that point in time.

Graphic tile showing typography, colour swatches, icons and a quote

Style tile for Turbine, with basic typography, colour and testimonial quote idea. I also found some icons that fitted well with the other shapes

 

With existing branding in the Turbine app, and needing to showcase a lot of screenshots of the Turbine app in the site, the challenge was to create an aesthetic that wasn’t jarring with the app. As the app is very utilitarian, I needed to use colours and iconography to draw attention to the features. As the site needed to work on different sized viewports, big screenshots with lots of small details could be easily unreadable. I focused on taking small screenshots of chunks of the app, trying to show the essence of what the app does for the users.

In order to get screenshots that showed all the features of the app in full use, I created a mock company with fictional characters who each had different roles in the company, so their example purchases, expenses and holidays would appear as they would to a real company.

The initial mockups were slightly flat and bland. The typography stood out against a lack of colour.

Early homepage mockup with rough layout and typography, and very little colour

Very early homepage mockup

As I kept mocking up, trying to get the palette right, and breathe more life into the pages, more colour was added in.

Homepage mockup with some more colour

Another early homepage mockup

Once I’d finally worked out the best colours for the logo, it came together with the strong band of navigation at the top. Once I had some reasonable mockups, I built a custom WordPress theme for the site using Advanced Custom Fields to manage modular chunks of content with different relationships across different templates.

Turbine homepage wide layout with lots of vibrant colours and screenshots

Screenshot of the homepage as it is today

In progress