Klosters contnt marketing platform preview

Klosters

Lean UX, Design, Development, Content Platform

Klosters contnt marketing platform preview

Klosters, a local Newcastle company that prides itself on being the best in auto care… bar none, engaged Mudbath Digital Newcastle to rebuild their website and establish a brand new way for users to book in their car service.

VIEW IN THE WILD

About the Client

The Kloster Group is a innovative automotive dealership located in Newcastle and the Hunter Valley. Klosters have a rich 82 year history in Newcastle, with a high profile and great customer service.

Browen, Design at Mudbath

The Vision

When Klosters approached us to design and develop their new website, we were thrilled. Their strategy is put customers first through creating brilliant educational, editorial and review based content to to aid customers in their decision making.  It's a true content first approach reinforced by the engagement of former ABC journalist and broadcaster, Carol Duncan, as Managing Editor.

Project Goals

  1. Build brand trust through enaging content
  2. Improve engagement & conversion 
  3. Create a great user experience

Twitter post from John Dobbin

Project Kick-Off

Starting with a discovery workshop we worked closely with Klosters to understand their customers and what their goals were for the project. Taking away these discoveries we mapped customer journeys from their different entry points and detailed the entry points on the site. This identified points where we could take them from a researcher to a customer. 

This process gave a full picture of where we were headed and ensured that all of the interfaces we suggested were solving a problem or aiding users in their journey. 

Prototyping

Developing high-level wireframes for the whole site helps the whole team get a sense of how the website would feel and interact. We prototyped most of the interfaces, focusing on the content side of things and persona based pages.

Kloster interactive prototyping

Interactive prototyping allows us to test concepts quickly without getting stuck in design details. We don't waste time on bad ideas.

Initial Design concepts

Our initial concepts showed our ideas of where we wanted to take the design. We explored a magazine style cover and grid layout, the final design simplified this layout and improved on the consistency of this design.

Early design concepts for Mobile and Tablet.

These concepts were parked when we decided to literally go back to the drawing board to explore the article and grid layouts.

Tactile design approach

Paper Mockups

We sketched these components quickly to show visually which elements would be required. This allowed us to rapidly try different layouts and content blocks quickly and reorder them. We choose a modular design using blocks that fit together, allowing editors flexibility of the order and layout of articles.

Sketch-up boards displaying all of the different article content blocks that would be used on for each category.

Using this tangible design approach allowed Carol Duncan and John Dobbin (the team at Klosters) to get involved in the design physically and move pieces around. We were able to scrunch bits of mockup that weren't needed and draw others that I had missed quickly and see how they'd fit in. 

These sketches became the best prototype, super-quick to update and accessible to everyone. 

Carol pinning up the sketch board

Carol Duncan, Managing Editor at Klosters, pinning up the design board.

The 'rapid paper prototyping approach' wasn't really about saving time, but choosing the best way to visualise the amount of content we had. This was particularly helpful with  the long landing pages as we're able to try different ideas quickly and reorder layouts with out spending copious hours re-jigging a document on the computer.

Digital Branding

Dave and Bron working on the new Style guide and elements at Mudbath HQ. 

Colours

Bronwen (one of our UX Designers here at Mudbath) created on a 6 different colour palettes to capture the essence of Klosters, premium and friendly. We decided on the final palette the colours consisted of a core and category suite based off the strong black and white of the Klosters logo.

Core colour suite

Our goal for these core colours was to represent everything about cars, oil, fuel, metal, paint, gloss, shine and real world materials.

Category Colour suite

Each category has a different brand to distinguish them from one another. The category colours we defined represent each of the types of articles perfectly. In creating the scheme we were sensitive to the legacy of Klosters, by using these tones we didn’t pin Klosters down as a trend follower.

Design

Paper prototyping saved significant time and effort so we focused more time on refining the design from the initial concepts. The final design celebrates the content, everything has space and strength. 

A Mockup of the user interface content blocks.

Development

Allowing Klosters to create engaging Articles using Umbraco

Using Umbraco’s new grid layout feature, Steve and Josh created a flexible user interface for creating custom layouts within our design framework.

Each of the content blocks that we defined, Klosters are able to add the elements where they like, move them around and design the articles with flexibility, whilst still ensuring design consistency.

What we've learned

  • Simple is better - in the end there were too many different content blocks for the articles. The many options seemed like a great idea but this caused more testing time, more design time, and more inconsistencies.  
  • Get Feedback often and feedback fast - working closely with Klosters ensured we were all united for the same outcome.
  • The project only starts when it launches - getting it live and learning is pivotal to success.

Team credits

Edward Geshcke - Managing Director Klosters
Carol Duncan - Managing Editor Klosters
John Dobbin - Digital Strategist Klosters

Josh Doolan - Strategy & Development
Stephen Fairley - Development
Sam Pethers - Front End Developer
Alex Fallavollita - Digital Producer
Olivia Groth - Production Manager
Bronwen Jones - Designer
Dave McMurray - Designer

tada!

Results

Website launched on 12th of September 2016.

We’re thrilled with the website and are continuing to partner with the team at Klosters.

Back

Make your next project great, let's chat





Loading...
Something went wrong when submitting. Please try again.

OR GET IN CONTACT WITH US

Thanks for reaching out!

We'll talk to you soon to discuss how we can help.