How we updated BugHerd without killing off the brand personality and getting bogged down in the detail…
For the past 2 years we have been on a mission to breathe some life back into the BugHerd product & brand. This encompasses (but is not limited to) our website, external communications and our web app.
Plenty has been written about our reasons for focusing our efforts, that you can read about here.
As the Head of Product with BugHerd, I’ve been asked to share why this revitalisation is important from a product perspective. This particular journey has seen us surface a number of insights and learnings that could certainly be useful to others.
From a product perspective, our customer feedback from 2018 clearly showed that BugHerd had amazing product market fit, so a big part of our focus was really to bring the product design & experience up to the standard we all expect of our tools in 2020 while still retaining the simplicity and functionality our users have come to love over the years.
Here are some considerations and learnings we’ve had along the way…
WHERE TO BEGIN THE BRAND REFRESH?
A natural, or obvious starting point for a lot of people would be the website. However, this was something we actually addressed last.
We started with a fairly significant refresh to the application UI and there were a few reasons for this.
- There isn’t much point in having an amazing website if users are greeted by a completely different (and outdated) UI when they sign up.
- We wanted to define the style of the site to feel like an extension of the app, so it was cohesive.
Bug Trackers aren’t the sexiest apps to work on so there’s not a huge opportunity for personality (that’s where our amazing illustrator comes in). So we decided to start with working out how we could bring that personality into the app, and then once we’d worked that out, work backwards out to the website to amplify that style where it’s much easier to do so.
A great tip for working out priorities…
My former Head of Design when I was working in London taught me this and it’s stuck with me since.
Start by writing each point you want to communicate on post-it notes and then play with arranging the order of those post-it notes into what will become the high-level layout of the page (this works for a website or an app).
For example: the most important point should always be at the top of the page, followed by the second, etc. This ensures you stay focused on the message you’re trying to get across to a user, before you get bogged down in any design details.
GREAT (UNIQUE) IMAGERY LENDS PERSONALITY
An illustrator is a fantastic way to bring personality to your product. I think that’s why illustrations have become so popular in web design. However, I think the stock illustrations miss the point a bit because so much of what a great illustrator does is help you convey your product & your team’s personality, through storytelling.
In BugHerd; sometimes our illustrations are there to convey information – like error messages, empty states, or feature images on the website – but most of the time they’re there to give you a feel for who we are as a team, as people, as users.
In terms of how to work with an illustrator, I think it’s important to be specific about what you’re wanting to achieve, but flexible on the details. This is a good approach to working with a web or graphic designer too. You want to leave space for them to surprise you, because at the end of the day they have amazing talent, that’s why you hired them.
How do we do it at BugHerd?
For Sher Rill & I, we will usually sit down to talk about concepts.
For example; when we were working on a new “Create Project” UI, we were playing with ideas around the concept of a blank canvas, or renovating, or starting from scratch, all things that were analogous to that buzz you get when you’re starting a new project.
From there, Sher Rill went away and sketched some wireframes/storyboard style concepts and we continue to iterate on the ones that felt right. Then it’s over to her to run with the freedom of creation.
GET FEEDBACK. EARLY AND OFTEN
We don’t have a single or solo brand and design voice. It’s really a constant conversation between myself, our designer/illustrator, and our marketing team.
Our feedback and ideation is usually pretty informal, I tend to share early and often with this core team. This is a luxury of working within a close knit, smaller team. If I’m particularly stuck I find it’s always best to ask for feedback, even if they don’t have any particular critique it can still trigger an idea towards the next step, it’s strange.
An Invision prototype is my preferred tool for sharing with the whole team, or to receive Dev Team feedback, or to do some user testing with customers. Always do user testing with customers.
NEVER STOP EVOLVING
The BugHerd website style organically evolved over the course of a year as we came up with new ideas.
This is certainly not the case for larger brands with such a footprint, but when you’re small like us it’s important to not be too rigid with your brand and style guide. If you look through bugherd.com you can see some design differences from page to page and that’s great.
It’s a bit of a story of how our site and brand is evolving. With every campaign/landing page/etc we make, we try new things, we A/B test for conversion optimisation and if it feels right, we evolve the brand in that direction.
