OB.Cortex Design System
OB Cortex is a comprehensive Design System that provides self-explanatory, unified, and consistent UI components to ensure seamless and intuitive user experience
chapter one
Outbrain is the leading recommendation platform for the open web, it serves personalized recommendations on premium publishers' websites.
The Problem
Without a centralized Design System, there were inconsistencies in the user experience, leading to user confusion and frustration. Additionally, a significant amount of time was spent creating new experiences and patterns, resulting in high development time.
Efficiency & Productivity
Speed-up Development
Streamline Collaboration
Unified User Experience
chapter two
User Research
In the research phase of creating Outbrain's Design System, we conducted a UI inventory, market research, prioritization, and planning to identify areas of inconsistency, gain insights, and align the system with our goals.
Setting goals and structure
Defining core values
Designing MVP
From design to code
Launch & Implement
Foundation
To create the visual language foundation of our design system, we focused on creating a modern and simple UI that aligns with our UX values. We started by defining the color palette, typography, and iconography to ensure consistency and coherence throughout the system. We aimed for a clean and minimalistic design that allows for easy navigation and provides a seamless user experience.
Typography
Colors
Iconography
Animation
Components
We fostered a collaborative approach in creating our components, with designers taking ownership of assigned components from research to documentation. This ensured consistency, cohesion, and thoroughness in design, while empowering individual designers to deliver innovative solutions.
This approach streamlined the design process, fostered a sense of contribution among team members, and harnessed diverse skills, resulting in a more creative and inclusive design system.
chapter four
Governance
Documentation
Figma Library
One Source of Truth
To ensure the widespread adoption of our Design System, it was crucial to have an all-encompassing documentation website that would serve as the "Source of Truth" for everyone involved.
StoryBook
By integrating Storybook with Zeroheight, we achieved a comprehensive documentation platform covering both design and development aspects, fostering collaboration and facilitating the creation of exceptional products.
Zeroheight
We chose Zeroheight to build our Design System documentation website due to its purpose-built features and ease of use.
Zeroheight helped me efficiently design, edit, and maintain changes, saving valuable time compared to other solutions.
chapter five
In our current flow, we have a checkbox; once checked, it crawls the user’s website and imports one image and title from their website and populates their ad.
In its current state, this feature was barely in use (less than 10% of campaigns), so I decided to take advantage of what I already had and leverage it.
chapter Six
Implemntation Plan
By importing automatically more images on content creation, we increased the best-practice adoption and our monitoring goals
This design system wouldn’t be here without the help and effort of many of my talented colleges in the UX guild and Front-End guild.
Special thank you for Tsachi Shushan (Head of Frontend Guild), Daniel Sagi (Head of UX Guild) and Michal Porag (Design System FE Lead).