Rebrand for a design platform
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:
- They seemed receptive to learning more about accessibility.
- They didn’t chase me away the first time I mentioned diversity & inclusion.
- Also, charities are an interesting sector for me. I’ll always prefer to work with people who use tech for good.
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:
- Product management review
- UX audit report (website & 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Problem — Low-resolution images combined with inconsistent visual styles damage your brand credibility.
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.
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.
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.
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.
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.
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.
Solution — A simple fix is to add an underline to the hovered item so it would stand out more.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Get started
- About us
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.
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:
- Rounded buttons and text boxes
- Sans-serif font (both friendly and easy to read)
- A consistent colour palette
- Plain language
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.
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:
- Start a design
- 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.
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.
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.
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:
- Users with partial sight who often experience limited colour vision (including older people).
- People using text-only, limited colour, or monochrome displays.
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.
- Don’t use centred text that decreases the user’s reading speed.
- Don’t use full caps to help readers who identify words by their shape.
- Left-align text to make reading easier, particularly for people with dyslexia.
- Use an active rather than passive voice for clarity.
- Keep your forms short – they require less effort to complete.
- Don’t use read more buttons – they lack context when you use a screen reader or simply want to scan the page quickly.
- Don’t use autoplay on videos to avoid confusion, distraction and more serious physical reactions.
- Don’t overload the pages with information and simplify your navigation. It helps people with anxiety (and everyone else).
- Keep your brand accessible with smart colour associations.
- Don’t put text as part of an image. Scan readers can only see the alt-text.
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.
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.