Working with Nucleus

How to work with the Nucleus Design System

Many of us are proud of our craft and eye for details. But if we can't use these skills to truly impact the lives of our end users for the better, we'll have failed in one of our key objectives.

If you have to worry less about finding the latest guidance you'll be able to spend more time exploring alternative ideas and collaborating with your peers, learning to build a strong case for your team's proposals.

Where to start

  1. Use this documentation to get accustomed with Nucleus and explore what it offers.

  2. Make use of our feedback channels: Github, Slack, and face-to-face sessions.

  3. Reach out to any member of the Nucleus team, start a conversation and ask questions.

Designing

We appreciate that as a designer you may be more comfortable using Sketch. Depending on which stage of your design or discovery work you’re at, the Nucleus team has a growing body of reusable assets, tools, methods and knowledge that can help you create feasible design mock-ups and prototypes. We can help you visualise your ideas and would encourage you to:

  • Familiarise yourself with this documentation and Storybook.

  • Work with the Nucleus team on exploring the feasibility of your concepts and ideas.

  • Collaborate with your engineers, involve them in your discovery work.

Developing

When you build using Nucleus you will be able to use already tested, plug-and-play front-end components. You can find a dedicated wiki for using the design system with in our Ember applications here:

https://github.com/ConnectedHomes/ember-commons/wiki/Nucleus

We have already had a number of successful collaborations with engineers across our teams. We would love you to help shape and improve our design system - come and speak to us.

Testing

Once we have completed development we make sure the quality of Nucleus meets our standards.

Testing plays a vital role in order to validate and check the quality of our work. In addition to this, regression testing is performed to confirm that any recent addition or changes have not adversely affected existing features.

There are many ways to access www.britishgas.co.uk and we strive to ensure it's as accessible as possible.

Browsers and devices

We prioritise the following list of browsers and devices identified as the most popular used by our customers.

Last updated - 2020-04-27

Device

Operating System

Browser

Version

Computer

Windows 10

Chrome

83

Computer

Windows 10

Edge

83

Computer

Windows 10

Internet Explorer

11

Computer

Windows 10

Firefox

77

Computer

Windows 10

Edge

18

Computer

MacOS Catalania

Safari

13.1

Computer

MacOS Catalania

Chrome

83

iPhone

iOS 12 (iPhone 7)

Safari

13

iPhone

iOS 13 (iPhone XS)

Safari

13

iPhone

iOS 12 (iPhone XR)

Safari

13

iPhone

iOS 13 (iPhone 11)

Safari

13

iPhone

iOS 12 (iPhone 7)

Chrome

80

iPhone

iOS 13 (iPhone XS)

Chrome

80

iPhone

iOS 12 (iPhone XR)

Chrome

80

iPhone

iOS 13 (iPhone 11)

Chrome

80

Android

Android OS 8 (Samsung Galaxy S9)

Chrome

83

Android

Android OS 7 (Samsung Galaxy S8)

Chrome

83

Android

Android OS 10 (Samsung Galaxy S20)

Samsung Browser

11.1

iPad

iPad OS 13 (iPad 7th)

Safari

13

iPad

iPad OS 13 (iPad 7th)

Chrome

80

For product owners and business analysts

While you might not need in-depth knowledge of our shared UI styles and components, understanding their principles and requirements will help when you're reviewing current proposals and discussing work ahead. We hope that you push your product teams to explore feasibility of existing assets before resolving to build custom, once-off components. After all, we believe the former will lead to better results for our business in the long run.

We're working towards an evidence driven and purposeful use of UI components. If you think an asset of ours is performing particularly well or poorly in a certain context, please let us know. It will help us curate and improve our shared assets and documentation.

For content managers

Sometimes things get squeezed in where they shouldn't. We hope that with shared documentation and tools available, you'll see less of this taking place. One means for this change will be our growing body of shared, brand aligned, plug and play assets. Another one will be tools like Storybook that help us stress test and collaborate on content with more ease. We also know that changing workflows takes some time and practice. To get there faster, we hope you'll also study the guidance provided here, the better to suggest alternative solutions when needed.