Curiosity Stream

In compliance with my non-disclosure agreement, I’ve obscured confidential information. This case study presents my own ideas and work and may have been summarized, re-created or altered to maintain confidentiality.

It was late 2020. The company had recently gone public and was growing. The apps were starting to show their age and there was a need to rebuild them into a more modern streaming experience.

A formal design system had not yet been established and a redesigned experience was the perfect time to start building one.

This began almost a three year journey into creating a robust and scalable system that could be updated in real time and implemented everywhere. It was an ambitious project, and mine to lead.

After some comparative analysis, we decided to build the design system in Figma (a powerful design tool) because of its cross-platform support and remote-first approach. But we needed to convert the existing assets from Sketch into editable Figma elements.

I started there.

After we had some basic elements in place and learned how Figma worked, it was time to review the color palette. It’s a very important piece for brand identity. I added the colors from the brand guidelines and began to experiment with matching gradients.

Next was the typeface. We wanted a font that appeared intentional, modern and fresh. Opting for a thin and sleek design. We chose Graphik for its optimal weight versatility and modern aesthetic.

Then it was figuring out weights for HTML structure and hierarchy.

Next, I needed organization – random stuff was starting to appear everywhere. I began to separate the components into their own sections by similarity and function.

The button is one of the most fluid elements to work with. They’re simple and straightforward, with many potential states and shapes. This became the first interface component that was redesigned and implemented.

The design system was taking shape.

Next up was the form and dropdown elements, which was just as complex as the button. It also happened to be nearing the holiday season. This presented an opportunity to build templates for the marketing team for the holidays in an effort to unify the experience.

Over the next few weeks, the team and I collaborated on everything from email strategy, coupon designs, paid ad copy, and social media templates. This was a great opportunity to start integration of the design system into campaigns that were already public facing.

Atomic Design is a methodology for creating design systems. It suggests that all designs can be separated into five levels (arranged from smallest to largest). These levels are: atoms, molecules, organisms, templates and pages.

It’s a brilliant concept and was the methodology that we chose. Our work so far in Figma already supported this perfectly.

Atoms were the smallest elements, naturally. These are things like arrows, buttons, scrollbars, etc. Molecules are larger pieces comprised of atoms. Organisms contain molecules, templates contain organisms and pages is essentially everything stacked together.

Almost a year had passed. We had our design system – a real source of truth. For the rest of this case study, I’ll call it Halo.

It was working. Each iteration allowed for quick changes and became stronger as we added new templates and pages. I had a living, breathing style guide. The first official handoff was the redesign of the new web app – a major collaborative effort with a growing product team.

The product team successfully launched a new version of the web app in September of 2021. Next, we started to implement data points and events to measure its impact. Overall, the feedback received was positive and a direct reflection of all of our hard work.

It was time to take the design system and expand it into mobile apps, tablet and television apps.

At this point, the team split into a few separate groups in order to scale the designs for each platform. I was responsible for the redesign of the television experience – starting with Roku.

The first step was to determine the best way to align the television experiences together with the web and mobile apps. Each platform has its own unique challenges and software for TV is no exception. Especially because we were developing in React Native.

The good news is that I didn’t have breakpoints to consider as there is a set resolution. Each platform does have its own set of design safety margins. Research showed that Apple’s guidelines are the most conservative as it pertains to screen real estate – so that became my foundation.

Applying the proper margins, I started to expand Halo and build special components for widescreens.. Here is an example of the new home screen with a layout grid to reflect the margins I selected.

Some of my time at DIRECTV was spent studying best practices for living room design. The industry calls this 10ft. design – or designing for television. A large screen format really provides an opportunity to immerse yourself in the artwork. I was comfortable taking on the task.

The typeface needed adjustments. It was difficult to read on the larger screens and in bright rooms. After setting the margin, I started with finding a balance of usability and aesthetics.

The team shared the same sentiment – let the artwork and content shine. For me, this meant everything center-stage (screen) when possible. it’s a natural eye line and visually appealing when viewed from a distance.

Beautiful show artwork is a must in today’s competitive environment. But it’s a double-edged sword. Content discovery is currently the biggest problem facing streaming services.

According to Nielsen’s 2023 State of Play report, “Audiences are so overwhelmed by content options that many give up on watching altogether. This highlights an increasing need for personalization and fulfilling content discovery journeys.”

When it comes to designing for television and living room experiences, an entirely different psychology is at work. The watching environment is unique compared to web, mobile and tablet.

What is the balance? It’s a tough question to answer. Every streaming platform seems to battle this on a daily basis. My approach was that less is more.

Here’s the home screen of the legacy version of the tv app.

Redesigned Version (2022 – Beyond)

Next was rethinking the navigation. What was best for usability? How could I incorporate elements as we had in other platforms and make it appear seamless with the design system?

There was a lot of research into this and many opinions on the topic. Ultimately, I decided to move the navigation to the left side so that it travels with the users as they scroll down the screen. In doing this, it would be accessible from every carousel.

It’s important to note that the carousel is one of the best ways to utilize the screen real estate in television design. It’s standard practice now and generally easy to see the content without taking up a large amount of space..

I wanted my carousels to have a certain balance with the left side of the screen. Having the navigation in place was essential to know what that balance would look like and what I had left to work with after considering margins.

These essential building blocks, combined with Halo, allowed me to iterate and build efficiently.

The next steps were building the rest of the pieces and incorporating them into Halo, as I had done with other platforms. Another few months of designing and iterating, I was ready to hand off the designs to the development team.

Establishing the design system and redesigning the television experience was perhaps my biggest contribution at Curiosity Stream. The combined projects took a just under three years to complete, with tireless dedication from dozens of team members.

Our design team was small and nimble, but what we were able to build together is a testament to the power of creative collaboration. Each of us played a significant role in making the transition a reality.

Halo is a wonderful achievement and I learned a lot in its creation.

There’s something special about building from a blank canvas and seeing it manifest in the world, seen by millions. The project was complete and it was time for me to move to something new.

If you’d like to learn more about Halo or my other projects at Curiosity Stream, get in touch. I’d love to chat with you..