Working with Nucleus
Where to start#
- Use this documentation to get accustomed with Nucleus and explore what it offers.
- Make use of our feedback channels: Github, Slack, Teams.
- Reach out to any member of the Nucleus team, start a conversation and ask questions.
Designing#
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.
- For your prototyping needs, take a look at the Nucleus Playground for an easy, visual way to prototype with the components. We have a Playground support channel on Teams too! You will be able to take those prototypes into testing, in any browser and device, as well as testing them for accessibility using different assistive technology!
- British Gas design teams use Figma as their design tool. If you need to put a mockup together the Nucleus Figma UI kit library comprising Components and Foundations, is published and automatically available to anyone who joins the British Gas workspace. If you have any questions, we have a dedicated Teams channel.
- 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 - 2023-02-14
| Device | Operating System | Browser | Version |
|---|---|---|---|
| Computer | Windows 11 | Chrome | 110 |
| Computer | Windows 11 | Firefox | 109 |
| Computer | Windows 11 | Edge | 109 |
| Computer | MacOS Ventura | Safari | 16 |
| Computer | MacOS Ventura | Chrome | 110 |
| Computer | MacOS Ventura | Firefox | 109 |
| iPhone | iOS 16 (iPhone 14) | Safari | 16 |
| iPhone | iOS 15 (iPhone 13) | Safari | 15 |
| iPhone | iOS 16 (iPhone 14 Pro) | Chrome | 92 |
| iPhone | iOS 15 (iPhone 13 Pro) | Chrome | 92 |
| iPad | iPad OS 14 (iPad Pro 12.9 2020) | Safari | 13 |
| iPad | iPad OS 14 (iPad Pro 12.9 2020) | Chrome | 86 |
| Android | Android OS 12 (Samsung Galaxy S22) | Chrome | 105 |
| Android | Android OS 11 (Samsung Galaxy S21) | Samsung Browser | 17 |
Note : IE11 and Edge 18 browsers are no longer supported as their usage levels are below 0.5% (as of June 2021).
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.