This week sees the launch of the Boosted library v4.4.1. Orange Boosted is a development framework library built on the Bootstrap platform. It’s a repository of coded components based on the Orange Web browsing design standard and includes modules and templates to assist project teams building Orange web products and services.

The global design language team have been collaborating with the Boosted team to align and update the web UI components, modules and styles from the Web Design Kit library with the aim of establishing a shared reusable code library of UI elements based on the Orange Design System standard. These include, among other elements, the global header, buttons, form elements, data tables, navigation elements and alerts. Specifications for the global Orange styles were also updated, including typography sizes, line-spacing and letter-spacing as well as the digital colour palette. It was also an opportunity to provide the developers in the Boosted team with important details of how modules like the global header and footer, with its many variants, displayed across the responsive breakpoints.

With both teams working from different locations it was important to have a common reference for the specification of the components and modules being implemented. To improve the design handoff process, the Sketch files containing all the designed components and modules from the Web UI Design Kit library were exported directly into Zeplin. Zeplin is a cloud-based collaboration tool built for UI designers and front-end developers. It allowed the design team to generate accurate specifications, assets and code snippets for the Boosted development team to implement the designs while the Web UI Kit was being finalised.

Ongoing weekly calls enabled both teams to share the status and monitor the progress on each of the components and modules as they were being completed. Design reviews also allowed the teams to check the output of the implementation matched the original designs.

As well as in house developers, the Boosted team also includes expertise in Accessibility. They were able to evaluate the UI components and modules throughout the design and development stages to identify any issues and advise on any changes needed to ensure they were designed and developed to meet accessible compliance standards. Some of the changes involved modifying the global header selection states for the main navigation to improve accessibility.

With this version of the Boosted library now published, this marks the beginning of the process to have a common global design language that is available in the form of design assets and a code library. The team is now looking ahead to version 5. We look forward to updating you on our progress.