The best tools for B2B website design

When It comes to designing a B2B website there is a vast quantity (and quality) of software available out there to help us designers produce the necessary output of a project, from discovery & definition right through to design. At ClarityDX, the design team regularly experiments with a range of tools across the stages of a project. Our favourites are detailed below.

Discovery and Definition

Discovery & definition is unquestionably the most important phase of the design process. The more research you do into your current, or soon to be site, the more successful it will be. At 93 there are a select few tools intrinsic to the discovery & definition phase:

Google Drive

This popular web-based file storage is an absolute dream. Granted, ‘dream’ is not a word one would usually use to describe a file storage website, but the ease of use in exchanging and updating information between us and the client really is unrivalled. We use Google Drive – which comprises Google Docs (Word), Google Sheets (Excel) and Google slides (Powerpoint) – in the early phase of the discovery and definition phase when we are seeking early stage information to begin our research. Using Google Docs, we’d typically produce documents like questionnaires and spreadsheets to probe the client for broad information on their product & services, personas, structure, and design. 

Google Meet / Zoom

Over the last 2 years it has been somewhat of a challenge to achieve basic business practices, for reasons that should be obvious by now. ‘Face-to-face’ has since been replaced by ‘screen-to screen’. And whilst my role benefits most from meeting and empathising with clients and users in person, tools like Google Meet and Zoom have performed as worthy alternatives. Not only do these tools allow us to easily keep in cahoots with our clients, they can play a critical role in data gathering. For example, video interviews allow us to speak with real users and obtain important qualitative research.

Google Analytics

Whilst we are on the Google bandwagon, it would be remiss of me not to mention the company’s web analytics service. This is a key tool in our quantitative research gathering. Whilst the service really is an Aladdin’s Cave of features, we use it to typically look at patterns in website traffic such as page views, audience, and behaviour flows. What keeps us going back to Analytics is the sheer amount of unbiased, numerical data that helps us generate more accurate design decisions.

Hotjar

We at 93 love us some Hotjar. Think of it as Google Analytics but with prettier visuals. Hotjar is a great tool that gives us better insight into user behaviour in the form of heat maps and recorded videos. It also allows us to measure navigation by tracking popular funnels. Both the heat mapping and video recording features are an effective means of communicating with a client about what is and isn’t working on their current site, informing us on key aspects of the design such as main navigation and content placement.

Optimal Workshop

Another tool we’ve recently adopted is Optimal Workshop. This product has many features, but the main ones allow us to deep dive into information architecture, or sitemap research. The card sorting feature allows us to see how users conceptualise, group and label ideas so we can confidently optimise site structures. Additionally, tree testing can take the guesswork (never a good thing!) out of decisions by helping us understand where users are getting lost and how they expect to look for key information on a website.

Design

After discovery and definition comes the design phase. As it stands, there really is one essential piece of software in use at ClarityDX:

Figma

First it was Photoshop, then it was Sketch, now it would seem Figma is fast becoming the industry standard when it comes to design software, and with good reason.

Figma is really comprehensive, allowing us not only to design, but to collaborate and prototype. Furthermore, it plays an essential part in the discovery phase, allowing us to produce user flow diagrams and medium fidelity wireframes.

InVision

Another tool worth a mention is InVision. Granted, Figma has somewhat replaced Invision in terms of sharing designs and collating feedback, but occasionally we will use InVision to communicate our designs with the client. Amongst its capabilities is the ability to create low/ medium fidelity prototypes using hot-spots, a great way of illustrating to clients basic navigation through their website.

Website design tools that work for your team

So there you have it, a comprehensive list of tools one can use when designing a B2B site. This of course isn’t a definitive list, rather a list that works for us here at ClarityDX. And, because our team is relatively small – currently standing at four – we can be fairly experimental with the tools that we use, allowing us to see what works best for us and continually refining our design process.

The key is to find out what works for you and your team, bearing in mind that software is continually evolving to make the production, and sharing of design work, more seamless.

Next, learn why UX is critical to B2B website design.