Following 10 years worth of design, rebrands and product transformation, there was a clear need to unify the UI design language across the NOW product base. While on the surface it appeared there was consistency, it was clear that there was an ever growing need for a source of truth for designers and developers working on the various platforms which the product sits on including Responsive Web, iOS, Android, Amazon, tvOS, Roku and XTV. With many individual requirements per platform, and a variety of designers and developers moving in and out of projects, unifying the designs in a design system would be a way of future proofing and ensuring design and development decisions could be made with solid rationale.
The main aim of this project was to create a single source of truth of a unified design language which spans across all device platforms where NOW lives.
Initial Audit and Project Scoping
On first look, all of the design language seemed generally unified, however it became clear through audit that all platforms were at a different point within the designs development, and all had differing principles and rules in place. To get a clear picture of everything, a full audit was done of the product across all platforms. This included collating all colours, fonts, grids, components, features and page templates. This exercise helped identify clear holes and inconsistencies which could be addressed by creating a unified approach. All foundations, components and pages required were listed out and anomalies were flagged so they could be addressed when appropriate.
Realigning to a Solid Foundation
With the core elements identified, these were realigned to create a much more consistent approach. The colour palette was reduced down to remove any which were not in use, and they were regrouped to create easy to follow rules. Typography was reworked to create a systematic approach and ensure that key pieces of type were separated out to their own style, such as navigation, rail titles and buttons. A spacing guide was also created to solidify the practices that were being used. All of these, as well as styles (such as drop shadows and border radius) were re-documented and tokenised, with some semantic tokens in place also for core elements, alongside documentation of brand assets and elements. Iconography was revisited in a separate project, but fed into this work to ensure the decisions in that work could be reflected. All of this together formed a Foundations Library which could be fed into all future work.
Rebuilding Designs using Tokens and Components
With the Foundations redefined, the next part of the work was to use these to revisit all designs across Web, App and TV, and create an atomic approach. The plan was to ensure all designs were built in a building block way, so any change at a Foundational level or atomic component level would trickle through all components and templates. The audit also showed where some platforms had components missing so this approach also meant these could be tackled and future-proofed. Atomic components, such as Buttons, Input Fields, Checkboxes and Progress Bars were taken first and worked across on all platforms so they were redesigned in the same way. Following this, components were taken one at a time and built out across all platforms, with all of their variants created to ensure complete consistency when moving between the different platforms.
Creating a Figma Library Setup
The main aim was to create useable Figma Libraries which reflected the most up to date designs for all platforms, in an easy-to-access form. This led to the decision to create Libraries based on platform, with three key libraries to start with - App, Web and TV. Splitting this way meant that each individuals platforms nuances could be respected and be very clear to designers which version of a component is correct to use in what circumstance. The Foundations led into all three of these libraries. With the breakpoints defined in the Foundations, each library was individual, with TV having one breakpoint, Apps having two breakpoints and Web having three. Once these were in place, Page Template Libraries were also created, meaning all designed elements within the service were accounted for and full pages were available to simply drag and drop into any new work.
Feeding the Design System into Build
With the atomic way the system was built up, it meant it was easy to transfer to development. With all designs now using the libraries and tokens, it meant inspecting the files was a lot easier as they were all linked into the Foundations and there was a universal language. With tokens already defined and components redesigned using these, it meant developers could inspect existing builds and reformat into the new approach. This also meant any components built could be reused in future work, saving time, and meaning that any future changes to existing foundations or components could make an impact very quickly.
Completed at Sky.