Lean UX, Design, Development, Content Platform
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.
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.
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.
- Build brand trust through enaging content
- Improve engagement & conversion
- Create a great user experience
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.
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.
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
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 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.
Dave and Bron working on the new Style guide and elements at Mudbath HQ.
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.
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.
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.
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