New contribution model (Beta)
The new Contribution Model is now available in beta, with an initial focus on design contributions.
This model has been created to make contributions to Watson clearer, more transparent, and easier to follow. It defines:
- Different types of contributions (such as new components, enhancements, fixes, or documentation updates)
- Clear guidelines and expectations for each contribution type, helping contributors understand scope, ownership, and required steps
- Supporting resources and templates that guide contributors throughout the process, from the initial proposal to final delivery
Since the model is still in beta, feedback is highly encouraged. Sharing insights, questions, or improvement ideas will help us refine the process and ensure it scales well across teams and disciplines.
If you have any needs, suggestions, questions, or specific contribution ideas, don’t hesitate to contact us at #tech-project-watson or book a slot in our office hours. We’re happy to support you and explore how we can improve the system together.
Patient theme updates
The font sizes for Section heading and Display heading have changed in the Patient theme.
- New Display heading size: 28px
- New Section heading size: 20px
- This new sizes helps improve visual hierarchy and readability in specific layouts and content-heavy views.
Design System components & migration
- We have implemented 43 out of 47 design system components that are available to be used in React in the new golden path repository (docplanner).
- Check the progress of this migration here: Spreadsheet Link
Design Tokens updates
- New composition for our design tokens. Now we export both themes we support (customer and patient themes) for web and for react-native platform. They are provided in separated bundles.
- Design tokens now follow the DTCG format as standard.
New React Native components
Work is underway on a new React Native library, designed to bring Watson’s principles and consistency into mobile development.
Some components are already available at design level.
Avatar
Avatars are graphic representations of users and entities in the interface.
Bottom sheet
Overlay component that presents contextual content or short flows. It is used to focus the user's attention and should be used sparingly and with caution as they are disruptive interface elements.
Button
Buttons communicate possible user actions. Clicking on a button allows a user to perform the corresponding action.
Card
The card is a wrapper that displays content and actions on a single topic. It helps us structure the information that a user needs to digest.
Feedback
Feedback provides contextual, assistive, or descriptive information related to an adjacent component, such as a form field, image, or chart. It serves as supportive text that clarifies status, input rules, or visual content.
Icon
The Icon component allows you to display an icon from the Iconography library. They are used to provide additional meaning or give a hint about the usability of the component they are used in.
Icon Button
The Icon Button communicate possible user actions. Clicking on a button allows a user to perform the corresponding action. Icon buttons are suited for common, easily recognizable actions that don't require labels.
Label
The Label component is used to clearly identify a form control or to provide concise status information about an element or section.
Link
Links are text-based interactive elements used to navigate users to external sites outside the app. They can be used inline or as standalone text.
Segmented control
Segmented Control is a group of connected controls that enables users to select one or more related options to switch context or filter content without leaving the current screen.
Tile
A Tile is a flexible container that groups related content and actions in a clear, interactive format. It can function as a selectable or clickable element, enabling navigation, quick actions, or option selection.
Component Updates
Pagination: a new responsive behavior
Our pagination has been iterated to better suit mobile screens. Some of its elements have been redesigned to create a more compact and user-friendly mobile version for our users, without losing any functionality!
Dropdown destructive action
A new destructive action type has been added to the Dropdown component to better communicate high-impact actions.
- Desktop: on hover, destructive items change both text and icon color to red, clearly signaling the nature of the action.
- Mobile: destructive items appear in red by default, ensuring immediate visibility without relying on hover states.
This update improves clarity, consistency, and reduces the risk of accidental destructive actions.
New avatar sizes and variants
The Avatar component has been improved to better suit the use cases it represents. To this end, the following has been added:
- New sizes: Four new sizes have been created to improve our patients' confidence in the different professionals who use our platforms.
- New variants: The avatar component now has User, Entity, and Doctor variants, improving consistency in how this information is represented to our users.
New Layout version
A new wide version has been added to the Layout component so that it can adapt to new use cases that arise.
It is now available in design and code!
New icons added to libraries
During this period, our libraries have been enriched with the addition of two new icons: habits, history, near-me, request and new-chat.
All these icons are available in Figma and code libraries.
