August 2020

|

12 min read

Redesigning a website for non-profits

Borago Insights is a London-based consultancy helping charities make sense of their data. Their founder, Emma Haslam, hired me to redesign their website. After rebranding her agency, she wanted to modernise the overall look of her website and improve the user experience.

But web design doesn’t start by immediately splashing colours in Figma like I’m freaking Picasso. Although, honestly, it’d be nice. It took us six months to go through all 10 steps of this full redesign process which include:

  1. Proposal
  2. Analytics & UX audit
  3. Sitemap & content
  4. Homepage design prototype
  5. About us page
  6. Services page
  7. Blog & individual articles pages
  8. Contact page
  9. Handing over to the developers
  10. Reaping the benefits

And before you say “I hope it was worth it”… yes! It actually was. Among other things, here’s what Emma saw happening two months after launch:

She also secured a great project with Mental Health UK. Let me tell you how we made it happen.

1. Proposal

I knew this project was going to be a few months work so I drafted a roadmap as part of my original proposal. It looked a little like this:

Roadmap spreadsheet including objectives, deliverables, person responsible for each task, status, deadline, time allocated and follow-up action plan

Even though I work remotely, I like my clients to know what I’m up to. It helps them feel in control of the project, even if web design isn’t what they know best.

2. Analytics & UX audit

Analytics

Before anything, I needed to know where Borago Insights was coming from. I started by analysing the existing site’s performance. It sounds dull but actually, it’s cool. Because it confirms (or kills) your assumptions.

UX audit

I then moved on to the actual UX audit which is about reviewing critical principles of UX design on a site. One of the first rules of UX psychology is that people have limitations. They lose interest (very) quickly.

Among other things, that’s one of the reasons not to keep your clients’ testimonials on a separate page. No one’s interested in reading about the lovely things your clients have to say about you out of context. Except these flattered clients featuring on the said page. Clients testimonials should always go with the description of a service. As in a “don’t trust my word for it” kind of approach. They also work well with case studies.

I won’t beat around the bush. With these reviews, I quickly realised there was little we could save from the existing site. But I was able to see everything we could improve in the new version. It gave me a clearer picture of the new sitemap and the content we needed to create.

Learning from the competition

On top of the UX audit for the original site, I reviewed some competitors’ websites. Not only to understand the positioning but also to see general design practices in the sector. I wanted to know what they were doing right or wrong. And how we could improve things to make Emma’s site the better choice.

Most of the UX errors and bad practices I spotted were common on each of those sites. A couple of examples:

Pros: bold colours, clear font hierarchy, approachable tone, dynamic impression. Cons: text boxes too wide, too many choices in the menu, user journey unclear throughout the website

From menus as busy as my grandma’s encyclopedias to obscure user flows and Faulkneresque copy, I saw it all.

That should come with a warning though. I don’t know how successful those other businesses are. Maybe their website isn’t what they rely on most to attract new clients. But it made me more aware of what not to do when redesigning Borago Insights.

3. Sitemap & content

Once I had listed strengths & pain points, I focused on designing a sitemap and commissioning new content.

Sitemap

A sitemap is an important link between your website and Google. It tells search engines what content sits on your website. As a designer, I use it as a roadmap to know what page I’ve got left to work on and how they all come together. For example, a blog article’s parent page is the main blog page. That means I have to find a visual cue for users to easily get back to this page when reading an article.

Sitemap tree with page names and function

Content

With a content list clearly documented, I know what elements I have to design on each page. And it’s also how Coni Longden-Jefferson, Emma’s copywriter, knew what she had to write for each of those pages.

4. Design prototype

Yes. About time we started talking about design.

Wireframes

I mean. Almost. Let’s talk about wireframes. They’re not the most fun part of the job, but that’s how I help my clients get familiar with my vision. Baby steps. It gives them room to say what they like or not. Preferably before I start adding colours and adjusting line-height everywhere.

I would love to show you the original wireframes for Borago Insights but, put simply, I didn’t keep a copy. Instead of finding a good excuse, I’ll give you a great example of a greyscale mock-up from a design agency I like.

Greyscale mockup by Ueno

A greyscale mockup shows the layout of a page with all elements visible already. The “only” thing left to add is colours. And motion. And… anyway, it’s not exactly the last step.

Homepage interactive prototype

Because Borago Insights had just gone through a rebranding, their brand colours and fonts were well documented. So I could start working with this new brand identity and apply it to the user interface directly.

First, I built an interactive prototype for the homepage and menu. This confirmed our vision before I went on to design other pages.

I started with the colour palette and fonts agreed on before I joined the team. My first design decision was choosing how to use them to optimise the brand’s messaging.

Salmon pink, light blue, purple, dark blue and yellow

Here’s what I went for:

And what it looks like on image:

At this point, I realised we were missing illustrations. And since Borago Insights’ logo was so small in the navbar, I knew I could use the Borago flower differently. Something that would bring contrast to the rest of the design.

We commissioned illustrations from Greg French, who had already designed the new logo. And I animated those flowers to make the website a little less rigid.

Borago Insights homepage motion

UX strategy for the homepage

When landing on the homepage, I wanted visitors to immediately understand two things. One, they had found a partner familiar with their sector. Two, they had an opportunity to take their mission further thanks to data analysis.

These questions all link to the same blog article about the role of data analysis within a digital strategy.

Finally, I made the Services and About pages easily accessible. Some visitors already know what they’re looking for. They won’t have the patience to search for important information for too long. Nobody’s got time for that.

UI decisions

Working on the homepage, I took many of the first typography decisions. These include font sizes and colours for each type of heading, spacing between elements and paragraphs, and so on.

I also decided what hover and click effects would look like, which you can already see in the prototype.

However, this was preliminary work. I can only confirm the style guides once I’ve finished the whole design. So more about this later.

5. Designing the about page

Once we were happy with the homepage prototype, I applied the same design logic (which we call user interface or UI) to the rest of the site. So I started working on the About page.

I added a new section at the top of the page to address users’ concerns and the solutions brought to them. That reinforces the brand’s relevance. I also reduced the copy on the brand’s values. It’s not a TED talk.

And, of course, I kept the team’s friendly faces on the page to keep the brand human and approachable. But I made all the headshots black and white. It was more visually consistent since the photos were all taken at different times and places.

6. Designing the services page

Focusing on what the client has to gain

A services page can easily become a “we, we, we” kind of page. I see that all the time. A company focuses on their achievements rather than what their clients have to gain. If there’s only one thing you should remember from this article, it’s that a website is not about you. It’s about users.

So here, I lead with the opportunities data analysis represents for charities. Such as the percentage of British charities who want to use data more effectively (81%). What does it reinforce? You got it. The brand’s relevance.

Solutions page Borago Insights

Using minimum copy

The services page wasn’t an easy one to design. Even when reducing copy to the bare minimum, there was still a lot to say. You could almost say, too much.

I had already decided not to have individual services pages when I made the sitemap. I would rather have case studies to share the potential ROI of working with Borago Insights.

When you put too much copy on a page, you tend to have the opposite effect of what you’re looking for, such as tired users having no clue what the services are. It’s on the agency to know which service they can offer their clients, not the user.

To counter that problem, I designed small blocks of text to summarise each service. If a visitor wants to know more, they can click on the service and get taken further down the page. There, they will find more information such as pricing and deliverable.

Featuring prices

At some point during the project, I questioned the need to feature pricing. I thought it’d discourage people. But my client was adamant that although she works with the charity sector, she runs a for-profit business and should be compensated fairly. Against those who think volunteering pays for your rent, featuring pricing is a smart way to save yourself some time.

7. Designing the blog

Having a blog, or not, is something you should treat carefully. The real question is, do you have a content strategy and who’s going to take care of that? Luckily, this is something Borago Insights had already considered with Coni’s help. But my job was to make space for Borago Insights’ expertise whilst improving the blog’s interface.

Respecting the UX strategy

Visitors had to do the hard work in the former version of the site. They had to sort out what they wanted to read by theme or format before they could even see what was available. That doesn’t work.

In the new version, I kept the featured article in the left column. Only the right part of the screen would be scrollable. The point was to keep this opportunity very visible.

The same logic applies to the individual article pages. By splitting the screen into two columns, I can keep the title and social media sharing icons accessible at all times. And only the right side of the screen is scrollable.

This doesn’t mean that the featured article needs to be the same forever. Something else more important could replace it late on. But my strategy is to get visitors to follow a specific user journey on the site:

  1. Homepage
  2. Specific blog article to understand the opportunity data analysis represents
  3. Services page to know what deliverable prospects could benefit from
  4. Contact my client

If they leave the site because they can’t find specific information or because they’re bored and the copy’s too long, I’ve failed. So I have to be cautious about what to show and where. Which is why I prefer to keep the journey short. It’s not meant to be the Compostelle pilgrimage after all.

8. Designing the contact page

I kept this page very simple. I’m not a fan of contact forms, so I featured email addresses, location and telephone details. Some people (me included) trust deliverability better when using their own email client. It feels more personal than using a contact form, which works well with this particular brand. Finally, I wanted to leave it for the user to choose how they want to get in touch with Borago Insights.

9. Handing over to the developers

I spent quite a bit of time documenting the user interface for the developers to know how to code my design. Although I’m working with Figma and it’s very easy to export the code, it’s always nice to have a reference point.

Style guides

I documented spacing guidelines, interaction rules and typography hierarchy. This keeps the code consistent with all the various formats of text, spacing rules as well as interaction.

Style guides with font size for each heading, button interaction and spacing rules

If you want to know more about handing over your designs, Femke made an excellent video about this.

10. And then what?

After working for so long on this project, one could say “ok, you’ve changed colours and fonts. And then what?”.

Even though the website’s not perfect (a V2 is actually in progress to include new perks), let me tell you about what’s changed for Borago Insights so far.

Site performance

Emma shared these analytics numbers with me, two months after launch:

New clients

Emma also successfully secured two new clients to work with, including Mental Health UK. After meeting with her, prospects always check her site. It’s how everybody likes to get a sense of someone’s credibility and expertise. And the new design for Borago Insights inspires trust. That is the real value.

When you invest money in a designer (me), you get more revenue in return because people trust you. And if you’ve read this article top to bottom, you know that doesn’t happen by accident.