Build a consistent experience with UI style guides


min read

Learn how to build your early-stage SaaS product more efficiently with a UI style guide that grows and evolves with your business.

By Simon McCade

If you’re an early-stage SaaS company and your team doesn’t have a shared understanding of how your product should look and feel, you’ll suffer from inconsistencies and your user experience will suffer as a result. 

What’s more, your team will inevitably change and your product will no doubt evolve over time, so it’s incredibly important that you have a way of keeping everyone on the same page at every stage of the products development.

It’s critical, in fact, to the reputation of your brand in the early stages of growth. 

Everyone wants to maintain consistency across all digital touchpoints with consumers, but, according to the Defining Digital Experience Report by Clicktale, 73% of brands say they are currently falling short of this. It’s an alarming statistic that indicates just how common inconsistencies are due to the lack of things like simple style guides. 

Let’s take a look at how you can make sure a UI style guide becomes part of the culture at your SaaS company so you can maintain absolute consistency. 

What is a UI style guide?

A UI style guide is a design and development tool that is put in place to ensure consistency in your user interface (UI) and user experience (UX).

They can essentially comprise a collection of elements that developers can call upon to bring your tech product up to scratch, create a unique style and maintain brand consistency for your users. This can include anything from buttons and colours to typography and iconography. 

Why a UI style guide is a worthwhile investment

Many early-stage SaaS companies can struggle with resources and this can mean that everyone is responsible for maintaining the look and feel of the brand.

The whole team at an early-stage SaaS company can be responsible for brand consistency

If consistency is to be achieved through these varying levels of experience, you need to present a UI style guide as a kind of bible to your team. A more consistent experience makes for a more user-friendly environment - indeed, the easier and more engaging your product is to use, due to the likes of familiar icons, the more likely it is to improve feature adoption, increase trial-to-paid conversions and enhance customer retention. In this sense, consistency plays a part in every touchpoint from the first contact to the last click. 

Everyone at an early-stage SaaS company can be responsible for maintaining the look and feel of its brand

A style guide can also create development efficiencies further down the line in that it can save time when building replicable components. Ideas can be prototyped faster and UI foundations can be set easier so that developers don’t have to wait for designers to create bespoke screens every time. 

What to include in a UI style guide

You’ll probably encounter conflicting advice about what should be found in a UI style guide, but at the end of the day, for early-stage SaaS companies, the most important thing is to keep it simple and easy to implement across the business. 

It’s too easy to get carried away with surplus or extraneous information that only serves to confuse matters. 

Start with the basics and don’t forget you can always build on it in future. Here’s what I typically include: 

Typography

You don’t want to be leaving developers guessing as to what typeface they should be using, so be clear with your instructions for go-to fonts, headings (H1, H2, H3, H4), body text, quotes and media captions.

Specify font sizes, indicate the weights in text hierarchies and define the styles that will represent your brand. Include things like optimum line heights and kerning guidelines, too, for that extra attention to detail.

Defining text hierarchies in a UI style guide

Colour Palette

One of the easiest ways to ruin an interface is with the inconsistent use of colour.

In your style guide, define the acceptable colour combinations by listing them and their Hex values to make your developers’ lives easier. Divide the palette into several sections where applicable: 

  • Primary and secondary colours: These are the base colours of your UI. Primary colours are, of course, the most commonly used, whilst secondary colours can provide more opportunities to distinguish your product.
  • Accent colours: These are used to emphasise UI elements like buttons, progress bars and notifications.
  • Neutral colours: These play a supporting role in UI design and are usually employed in text and backgrounds as a shade of grey. 
  • Semantic colours: These are signalling colours that are used to convey information about errors, warnings and task completions. I recommend reserving a specific tone of red for errors, green for completions, yellow for warnings and blue for informational messages.
Outlining your design colour palette in a UI style guide

Interface Buttons

You’ll be hard-pressed to find an interface that doesn’t rely on buttons, so they’re an important part of any style guide. 

Take the time to document sizes, styles, colours, spacing and typographic elements, especially if they are used in different contexts throughout your product. 

You can always add to it later, but it’s usually OK to recommend sticking to primary and secondary colours in this section of your guide. 

Choosing your design interface buttons in a UI style guide

Iconography

Icons in a UI context are simple vectors that communicate something in a straightforward and recognisable manner. They should be intuitive and optimised for mobile and web applications. 

Be sure to include guidance on sizes and weights in your style guide, too, as this will help with brand consistency in your SaaS product.

Picking the right iconography for your UI style guide

Additional UI components

Your style guide should evolve over time as you scale your business, so it’s important to keep some other elements in mind that might be required at a later stage: 

  • Modals
  • Form elements
  • Data tables
  • Breadcrumbs
  • Navigation menus
  • Charts and data visualisations
  • Progress and loading indicators
  • Alerts
  • Dropdown menus
  • Pagination

Your style guide should be a living document

Treat your style guide in the same way as you would your business. It’s living, it’s breathing and it’s constantly adapting to its surroundings to provide the best solution possible. 

Make it easy to share in a simple format and even easier to access when people need to refer back to it - otherwise, you’ll risk diminishing its value over time and it’ll eventually become irrelevant or, worse still, obsolete. 

When it comes to collaborating on projects, there are many tools that allow teams to design, prototype and test products together with the UI style guide hosted centrally for easy access. 

Personally, I opt for Figma or Adobe XD thanks to the ease of set-up and intuitive functionality. You can make sweeping changes to your overall design with the slightest of individual changes to your style guide, which makes everyone’s lives much easier. 

To get you started, I’ve created a basic UI style guide here in Figma for you to set the foundation for your own: 

Creating a UI style guide with the future in mind

A UI style guide will bring the most value to your early-stage SaaS company if it is focused on creating the kind of consistency that will introduce efficiencies down the line. 

By tailoring it to your users’ requirements and expectations, you will be giving your developers the best chance of delivering excellent experiences every time.

This means you can keep taking learnings from how people use your product to, in turn, make tweaks to your style guide to maintain consistency across the board, now and into the future. 

Even in a fast-paced environment in which quick decisions need to be made, it is possible to create a UI style guide that grows and evolves with your business. We all know the challenges that early-stage SaaS products can face, but a robust style guide can be one of the mainstays that gets you and, indeed, your customer base to where you want to be.

How I can help you create a consistent experience

If you’ve got big ambitions for your product, a UI style guide is the answer to creating a cohesive experience for your users as well as your developers. As people come and go, it can be difficult to maintain the level of brand consistency that’s expected from an expanding company, but with my help, you can implement a style guide that holds everything together. 

Get in touch today to find out more about how I can help your development team become self-sufficient and your users feel more at home with your brand with the creation of a bespoke UI style guide. 

The good stuff

The not-so-good stuff

This article represents the opinion of experienced designer, Simon McCade, who has no association or affiliation with the company or the app in question.

Request your own teardown

I can help you enhance user engagement, reduce friction with customers and develop your digital products in a user-centric way. Get in touch today to request your own teardown.

Thank you! Your request has been received

Oops, something went wrong. Please try again.

About Simon McCade

I can help you turn more trial users into paying customers through better UX design.
Learn more

Thank you! You're almost there, please click the link in the email to confirm your subscription.

Oops, something went wrong. Please try again.

What To Read Next

I'm available for new engagements from
Jan 2019