The project’s driving responsibility was to harmonize the current streaming platforms that existed in French Canada and English Canada. They both had different names, different audience reach, different libraries, but ultimately shared the same goal - deliver first class Canadian films and documentaries to the entire country.
Creating ONE design system that could be used between both products would not only strengthen the visual identities of CBC and their french counterparts, but also development of components would happen once. Create a component for one side, and the other side automatically gets it for free.
The idea was born to create a design system of identical UX, and apply seperate themes to the french and english products. We would try to keep everything identical, but still allow each product’s own flavour to come through in colours, language and branding.
Although research showed us plenty of our users were cable cutters, there were still plenty using multiple devices to stream Gem to their televisions and enjoy the content on their big screen.
Mockups were created for TvOS and AndroidTV, our 2 main TV streaming devices. With these TV solutions came the ability to navigate through remote controls, D-pads and even swipe gestures.
Both platforms came with very different native components for text input, so the design system had to have a lot of flexibility here to not force the user into using a pattern that was off from the rest of their TV apps.
Screen real estate is paramount, and we did not want the user to ever be far away from accessing the navigation, or jumping back to a swimlane they were on.
One of the things we were extra sticky about was the source of truth that the wireframes would provide for developers and analysts. We made sure that naming conventions in our wireframes were carried over to the developers side, to ensure we were all talking about the same ‘things’ at every step.
Wireframes were stored in Abstract and fully inspectable by developers. Although most elements were inspectable, we did mark up spacing blocks visually. Spacing and margins were grouped together with their respective components to show what disappears when a part of the wireframe isnt used.
Streaming platforms are expected to run on just about anything, and users definitely expect to pick up where they left off, whether it be on the train or in the living room.
We used a ‘Large’ desktop breakpoint as the starting point for most new designs, and worked our way down to 5 breakpoints that covered web use on a mobile phone up to a desktop. From there we could reuse some designs for iOS and Android mobile and tablet devices. Portrait and landscape mocks had to be factored in later to accomodate newer WCAG accessibility needs.
TV was designed at 1920x1080, but we also future proofed a lot of the assets at 4K resolution. Not overwhelming the user with huge payloads on TV was a big issue that we tried to solve with smarter preloading.
The design system was made for both the French and English products, so most components had theme A and B variants. The components themselves had the exact same structure, but things like colours and icon libraries would get switched up.
Development time was hardly affected since the base colours and icons were established from the beginning. When previewing the developed components in Storybook, we were able to flip a switch to show the French and English versions of every component.
By the end we had about a dozen libraries for components, comprising of buttons, typography, navigation, colours and other fundamentals. In addition to those libraries, we would create a new file for each section that would be linked to those libraries.
Once we had all our components designed, we were looking at the bigger system of how they would come together to form pages.
Instead of creating a template for ‘Home’, a template for ‘Movies’, we decided to keep it even more flexible. A page would be titled according to the components it used, as we had multiple types of headers, grid layouts, special swimlanes etc.
When the backend was putting together the Homepage, stakeholders can add their oh so important input in how they would like it constructed. Since we were creating 2 different products for 2 groups of stakeholders, it allowed each product to handle their layout differently, and not have to all agree on the same.
Because we were tackling the layouts of each page in a modular way, we could easily swap out a hero image for a different hero treatment that we already had, and quickly test that out. Swapping components back in for different versions of themselves made A/B testing quick and low overhead for developers.
In some cases, one product was able to benefit off of the testing of the other product. The French version would try out different approaches because of their more limited library, and the English side could learn from those tests.
It was pretty neat seeing both research sides benefiting off of the other’s tests.