October 2021

|

13 min

Rebrand for a design platform

Project summary

The client

Imagine working in a charity shop. You need to put a sign in the window because you’re closing early. So you’ve got two options. A hand note on a piece of paper that looks awful. Or, an on-brand poster that keeps things professional and recognisable. That’s what RightMarket solves. It’s a design platform for anyone to create on-brand materials in full autonomy. Their real asset is that you can’t go off-piste and start using the wrong colours, layout or terminology. So it’s a pretty cool product.

At the end of 2020, they contacted me for help. RightMarket wanted to serve their clients better by improving usability on the platform. I took the project on because it was ticking a lot of boxes for me:

The project

When I join a team that’s been working on a product for years, I like to look at their internal processes. I get to know the people, their strengths and weaknesses and how far we can go together.

I started by reviewing their processes and strategy and ran a big UX audit report. After this, RightMarket asked me to stay and help with the rebrand of their website and platform. In total, it took us about 9 months to go through the full process:

  1. Product management review
  2. UX audit report (website & platform)
  3. Rebrand
  4. Website
  5. Platform

Product management review

I spent a week talking to the team, learning about their ambition for the platform, and how they felt about it. I ended up with a big report for my client to know everything I discovered.

Summary of the product development review — Team interviews findings, roles to fill, roadmap, new process and additional resources.
Product development review

Roles

For companies who aren’t experts in UX design, it can be difficult to know how to manage the development of a product. Who needs hiring, what expertise do they need, who should they work with, etc.

So I reviewed the org chart and recommended a few hires and mentoring for the most junior members of the team. This was an important step to know who was comfortable doing what and what was missing in the organisation.

Processes

I suggested putting new processes in place. These came from the team interviews as much as my own experience in the corporate world. I still remember what used to drive me crazy in the office — hello missing brand guidelines!

Something I like to recommend is a feedback tracking system. Having a dedicated space to track feedback shows there’s room for everyone’s ideas, no matter what their role is. Giving people the reason behind decisions helps them appreciate everyone’s efforts. Teams who understand past decisions and compromises trust each other better.

New processes suggested to the client: feedback tracking system, brand guidelines, project management system, personal development.
New processes

For the other items in the list, it’s not so much that they didn’t have any of those things. It’s more about not everybody using the same system. Or that several versions of the brand guidelines existed but we weren’t sure which one was correct. We’ve all been there at one point or another.

Roadmap

Finally, I prepared a timeline for the team to know what to focus on in the next few months. Because when we first spoke, I knew they wanted to run some user research, which is amazing. But if your existing product is full of bugs you already know about, it’s best to fix them before you ask for feedback.

This particular plan worked for RightMarket at the time, but it might not be what’s best for you. It depends on your own gaps and your own processes.

Plan divided in four steps: branding, ux research, sales & marketing, and development.
Product management phases

UX audit report

Once I understood RightMarket better, I had a closer look at their website and platform. It took me another week to list what needed reviewing and suggest solutions for it.

Areas of improvement on the website: navigation, information overload, usability & readability, accessibility, tone of voice & copy, imagery, footer.
UX audit report - website

I spotted common issues in usability, strategy, as well as readability and accessibility. So I made another big report for my client to learn what was a problem, why, and prioritise action to solve it. I won’t cover every single point I made to the team, but I’ll give you some examples of the problems they had and how we fixed them.

Website navigation

Problem — If you don’t have a lot of views on internal pages, it means your navigation isn’t carefully planned. And/or that the copy you put on each page isn’t what people want to read. No point getting emotional about it. It’s easily solved.

Solution — Simplify the main menu. Make sure page names reflect their content and what people are used to finding elsewhere. It’s important not to overwhelm people with too much copy. You should always prioritise direction over choice, it’s all about progressive disclosure.

Existing navigation menu: home, why RightMarket, product, resources, about us, book a demo. Suggested changes: home, features, pricing, blog, free trial.
Suggested changes in the navbar

Website accessibility

Problem — “Read more” buttons exclude people with vision impairment or using a screen reader. They wouldn’t be able to look back to the text that goes with the button to know where the link goes. Most of them would hear a list of links, all called “Read more”. And it damages your search engine performance.

Solution — Use keywords that describe where the link goes. For example, your button can be “our services”. People would know straight away where this goes without having to click on the button.

Suggested changes on the blog

Website copy & tone of voice

Problem — Don’t make the copy about you, your efforts or what you mean to do. If you want to be friendly and familiar, make sure this is a key value of your brand. Random jokes in your copy can disrupt rather than engage the user.

Solution — Think about who you’re talking to and keep this audience in mind on all pages. People should know straight away what’s in it for them. Also, voice consistency matters. Having a clear tone of voice will help you stand out from other brands. That’s how people will really recognise you.

Website imagery

Problem —  Low-resolution images combined with inconsistent visual styles damage your brand credibility.

Four images combined together: Stock photography of a girl walking in the forest, client posters on a blue background, low quality photo of a man holding a poster with a big smile, huge icon in red.
Combination of images previously used on RightMarket’s website

Solution — Decide on a clear visual style, document it in the brand guidelines and stick to it. It’s ok if you don’t have an eye for it, just find somebody who does.

Platform usability

The platform had its own issues, sometimes like the website, but not always. Mostly because the two didn’t visually match. But that was not it… I’ll try to sum up some of the challenges we faced and how we changed things.

UX audit report - platform

Problem — If you’re using only one colour in your design system, it’ll be hard to know what the priority is. In the example below, everything seems equally important, people won’t know what they’re supposed to do. Also, using so much red is triggering. It’s usually a colour we use for errors and attention.

Original dashboard area

With various styles of buttons and icons, people have to learn again and again how to navigate each page. They can’t recognise a pattern and look for it intuitively.

Various colours and shapes of buttons
Various buttons styles in the original design system
Icons with very different design styles
Various icons styles in the original design system

Solution — That’s not an easy fix. You need a professional to create a design system. They’ll create a brand colour palette, buttons and icons in the same style to match your brand’s personality.

Platform accessibility

Problem — Using only colour to convey information isn’t good for people with vision impairment. Here, the hover colour is not different enough from the default one. Whether you’ve got good sight or not.

The hover state on the menu items is hard to distinguish.
Original hover state

Solution — A simple fix is to add an underline to the hovered item so it would stand out more.

Menu items including one on hover with an underline
New hover state with an underline

Rebrand

With the UX audit report, we now knew what the issues were and how to fix them. The website and platform didn’t look like they were from the same organisation. The brand was missing a clear narrative to tell their story and what they had to offer. I also wanted the team to have brand guidelines they could use in full autonomy. But none of the existing documentation reflected their current vision. So we started again from scratch and went through a complete rebrand.

It’s easy to lose your sense of identity during challenging times. We used this time to go through a rebrand and the whole company has benefited from this process. Leading to a renewed sense of employee re-engagement, empowerment, purpose and unity after the lockdown. – John Murphy, Managing Director of RightMarket

Brand strategy

For projects like this, I like to start with a workshop that helps my clients identify their archetype(s). Because we usually have a combination of two or three.

The 4 elements of branding starting from the brand archetype(s) at the centre, followed by the brand core, brand identity and brand interactions.
The 4 elements of branding

Archetypes dictate everything about your brand. They represent personas you can tap into to create your brand personality. It helps people feel like they really know you and allows for a much deeper connection.

Just remember that archetypes define how you do things as a business. But they don’t represent your product, your audience or your own personal brand.

The 12 archetypes: The creator, ruler and caregiver provide structure. The innocent, sage and explorer seek paradise. The outlaw, magician and hero leave a mark. The every(wo)man, jester and lover build a connection.
The 12 archetypes

With this workshop, we redefined RightMarket’s archetypes. They’re a mix between the sage and the everyman. Which means they like to learn and share their knowledge. But they like to keep things simple.

Brand identity

After that, we started looking at RightMarket’s new visual identity. They work with organisations in various sectors — from charities to hospitality and leisure companies. So among the pre-requisites for the new identity, it had to suit those various types of people.

Tone of voice — I’m not a copywriter but I work with a great one (hi, Coni!). I’ve seen enough of her work now to know how to set up guidelines. The tone of voice always goes in pair with the archetypes and values. So for RightMarket, it had to be clear and simple.

The everyman: Our tone of voice should reflect the “everyman” archetype. We use a simple conversational style and short sentences. And we are always respectful of others. Do this: With RightMarket, anyone can design compliant, on-brand artwork easily. Not this: With our sophisticated design platform, marketing collaterals are created in no-time, by anyone, wherever you need them.
Tone of voice guidelines for RightMarket

Colours

We had to pick colours that would work with RightMarket’s brand values as well as their target audience. So I suggested a blue palette to emphasize the “knowledge” value. Blue also works well for trust and safety, which is why you can find it in so many brands today.

Accessibility 

If you work with me, you can’t avoid certain topics. Accessibility is one of them. So I gave the team a cheatsheet they could use to know how to match colours for maximum compliance. ABC is a great tool to build your own compliant colour palette by the way.

Grid of brand colours and compliance levels for each association: dark blue (#221E41), purple (#5D01A1), vivid blue (#1733F0), white (#FFFFFF), ghost white (#FAFAFF) and grey (#68738F).
RightMarket’s new brand colours

Components 

Organisations need to know how to present content in a consistent manner. Whether that’s for a presentation, a website or a product. So I prepared various examples that they can easily repurpose.

For the light mode, the lines are in light grey, titles in dark blue, body text in grey, the background is in ghost white. A button is blue, unless hovered when it becomes purple.
Light mode component example

Imagery 

 Stock photography is the easiest thing to come by and it doesn’t have to look cheap. For RightMarket, I used pictures from Unsplash and materials their clients made on the platform. It helps people understand what they do, visually.

Photos of people wearing branded clothes for charity events.
Stock photography used on RightMarket’s site

Website

After the rebrand, I was able to redesign a new site based on the new strategy. I used Webflow, which I really like. In part for their funny tutorials, yes. But also because Webflow has built-in accessibility features, like keyboard navigation and audits.

Aside from the rebrand and accessibility improvements, it felt great to simplify the structure and navigation. People visit websites for specific reasons. Our job as designers is to make it easy to do what they came for. In RightMarket’s case, people either want to learn something or become a client. Any other goal, especially in the menu, would reduce the value of more important content.

Brand objectives

RightMarket wanted something simple. Most clients do. But simple isn’t always easy. Another thing they wanted to focus on was their guidance value. Because they like to share what they know and discover. The blog takes a big part of the new site strategy, which is why I’ve included the latest articles in the menu.

Platform, get started, case studies, blog and about us links on the left side. Featured articles on the right side.
Menu on the new site

Commercial objectives

Another important goal for RightMarket is to generate leads. So I reduced the number of pages, leaving fewer chances for people to get lost. The sitemap is as follows:

A “features” page explains what people can do with RightMarket’s design platform. And a “get started” page walks them through Project discovery, which is the first step of their customer lifecycle. We knew RightMarket’s clients love it so we decided to say more about the benefits.

Website interface

Because of limited resources, we decided to work from a Webflow template. This helped us save time and money but still allowed me to style the website with the new brand identity:

New homepage

New platform page

New blog

Platform

Once we had a clear brand strategy and a functional site, I could finally start working on the product. This ended up being my favourite part. I loved working more closely with the rest of the team. Even developers, yes.

Product interface

Simplified layout with only one primary button and one secondary button, just under the navbar.
New dashboard area

The same way I rebranded the website, I simplified the look and feel of the platform, working page by page.

I reduced the number of choices users had in one place, focusing on two main actions:

  1. Start a design
  2. Continue editing

I reworded all the menu items to match what people are used to finding on similar platforms. Sometimes, you don’t have to re-invent the wheel.

The biggest change we made was on the design tool itself. At present, it’s not possible to edit your design straight from the canvas. To edit a design, users have to navigate through the tabs of the toolbar. But it’s still a great improvement compared to what was previously available.

Design tool before & after, from a Windows 95 grey look to a modern, on-brand interface with a toolbar
Before & after visuals of the design tool

Knowledge base

It was important for me to create a knowledge base for the platform. Not only is it expected from users, but also writing the copy helped me double-check my design choices. Having to walk people through the journey, I was able to spot what made sense or not.

Intro to the platform article from the RightMarket’s knowledge base
Intro the platform article

The other advantage is that it saves your customer success team a couple of back and forth emails. Some people will always ask questions. But it’s much easier to redirect them to an article rather than re-explain the same thing over and over again.

Accessibility

Many of RightMarket’s clients are charities, so improving accessibility was important for everyone. People in this sector care about providing equal experiences to their users, including:

When accessibility isn’t plugged in right at the start of a project, it makes things really difficult in the long run. But the team was motivated so we all worked hard to improve things.

It’s not enough, it’s not perfect, but it can never be. And there’s still lots to do on the platform, including talking to people with disabilities and arranging tests on the platform with them. But it’s a good start many companies don’t even dare trying.

Conclusion

In this project, I was trusted to apply the best practices I care about for ethical design & accessibility. I treat this part very seriously and only work with clients who accept to play by the rules. My projects focus on:

What that means in practice is that I always do my best to stay away from dark patterns, coercive methods, intrusive CTAs and overloaded pages.

Some of you will notice there is no mention of user research for this project. This is actually work in progress. And because the analysis isn’t finished, I decided not to cover it in this case study.

The platform, website and any other brand materials now match. So the brand has gained credibility and coherence. Any design choice we’ve made is now documented and has a rationale behind it. The rebrand helped improve usability and accessibility, which in turn, helps RightMarket’s clients.

Testimonial by J. Murphy, MD of RightMarket. “I would have no hesitation in recommending Tamara. Strong and positive guidance focused on identifying shared team values, leading to a clearly defined brand. I was highly impressed with how her process got every one of us engaged and onside. She is an excellent contrarian, positively challenging the status quo, often keeping us on track. Guidance and mentorship to several colleagues. I believe you have been a catalyst that has helped s raise the bar
LinkedIn recommendation by John Murphy, MD of RightMarket