2023 Q3 newsletter

This quarter saw much needed improvements across a specific component category. Here is a breakdown of what was added to Nucleus and more.

Q3 highlight: Nucleus survey results

Q2 saw the first edition of our Nucleus quarterly newsletter that provides further detail into what we have achieved over the past 3 months and results of our survey for us to better understand what teams are still missing or requesting from us to improve the adoption of the design system.

This quarter we decided to combine the survey to make it easier to digest the thoughts of both both design and engineering. This is resulted in a larger volume of responses which has given us even more valuable insights into how Nucleus is perceived by teams. As previously, we'll begin by taking a look at some high level results from the Q3 Nucleus Design and Developer survey (thank you to everyone who contributed).

 


Satisfaction score

This quarter saw 20 engineers and 7 designers take part in the Nucleus survey, which included 8 single score questions. We mark each answer from 1 (strongly disagree) to 5 (strongly agree) and then average out the median scores to give us our overall satisfaction rating.

 

Role

Responses

Median score (out of 5)

Overall satisfaction (out of 100)

🧑‍🔧 Software engineer

20

3.71

67.6

👩‍💻 Product Designer

7

3.91

71

 

We'll now deep a little bit deeper into the scores to see where we have improved and where we still have work to do going into Q4.

 


Survey highlights

We saw a 10% improvement from the Q2 survey from a designer perspective, with no negativity around the quality of components we are providing. The higher satisfaction scores also increased from a more neutral view due to increased refactors and better understanding on the updated core library.

null
null

Survey lowlights

As in the previous quarter, because we are still invested in the component health and accessibility that will ultimately make the product much more user-friendly, there are still disconnections because of legacy component usage still in-play. However this has decreased by almost 5%.

null
null

 

Generally though, the impact Nucleus is having within the team's workflow and ease of use is really really positive, with stronger satisfaction up by 18%.

null

 

Documentation sentiment

Since Q2, we are up 29% on our satisfaction score of the documentation, with only 1 engineering disagreement on the content we are providing. Currently the docs are much more design-focused which could explain some negativity, but a strongly agree increase means we are heading in a good direction.

null

Not all usages in the documentation can be thorough detailed like DropdownMenu and other components have not been refactored yet (ListItem) that team members are still having issues with. In Q4 we aim to finalise the bulk of these refactors to remove this legacy hangover.

null

 

Summarization

This summary of experiences consists of various comments and suggestions regarding the usage of design components within Figma.

 

  • Challenging to use slots in components like Dropdown or Modal in Figma without detaching them. This is attributed to Figma's limitations, such as the inability to easily copy-paste overrides.
  • Potentially having default components like Dropdown come with a ListItem to simplify the process, rather than having to replace slots each time.
  • Looking forward to new Design Tokens and emphasizes the importance of using semantic tokens.
  • Requests for unified sidebars, data pages with table/data grid components, and the release of the rest of the refactored components.
  • The Table component is not up-to-date, causing workflow slowdowns in permissions-related tasks.
  • Clean-up of obsolete components to streamline the design process in Figma.
  • A call to unify various local libraries, like fusion library, nova library, nucleus patterns, and nucleus domains.
  • Let's make it easier to use large reusable components, such as Sidebar, and suggests implementing a process for updating components after new functionality is implemented.
  • Expanding the Card component's usage with a need for more examples and best practices in documentation.

 

Key takeaways

After gathering these collective thoughts, as well as our own, these are our key takeaways that the Nucleus team is going to take action on:

  • Sidebar integration: This has been scoped for Q4 and is already underway.
  • Slot usage: We will provide further demostration and guidance tutorials on this, especially as we head into more complex pattern creation.
  • Libary housekeeping: Now we are nearing the end of our refactoring process, we will place more emphasis on clearing and merging libraries to reduce the bulk of assets that are visible.
  • UI Selection Framework complexity: Several responses indicate that the UI Selection Framework components are overly complex or trying to serve too many functions. We'll address the concerns with refactorings – mainly because of supporting Relay-client in terms of flexibility and performance.
  • Rapid resolution: Appreciation for quick fixes for reported bugs and questions on our support Slack channel.

 


Q2 component usage (last 90 days)

Further refactors and deprecations from our legacy libraries has improved our level of adoption for Nucleus hugely. If we take a look at the refactored components we introduced to the component library last quarter, our detachment levels average out to under 0.9%. This does not include the Tab component but this has been largely detached in one conceptual update within a Figma design file.

 

Component

Variants

Instances

Inserts (Q3)

Detaches (Q3)

% detachment

Alert

6

61

119

2

1.6

AlertOverlay

6

186

324

2

0.6

Badge

45

6,848

4,573

12

0.2

Button

162

30,844

19,215

47

0.2

ButtonGroup

9

376

357

8

2.2

SplitButton

117

229

274

0

0

Checkbox

12

1,848

463

3

0.6

InlineStatus

6

38

48

0

0

Link

18

158

365

0

0

Radio

8

277

252

5

1.9

Switch

9

858

1,105

3

0.2

Tab

10

1,756

244

33

13.5

Toast

2

163

240

2

0.8

 

Although these components don't have complex properties as such, getting almost 0% detachments is massive adoption leap forward for all existing and future component inclusions. Nucleus are ever gaining better autonomy over our product UI and how it is utimately being presented to our customers within the app. This also feeds wonderfully into more contributions and collaborations as the trust for our libraries is fantastic.

 


Components and tokens

Our refactoring progress has been great again across Q3 - focussing on the Form collection of components that not only needed engineering enhancments and performance improvements, but also better visual alignments together and how they work with accompanying components such as Buttons and Menus. In total, 10 updated components and 1 brand new component have been added: ColorField, Chip, DropIndicator, NumberField, Tooltip, Textarea, TextField, Search, Select, SelectChip and SelectGroup.

 

Component

Variants (OLD)

Variants (NEW)

% deprecation

ColorField

5

12

+ 41

Chip

30

18

- 40

DropIndicator

0

2

-

NumberField

4

12

+ 33

Tooltip

56

10

- 82

Textarea

20

12

- 40

TextField

212

12

- 94

Search

24

14

- 41

Select

92

28

- 69

SelectChip

28

12

- 57

SelectGroup

0

2

-

 

Besides a slightly greater addition of variants for the ColorField (which is merging legacy ColorField and ColorPicker) and the NumberField, the volume of variants we need to support for the Q3 update components has been reduced by 60.4%. This again removes additional bulk from our Figma and React libraries with better flexibility and customisation, meaning we do not need to support as much whilst improving application performance.

 


Documentation

The emphasise on our Supernova documentation has increased even more since our first round of refactored components were added. Not only now do the 11 refactored components from Q3 have their specific documentation up here on Supernova, we also included greater Forms definition on topics like structure, sizings and validation requirements.

 

Page impressions (last 90 days)

As a consequence of more component documentation we have seen a larger volume of engagement with Supernova and increases in Productboarders returning to the docs for further consumption.

null

 

Views by page (top 5 components)

Now we have shared out documentation on the more widely used Q3 input components, we can see they have been visited the most, even in a shorter time frame as they have only been available for a couple of weeks.

Component

Views

Users

Engagement time

Search

39

6

35s

Button

38

18

21s

Select

38

9

1m 45s

TextField

29

10

1m 49s

Modal

26

12

0m 25s

 


What's coming in Q4

You can find out more about what Nucleus has planned for Q4 on our Platform Strategic Roadmap on Productboard but we have listed below a quick bullet pointed list;

 

UI components for Sidebars:

Release in January (scope: documenting the whole pattern, crafting and implementing future proof components in the Figma/React).

Building upon the innovative explorations of new sidebars by the Product Data team, we are embarking on a discovery phase for this in-app pattern to facilitate its future implementation in both design and engineering aspects. Our collaborative efforts with the Product Data team will involve crafting reusable components within Figma and developing a flexible, well-suited React implementation to align with Nova’s upcoming release. Importantly, this will mark our first major pattern/template to be comprehensively documented from a design perspective.

 

Further parity

To support the release of the Sidebar, we will refactor the ListItem, which touches multiple parts of the product and has a very large impact from a UI perspective.

 

API & Architecture Changes to UI Selection Framework to Support the Relay Paradigm

Release in December (scope: major performance & DevX issues – we need to lay a better future proof foundation for Selection UI framework initiative).

After the implementation of the Hierarchy Picker, discussions with the Product Data team have revealed conceptual challenges within the UI Selection Framework components (e.g., ListHeadless, DropdownMenu), leading to performance issues, a suboptimal developer experience, and unnecessary complexity when integrating with the Relay client.

During November and December, we will focus on making substantial changes and refactorings to the framework, particularly its API. This revamp aims to streamline the integration of the Relay client, adhering to best practices without introducing additional overhead. By doing so, we lay a solid foundation for handling various list-related use-cases that will leverage Relay, representing a valuable engineering architecture investment.

 

Documentation

Full documentation of the updated Sidebar will be created, along with additional docs for our other aforementioned refactors.