Design with GEL

You’ve got grand ideas! You’re up to speed on all the latest AI, AR, VR, and hardware technology. You’re excited to push the boundaries of what’s possible and be on the cutting edge of the industry. How do you retain this enthusiasm while designing with a design system?

It’s a design mindset

If you’re new to enterprise design, you’ll soon find it requires a different mindset to agency, consulting, or startups. It’s not so much about pushing the latest trends live, gaining billable hours, or speed to market (although this is still important).

Enterprise design requires consideration for multiple streams of work, often dealing with legacy systems, and with the challenge of traditional corporate structures creating silos with co mpeting interests. Because of this, standardisation and efficiencies in design and delivery become increasingly vital, and this where a design system can help.

Actually, what is a design system?

We describe our design system, the Global Experience Language (GEL), as:

The Global Experience Language (GEL) is our single source of truth, providing everything you need to deliver our brand promises and create consistent, cohesive customer experiences across our entire digital landscape faster, and with less effort.

In practical terms and in its simplest form, it's a set of assets and guidelines which meet brand, CX, UX, UI, and development criteria, designed to be reused in order to realise the benefits mentioned.

Right, how do I use it?

First and foremost, usability and accessibility has to be the foundation from which we design. Luckily, GEL elements, components, and patterns are all user tested and accessibility tested. Bonus! However, it’s important to remember that context can change many things as can the way products are built in code, so user and accessibility testing should always be part of your project.

UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in Figma.

UI designers can access design assets from the Figma Libraries, and get up to speed on our brand and design standards such as Typography and Colour elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the Figma Libraries.

Developers can go straight to the design system to read implementation guidelines and access code, and learn best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.

I want to design the interface my way

The GEL tools are not about stifling creativity, they are about creating opportunity and ensuring scalability and compliance. There’s no denying the benefits for the business and customer of reusing design and code and by doing so you’re freeing up yourself and your team to solving other more important problems or adding value elsewhere in the experience.

GEL elements, components, and patterns look and behave the way they do because they factor in so many criteria to be useful across multiple scenarios and multiple brands. The more the design system is used on your project, the more efficiencies you inherit, and the more risk is reduced.

I’ve got a really cool idea, can I use it?

Sure! While we actively encourage use of the design system, it’s up to your team to decide to deviate, however there are a few things you should be aware of if you decide to do so.

Consider these things first:

• What customer problem are you trying to solve?
• Is there an existing component or pattern to serve this need?
• Have you considered other ways to solve the problem other than through the interface
• Is it scalable?
• Is there scope for a new design in your project?
• What is the cost to build?
• How much time will it take to build?
• Does it integrate with existing system architecture?
• Is this of value to the customer or just a ‘cool new thing’?

And when it comes to designing for enterprise, is it:

• Responsive
• Reusable
• Multi-brand
• Accessible
• Meeting usability standards

How do I suggest an improvement or iteration?

Improvement is what we’re all about. Build, test, deliver, learn, repeat, right? If you feel you have a better way of doing something or have a new pattern for consideration by all means let us know.

Contact the GEL team

Reframing your approach

Designing with a design system isn’t hard. When you realise by designing with a design system you’re contributing to something bigger than a single page or screen, it all makes sense.

This all results in consistent customer experiences increasing NPS, brand recall and integrity.

It’s about shifting your priorities and focus from solving isolated problems to owning the solution from a holistic approach.