Create a Design System for Rivit TV

 Brief

Design a design system for Rivit TV’s web, mobile and OTT products

Problem Statement:

Our design process was initially slow, cumbersome, and lacking productivity. As a member of the Rivit TV team, achieving agility was a challenge. The initial idea of developing a design system faced resistance and skepticism, but over time, we garnered the support necessary for its implementation.

Benefits of Creating a Design System:

The creation of a design system brought about several advantages, including:

1. Time Savings: Streamlining our design process saved a significant amount of time.

2. Consistent UI: This consistency is not only aesthetically pleasing but also builds brand trust.

3. Reduced Complexity: By reducing ambiguity, we made our design and development tasks more straightforward.

4. Facilitated Collaboration: The design system enabled collaboration and consensus-building among team members.

5. Foundation for Improvement: It provided a strong foundation upon which we could further enhance our design practices.

Creating a design system transformed our team into a faster, more efficient, and more robust unit.

My Role:

Our goal was to establish a library of flexible and scalable components to accommodate future growth. To achieve this, I initiated the process by compiling an inventory of existing components found throughout the web, mapping them to user flows. Initially, I focused on designing fundamental elements, such as primary buttons and typography within a grid system. However, we also anticipated the emergence of new components during product design iterations. For these situations, we developed generic components designed for positional purposes only, with plans for further evolution as we refined the entire system.

Exploration:

Our journey into defining the right visual language for our users began with a deep dive into our user personas. We understood that it was crucial to align our design choices with their preferences and needs. To kickstart this process, we organized a brainstorming session, aiming to answer pivotal questions like:

• Corner Styles: Should we opt for round or right-angle corners in our design?

• Branding Approach: Should we emphasize our brand identity heavily or adopt a more neutral, agnostic appearance?

• Tone and Voice: What should be the tone and voice of our product when communicating with users?

Once we had a clearer sense of how our product would engage with users, I took the initiative to sketch out preliminary design ideas, which were subsequently presented to our team for discussion and feedback.

Resource Utilization:

Throughout this design exploration, I found two invaluable resources that greatly informed our approach:

1. Atomic Design by Brad Frost: Brad Frost's book, "Atomic Design," provided comprehensive insights into the creation and maintenance of robust design systems. It served as a foundational resource, guiding us in building a design framework that would stand the test of time.

2. Pattern Lab: The website "Pattern Lab" served as an exemplary model for a living design system. It showcased practical implementation and gave us a tangible vision of what our own system might look like in action.

These resources not only enriched our understanding but also contributed significantly to the success of our design exploration, helping us make informed decisions and create a visual language that resonated with our users.

Research

Companies like IBM, Airbnb, Google, Apple, and Atlassian have developed extensive and renowned design systems that can serve as excellent sources of inspiration and guidance for your own design endeavors. Here's a brief overview of what you can learn from each of them:

1. IBM: IBM's design system, known as IBM Design Language, is a comprehensive resource for creating consistent, user-centric experiences. It emphasizes simplicity, accessibility, and modular design. You can study IBM's design principles, component libraries, and accessibility guidelines for inspiration on creating a robust design system.

2. Airbnb: Airbnb's design system, called "DLS" (Design Language System), focuses on maintaining a cohesive and visually appealing user experience across their platform. You can learn from their approach to creating reusable components, typography, and color schemes while ensuring a personalized touch to their design.

3. Google: Google's Material Design is known for its minimalist aesthetics and emphasis on tactile, intuitive interactions. Studying Material Design can provide insights into crafting visually pleasing interfaces, effective animations, and user-friendly layouts.

4. Apple: Apple's Human Interface Guidelines (HIG) are an essential resource for anyone designing for iOS and macOS platforms. Apple prioritizes simplicity and user delight. You can gain insights into their use of icons, navigation, and app layout guidelines.

5. Atlassian: Atlassian's design system, called "Atlassian Design," focuses on scalability and consistency across their suite of software products. You can learn about their approach to creating design tokens, component libraries, and how they manage design documentation.

Gathering Information:

To kick off the design process, my initial step was to thoroughly examine the main web's user flow. This involved taking stock of all the necessary UI elements required to construct the Minimum Viable Product (MVP) for our web product. Once I compiled this comprehensive list, I began the exploration phase.

Create, Test, and Iterate:

Throughout the design journey, I maintained a dynamic approach. As decisions were made during design critiques, I meticulously documented these choices, implemented them into the design, and then presented updated designs to the team. This iterative process allowed us to refine and optimize the user interface continually. Additionally, during this phase, we started the process of formalizing the initial draft of documentation and establishing rules.

Debate and discussion played a significant role in this process. We engaged in thoughtful debate to ensure that we set strong, well-defined rules and established consistent design patterns within the system. The goal was to create a system that could be seamlessly applied across multiple devices.

Final Components:

The culmination of this effort was the creation of the web's design system, which served as the foundation. From there, this design system was extended and adapted for mobile and OTT (Over-the-Top) platforms, ensuring a cohesive and consistent user experience across all devices.

This methodical approach, which included research, iterative design, documentation, and adaptability to various platforms, allowed us to build a robust and versatile design system that catered to our specific project needs while ensuring a consistent and user-friendly interface across different devices.

Grids:

After collaborating with our engineering team, we opted for the Bootstrap Grid System, a widely supported CSS framework at the time. It served as the core structure of our design system. I created three distinct grids tailored for different purposes:

1. Public Facing Grid: Designed for public-facing sections, it facilitated content presentation to non-logged-in users.

2. User Account Grid: This layout focused on user profiles and account-related pages, offering structured user-specific information.

3. Show Pages Grid: Ideal for content-rich and detailed pages, it ensured organized and engaging content presentation.

These grids streamlined design, maintained visual consistency, and empowered designers to create user interfaces that met our project's diverse needs.

Typography:

Following research and careful consideration, we settled on Source Sans Pro as our chosen typeface. It was selected for its modern appearance and exceptional rendering, particularly at small sizes—making it an ideal choice for user interfaces.

Resource References:

For insights into typography best practices and web font formats, we referred to the following resources:

• Smashing Magazine - "The Perfect Paragraph"

• Typography Handbook - Web Font Formats

These resources provided valuable guidance to ensure that our typography choices aligned with best practices and enhanced the overall user experience.

Colors:

Once our branding and logo were solidified, we derived our color palette primarily from our green brand color. The selection of green as our brand color was deliberate, as it embodies characteristics such as fun, memorability, and innovation.

By building our color palette around this vibrant green base, we aimed to convey these qualities throughout our design, creating a visually cohesive and memorable user experience.

Buttons:

Our button system was meticulously crafted to provide a straightforward and easily comprehensible user interface, intentionally contrasting with the complexity of our product's business model. In total, we established eight distinct button styles consistently applied throughout the entire web product. This consistency ensured a unified and user-friendly design, enhancing the overall user experience.

Icons:

Our approach to icon design centered around simplicity and clarity. The primary goal was to create icons that served as straightforward metaphors, making the interface easy and efficient to navigate.

To achieve this, we adhered to a minimalist design philosophy. Our icons were meticulously crafted using only a 1pt outline stroke, intentionally removing any extraneous details. This stripped-down design approach ensured that the icons conveyed their intended meanings with clarity and speed, enhancing the overall user experience.

Textfield / Loading / Success Error Message / Modals:
In designing text fields, loading indicators, success/error messages, and modals for our MVP, we adopted a minimalist approach. This approach was chosen to effectively handle complex scenarios while also laying the groundwork for scalability and future redesigns.

By keeping the design minimal, we aimed to streamline the user experience, making it efficient and user-friendly even in the face of intricate use cases. This approach not only ensured the MVP's effectiveness but also set the stage for more straightforward and impactful redesigns in the future as the system evolved.

Loading

Funding Lockup:

The funding lockup library served as a versatile solution, managing all funding-related scenarios across Rivit TV's product range. These scenarios encompassed various states of funding for different seasons:

1. Season 1 is Funding: This state represents the active funding phase for Season 1.

2. Season 1 is Funded: Season 1 has successfully reached its funding goal.

3. Season 1 did not Fund: Unfortunately, Season 1 did not secure the required funding.

4. Season 1 is Available: Season 1 is accessible for viewing or participation.

5. Season X is Funding: Similar to Season 1, this state indicates the active funding phase for Season X.

By managing these scenarios consistently across all products, the funding lockup library ensured a seamless and coherent user experience while effectively communicating the funding status of each season.

Show Cards:

Show cards served as a universal design element seamlessly integrated throughout the entire product. These cards were efficiently managed through a centralized design system, ensuring consistency in their appearance and behavior across various parts of the platform. This approach facilitated a cohesive and user-friendly interface, providing a unified experience for users interacting with show-related content.