Defining new visual guidelines to match a new brand

Background

The sub-brands of Tripaneer, such as bookyogaretreats.com, booksurfcamps.com or bookallsafaris.com were developed to get really good ranking in the search engines, so the users with intent could find it easily without having to spend much on marketing. As a second step, the websites started working well with paid SEM, this still didn’t require much more than working functionality.

As the company slowly started to grow and bring in a meaningful amount of revenue the leadership team decided to prioritize a new and fresh brand for tripaneer.com and with that a new visual style for the web platforms, that reflect the companies mission and vision better.

And that’s how I became the lead designer of the redesign project.

Workshop to establish visual guides

At smaller companies there are a lot more subjective decisions compared to bigger ones, however, I didn’t just want to follow the CEO’s personal preferences. I organized a workshop with the leadership team to establish the basics of the new style together, with meaningful reasonings behind those decisions.

Everyone brought 5 websites they liked to the workshop, mostly e-commerce and travel focussed ones. I asked them to describe why they liked those products, which points I collected and summarized:

• clean white design — the platform supports the product
• simple and consistent design
• doesn’t look cheap
• mobile version — use all horizontal space
• simple base font, plus unique title font style to be recognizable
• lets the user zoom in on the content they’re interested in
• interactive, interested
• detailed view of the products

The next step was for me to translate it into visuals.
First I put together the following guides to discuss it with the stakeholders, then I started working on the mockups one by one, starting with the most important ones in the purchase funnel.

Imagery and layout

Typography

Iconography

Colors

The “before” state

There was a lot of visual noise I had to simplify: (1) boxes with different border radiuses and shadows, (2) multiple different styles of icons, (3) clickable elements with different shades of blue and green, (4) illogical information structure, (5) elements looking like something they were not, (6) elements looking clickable they were not, (7) lot of visual noise over the photos … etc. I could list it for hours. See it for yourself:

How bold changes shall we make in the new design?

So many things were broken (from UI point of view) that I wanted to fix with the redesign that it could have destroyed all the progress that the team had done with constant experimentation and learnings. This was definitely not my intention: even if I have a great idea on how to make the reviews more useful, probably it’s safer to test it separately from the new visual design. If we change too many things at the same time it’ll be really hard to find if we break something. It’ll be also difficult to see if we get something right.

With this redesign experiment, I decided to fix the obviously illogical behaviors and structures, and leave the improvements to a follow-up test.