Roadmap
Here's the feature roadmap for the Design System. In progress, planned and done.
In-Progress
| Feature | Description | Status | Priority | Assigned to | Business Reason |
|---|---|---|---|---|---|
| Add Agnostic Theme | This creates a neutral theme that enables white-labeling, multi-brand support, and faster theming in the future. | In progress | High | Design | Alleviates onboarding of new clients (such as PP Sports and BF Exchange) |
| Oasis PP | PP Sports using TBD and The Wall | In progress | High | Design / Tech | Strategic business decision to simplify tech stacks and unlock greater sharing between brands |
| Phoenix BF | BF Exchange using TBD and The Wall | In progress | High | Design / Tech | Strategic business decision to simplify tech stacks and unlock greater sharing between brands |
| Audit and documentation | - Review unused components, tokens and icons - Resolve misalignment on naming conventions - Improve ease of library curation and new token creation - Complete documentation for each component around usage | In progress | High | Design / Tech | - Simplifies library - Simplifies token management - Expected to speed up outputs and future token creation - Unlocks future AI capabilities |
| Metrics | - Creation of metrics to track our progress in building a competent and scalable Design System - Automation where possible | In progress | Medium | Tech | - Demonstrate value at scale and justify investment - Identify adoption gaps and friction - Track progress and accountability over time - Guide prioritisation and roadmap decisions |
Backlog
| Feature | Description | Status | Priority | Assigned to | Business Reason |
|---|---|---|---|---|---|
| Improve native dev experience | - Improve capabilities in developing with a native-first strategy in mind - Improve Accessibility testing - Improve documentation and understanding | Backlog | High | Tech | - Supports native-first strategy - Enables simpler DevEx |
| Snowflakes | - Create a strategy for how to handle snowflakes - Curation and usage rules | Backlog | High | Tech | - Improved decisions re snowflakes in the future - Smaller set of components to manage - Clear guidelines on creation |
| Component Background Aware | Add a capability for components to adapt to dynamic backgrounds. This is an enabler to: Highlight Headers feature and Player Pages | Backlog | Medium | Tech | - Clean conditional code and component variants - Enable component to be embrace more brand differentiation |
| Automate iOS (Deploy / Tests) | Automate IOS app deploy/testing at component level | Backlog | Medium | Tech | - Better support of iOS which is our largest front-facing medium - Supports native-first strategy - Removed needs for manual testing |
| Accessibility | - Review accessibility failings and quick wins - Link to Front End Strategy and where that is at the time | Backlog | Medium | Tech | Progress towards WCAG AA standards being met |
| Where to Start Documentation | - Improve welcome documentation - Improve embedding of DS into BAU - Create contributing guidelines for non-Design System designers | Backlog | Medium | Design / Tech | - Supports onboarding of new users in Oasis and Phoenix - Reduced contact to support teams on ask-the-wall - Increases positive uptake of DS as a product |
| Integration Documentation | - Improve documentation on DS integration | Backlog | Medium | Design / Tech | Simplifies journey for new 'clients' to integrate with DS with as little extra support as possible |
For Consideration
| Feature | Description | Status | Priority | Assigned to | Business Reason |
|---|---|---|---|---|---|
| Add Tokens Experiments capability | Add a capability to designers test tokens updates with experiments and without the need for a release | Backlog | Medium | Fábio S. | Accelerates the design iteration process by allowing immediate feedback and adjustments, thereby enhancing productivity and leading to quicker time-to-market for new features. |
| Define Patterns | Define reusable solutions to common design problems | Backlog | Medium | ||
| Cleanup Old Tokens | Remove old semantic tokens that are not used anymore | Backlog | Medium | ||
| Make tokens dist by component | At the moment tokens are available as a huge tokens file, we would like to make it available by component, this will improve tree shaking and performance on Apps | Backlog | Medium | ||
| Simplify the tokens being used | Backlog | Medium | |||
| Add real data to Figma components | Provide a more accurate depiction of what your UI will actually look like | Backlog | Low | ||
| Code Connect | With Code Connect, Dev Mode shows design system-defined code snippets instead of its default autogenerated ones. | Backlog | Low | ||
| Improve components performance | Backlog | Low | |||
| Improve components search on Figma | Backlog | Low | |||
| Create AI bot | Create a bot that help us on daily basis questions. Do you know what is this component? Is this token used? etc. | Backlog | Low |
Done
| Feature | Description | Status | Priority | Assigned to | Business Reason |
|---|---|---|---|---|---|
| Multi dimensional design theme | Re-architect our JSON files to support a new multidimensional structure | Done | High | Design / Tech | Enable DS to scale faster |
| Increase Visual Coverage | Add visual tests to missing components | Done | High | Tech | Speeds up delivery and improves quality |
| Variables | Create variables for light, dark, desktop and mobile modes. | Done | High | Design / Tech | Enable Core Pages on Figma |
| Move PO's & SO's to TBD package | Page Objects / Screen Objects are used only by TBD, so them should live inside TBD | Done | High | Tech | Reducing the number of components needing updates, improve performance by decreasing dependencies, and allow better resource allocation by focusing on frequently used components. |
| Move Snowflakes to TBD | Our components packages have almost 300 components, what makes it's really difficult to manage. So we will move components that are used just once back to the TBD | Done | High | Tech | Reducing the number of components needing updates, improve performance by decreasing dependencies, and allow better resource allocation by focusing on frequently used components. |
| Automate Icons | Fully automated the-wall-icons, updating them everytime they are updated on Figma and updating also the CMS | Done | High | Tech | Increases efficiency by saving time and resources, ensures consistency in the visual language, and speeds up the deployment of updates. Additionally, it enhances accuracy, scalability, and cost savings, leading to improved user satisfaction and a competitive business edge. |
| Lint Package | After some months reviewing PR's all days, we would like to add some automated rules to help us reviewing in an automated way | Done | Medium | Tech | Early bug detection, and improved efficiency by automating error checks. Additionally, it can result in cost savings by reducing the time and resources needed for manual code reviews and fixing late-stage bugs. |
| Audit Components | Identify not used components. Identify equal / similar components. Identify components name diff (design / dev). Identify inconsistencies on components | Done | High | All | Reduces technical debt and maintenance costs, streamlines development processes, and enhances communication between teams. This leads to a cohesive product development cycle and consistent user experience, improving reliability, brand reputation, and customer loyalty. It also reduces the time and cost of post-launch debugging and issue resolution. |