Empowering hotel owners

Hotelchamp is a web tool that helps hotel managers to get more customers to their hotel.

Hotelchamp aims to empower hotels and hotel managers and help them boost direct bookings. In a landscape dominated by Online Travel Agencies (OTAs), Hotelchamp offers smart tools for hotels to use on their websites.

“Yummygum showed an impressive learning curve in understanding our complex product and translate it into a next level control panel.”


Rethinking everything

Like many of our clients, Hotelchamp’s previous platform had grown rapidly over the years without a clear Information Architecture vision. We were extremely excited to turn it into a logical and aesthetically pleasing web application in which hotel owners would be in control.

Visual tone of voice

As soon as we had finished doing the wireframes and mapping out the Information Architecture, we created a Style Board to set the right visual tone of voice. We wanted the style to feel professional yet light weight and effortless.

The styleboard we created for Hotelchamp

Going back to the basics

Just like for all re-designs we take on, our team went back to the basics and asked tons of questions to understand what existing features meant and what their significance was for the user.

We had many valuable talks with our client to unravel every last bit of the former web application, to subsequently come up with a logical navigation structure with flexibility for growth in features.

  • Puerto Rico

    We decided on re-using the yet existing color palette in which Puerto Rico would play the lead role as call-to-action color and eye catcher.

  • Mint Tulip

    Mint Tulip was going to function as the main color’s brighter sibling. We used Mint Tulip color for subtle backgrounds and non-attention seeking elements.

  • Blue Bayoux

    As an alternative to a fully desaturated grey color for copy we used Blue Bayoux. Due to it’s slight saturation, text strings felt softer and friendlier.

  • Blizzard Blue

    As we already used a greenish hue throughout the interface we decided to use a blue hue for both success- and neutral system messages.

  • Chardonnay

    For messages that needed the user’s attention in a non-obtrusive manner we went with Chardonnaye; a smooth yellow hue that fit right in.

  • Jasper Red

    Just like most of web app User Interfaces out there, this one needed an error color. We went with a hue that matched the rest of the palette perfectly.

Created with Sketch.

Future-proof design system

As we progressed with the user interface designs for the Hotelchamp web application we steadily worked towards a design system; a collection of building blocks we could re-use for new screens. The design system had to be consistent and future-proof in case of the not-unlikely scenario of new features being added later on.

Marketing website

Soon after the first big chunk of user interface design work was done for the Hotelchamp web application we started working on the Hotelchamp marketing website.

As the user goals for this website differed from the those for the web app, we created a visual style that was both extremely recognizable yet tailored to the persuading nature of the SaaS product website.

Try out Hotelchamp!

We’re incredibly happy with the line up of visual products we’ve helped come to exist. We’ve created a steady foundation for Hotelchamp and ourselves to build future designs upon.