2023 Q2 newsletter

Q2 highlight: Nucleus survey results

We're ending Q2 not only with improved documentation of our refactored components, but with a overview newsletter to share with the product teams regarding our progress of the design system as a whole.

This will be a continuous quarterly review of Nucleus; our acheivements, component adoption levels, implementations and what is to come in the next 3 months. We'll begin by taking a look at some high level results from the Q2 Nucleus survey and Developer survey (thank you to everyone who contributed).

Design survey highlights

Generally teams are happy with the Figma libraries we have currently. Right now we are about 1/3 of the way through our refactoring phase so we did expect a lower satisfaction level. As this progresses we should improve this percentage.

Survey lowlights

As a consequence of the refactoring in trying to improve our consistency we have incurred disconnect from our legacy components. We are minimising this impact in the live product and selecting our refactoring careful to avoid as much inconsistency as possible. This will naturally improve as we continue this development.

Developer survey

We also wanted some insights and general satisfaction data from our developers, that's why we participated in the Q3 Developer Survey.

As goes for the design, we have inconsitentices in the React components as well. With the refactorings and simplification efforts this should improve over time. On the other hand, more than half of developer are satistified with the flexibility we provide in our React components.

Documentation sentiment

Our documentation is in its early infancy but we are only getting positive vibes with it from the team which demonstrates its usefulness. This sentiment will hopefully grow is it grows and we're pleased to see the results so far are impactful.

Satisfaction for designers

The documentation is now separated between this site and the storybook we provide for our React components. However we strive to build a single source of truth for all design related documentation that will improve the efficiency of our product teams even more.

Satisfaction for developers

Further design feedback

• Designers are still making detachments due to this refactored vs. legacy component clash and lack of auto layout application in the legacy components. This will improve the more we refactor so please hold in there!
• Updating our master boards so they are Nucleus-owned has been spoken about with designers offering feedback on this. Templates in the design system may come later but we will update what we have in the time being.
• Sidebars seem like a component more in need of some Nucleus ❤️. We can set about some time to workshop these together as one design team if this would be beneficial.

Summarization

Below is a summary of experiences, concerns, and suggestions related to using the design system components in Figma, and the addressing challenges and improvements for smoother design and development processes.

• Challenges with nested prototype interactions in Figma components due to limitations on hover and click actions.
• Uncertainty about the value of setting hover states on components.
• Focus on deepening flexibility and maturity of components, including adding optional slots for icons and refining patterns like animation.
• Need to migrate legacy elements under the Nucleus design system.
• Importance of allocating proper time for refactoring and adopting a strategic approach.
• Instances of detaching from components due to limitations or uncertainty about refactor progress.
• Shifting the mindset of frontend engineers towards using Nucleus components as a primary choice.
• Desire for greater parity between Figma and React, and more contributions from teams to increase adoption.
• Challenges with disorganized and inconsistent icon sets, inconsistencies in the legacy product, glitches in modals, and naming confusion between Figma and Storybook.
• Lack of communication about significant changes implemented by Nucleus in the codebase.
• Suggestions for improvements such as direct feedback on documentation, realistic examples, and context-based component sharing.
• A need for progress on the UI selection framework and addressing mix between old and new components.
• Difficulty in finding components due to outdated ones and a call for regular clean-ups and additions.
• Challenges with component selection, detachment for design freedom, and issues with resizing icons.
• Transitioning period leading to confusion with mixed components from different times.
• Desire for more visibility into refactoring progress and its impact.
• Specific concerns about using dropdown components and designing sidebars.
• Feedback on the refinement of the design system compared to the past.
• Mention of out-of-date subcomponents in the table component.

Q1 component usage (last 90 days)

If we take a look at the refactored components we introduced to the component library last quarter, our detachment levels are under 8%. This is a pretty good result so far considering the complexity of the Card and Modal components.

The bulk of the detachments come from the Container. Although this isn't a core component it forms the body of our larger component patterns. Digging a little further into this reveals 69% of these are happening within the Entity Picker, Data Selection and Board Shortcut concepts, which are actually based off our so-to-be-released Dropdown component. Once this is released these detachments can very simply be removed.

Components and tokens

There has been an even greater push on delivering more refactors to our core component library, improving the quality and flexibility further. There has been an greater emphasis on our action and notification as there was quite a lot of visual inconsistency in these groups. In total, 11 updated components and 2 brand new components have been added: Alert, AlertOverlay, Badge, Button, ButtonGroup, SplitButton, Checkbox, InlineStatus, Link, Radio, Switch, Tab and Toast.

As with all refactors, we are able to reduce the volume of variants with Figma to help with usability and even further reduce the redundant usages and duplicates in React, increasing the deprecation of legacy code. By default, all improvements come with a greater level of accessibility but we are still some way off providing the acceptable level for all customers.

Dropdown menus

The team is continuing to work through the migration of 100s of dropdown usages across the product to make sure each is up to date and consistant with our updated styling. This has presented many unknowns which means the deployment and release of the updated DropdowMenu has crepted into Q3. I'm pleased to say we have finally resolved all remaining issues and the new DropdowMenu is available to use in designs.

Documentation

As we are refactoring components, we are providing the product teams with concise documentation for all components regarding their usage and implementation. The 13 refactored components completed in this quarter have their documentation up here in Supernova which should make using them in design and code much clearer.

These updates are critical as we aim to make Nucleus docs the go-to destination for anyone developing an experience at Productboard. As Nucleus' usage continues to grow, we need our docs to carry an increasing load of questions and guidance. We’re confident that improving the docs experience plays a critical role in making that happen.

Page impressions (last 90 days)

We've seen a increase in overall page views of the documentation, probably due to the increase of components now being documented and greater visibility of Supernova.

Views by page (top 5 components)

We expect the engagement to increase as we add the code and content information to our documentation in the future.

What's coming in Q3

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

Design

• Increase React/Figma Parity from 72% to 84%
• Define new semantic design language

Engineering

• Add Keyboard Navigation for List Selection Framework
• Remove Deprecated Components

Documentation

• Increase Coverage of Supernova Design Docs from 40% to 54%
• Define and implement new success metrics and KPIs for Nucleus