N-able UX: Our Design System

No moment in time is quite the same for UX at N-able. There’s a variety in what we do which makes our work genuinely interesting.

Whether we’re focusing on delivering against product roadmaps, engaging further with our Partners, exploring our team initiatives, or participating in a hackathon — we’re always finding ways to improve what we do and how we do it.

Why do we do this? Well, it’s natural to want to be more efficient, creative, and collaborative in how we problem-solve, and in trying to do things better we often define new processes or seek to optimise existing ones. Doing so maximises the benefit we bring to the team, the company, and ultimately our Partners.

This year, one of the largest developments N-able UX has taken on is defining our new Design System.

What is a Design System?

A Design System is a toolkit of foundational design decisions, tokens, UI components, and patterns. Importantly, this is all contextualised with guidance for designers and developers alike and forms a single source of truth for teams to leverage across the N-able product ecosystem.

We’ll explore N-able’s Design System in depth over the course of many articles to come. First, let me make an introduction… 🥁

Apex

Apex is the name we give to our Design System at N-able. Apex has multiple meanings that we believe align with the positive impact such a toolkit will have.

Figurative

The highest point of achievement or most successful part of something.

Geometry

The highest point in a plane or solid figure, relative to a baseline or plane.

Botany

The growing point of a shoot.

Apex stands on the traditional pillars of any Design System; tokens, components, patterns, and guidance. When making these foundational decisions we factor in staple design principles too; accessibility, scalability, and reusability. This ensures our toolkit is appropriately robust from the outset. Honestly speaking, Apex is a living product in its own right. It will continue to grow, improve, and become more potent over time (so watch this space!).

We’re already exploring how we might go beyond what traditional Design Systems deliver. We want to leverage Apex to give tangibility to our design principles so that we can provide real scenarios to help explain how we approach design and why.

If you’re a contributor to a Design System, we’d like to learn how you go beyond what a traditional Design System delivers in your organisation. Leave us a comment!

Why do we need a Design System?

Apex will underpin N-able’s vision to deliver an intuitive and modern experience to our Partners. A UI that simplifies the complex is crucial for those operating in business-critical activities on a daily basis. Design Systems are a tried and tested method to achieve this at scale.

The market-leading capabilities of our tools are of course the attraction when Managed Service Providers (MSPs) opt for N-able. However, great UX can’t be underestimated when decision-makers compare vendors. This is a topic which often arises when testing design concepts with Partners or gathering feedback on our features. Great UX is what people expect from all of their digital interactions, regardless of their goals. Getting this crucial part of the equation right at N-able is what Apex will facilitate in a greater capacity as it matures.

That’s not all though…

Recently, my well-curated yet unashamedly random podcast rotation led me to the deeply insightful Design Systems Podcast. Yes, there’s such a thing. I’m keen to learn from those who have experienced successes and failures with other Design Systems. And this is so far proving to be one useful method of doing just that.

There’s a particular segment in episode 39 which made me sit up and take note. The episode re-framed the value a toolkit such as Apex brings. Having resonated with me, here’s my take on why an organisation such as N-able requires a Design System like Apex.

In committing to Apex, we’re working on something that is both an output and an outcome. I’ll try my best to explain…

Outputs

Outputs are the more obvious things that correlate to KPIs like saving more time, saving more money, and building better products. They create practical trust.

• Consistency — setting the foundational experience standards to minimise unique solutions for similar problems.
• Efficiency — design and development processes are optimised across product teams.
• Freeing — designers and developers can focus with greater clarity on the problems that matter most.

Outcomes

Outcomes are the less-tangible things that happen once having achieved the outputs. They create emotional trust.

• Collaboration — teams work towards a shared goal (a single source of truth) which brings individuals and other teams together in ways that they wouldn’t have before.
• Trust — by having a shared understanding of our vision, teams are more easily able to buy into the journey we’re on and the steps we need to take.
• Creativity — by owning our own Design System we openly encourage individuals to explore new ways of doing things which have real impact.

What I’m trying to shine a light on here is that the way we work, who we are, and what makes us a team can’t be underestimated. Design Systems like Apex are more than components and guidelines, they’re also a representation of a team’s values & principles.

Creating inconsistency through the search for consistency

Rolling out a Design System across a multi-team multi-product organisation won’t be achieved at the flick of a switch. UX, Product Management, Engineering, Architecture, and more all have their own sense of investment. Perhaps that’s stating the obvious. Total adoption of Apex will take time and in doing so we’ll inevitably introduce elements of inconsistency. Our aim though is to iron out our patchwork UI into one that’s indistinguishably N-able.

We’ll know we’ve achieved that when all of our products look, feel, and behave in the same way — introducing a greater level of predictability. When predictably increases so does usability. This synchronicity strengthens the relationship between the human and the system. Apex is the shared language spoken between them. This means when we introduce a new feature into a product it’s easy to learn because users can predict what will happen when we ‘press a button’ or ‘do a particular thing’.

The inverse is also true… If we introduce a feature built with another Design System (another language) then it’s harder to learn as the cognitive intuition is no longer accurate. You may have to guess how the workflow will go, and if you guess wrong then the perception is that it’s hard to use. It’ll feel like a different product and certainly like it’s built by a different company. Apex allows us to align all our products to converse with our Partners in the same way.

A crazy pursuit of perfection however could never overshadow the great successes we’ve enjoyed this year. The increased collaboration between teams, less code needed to achieve better results, and genuine excitement for what we have going on is all fuel to propel us into 2023 — a year where we’ll really be able to measure the impact of Apex.

What’s next?

Well, a lot. This is solely an introduction to our Design System and one which I hope sheds some light on the drive N-able UX has to make great products for our Partners and maximise collaboration amongst our peers. I hope to share the successes, challenges, and more in-depth insights into what we do along the way.

What would you like to see? If this has sparked your interest in Apex or Design Systems in general for that matter then please leave a comment and we’ll be sure to tackle the topics that you want to hear more about first.

Credits
Luke Kelly
Senior UX Designer