Skip to main content
Back

System1 Design Portal

The System1 Design Portal, initially a passion project of mine, has since evolved into a necessity for the company. This portal houses design systems for numerous System1 brands, each containing valuable brand information such as the brand mission, style guide, component guidelines, content guidelines, and more.

From Concept to Reality: The System1 Design Portal

Identifying the challenges

Whenever I begin a new project, I always think about what I want to achieve and what might get in the way. Here were some of the challenges for the System1 Design Portal.

  1. System1 did not have design systems for any of its brands, only style guides.
  2. The portal will unify digital style guides and brand information for 20+ brands into a single accessible hub.
  3. Consolidate scattered resources across platforms. Resources such as logos and brand info were siloed on specific teams, or hidden in a random Google doc.
  4. Balance the requirements of internal users, and external users for brand showcasing.
System1 design portal logos

Understanding
the market

After identifying the challenges, I conducted an analysis of competitor design systems, including the Atlassian Design System and IBM Carbon Design System. These analyses provided inspiration and insights into the key components necessary for an effective design system.

Understanding
our users &
their needs

I crafted straightforward user personas and a user story to grasp who would utilize the design portal and for what purposes. The majority of the user base is internal, but external users could also visit the site to get insight on System1 brands.

System1 design portal persona
System1 design portal user story

Cross-functional partnership

Alot of research and planning was required for this project. I organized and facilitated meetings with all necessary stakeholders, including designers, developers, editorial, project managers, and any other relevant parties, to gather their perspectives, insights, and resources.

These collaborative sessions served as valuable forums for discussing project goals, brand requirements, design preferences, technical considerations, and any other pertinent aspects, ensuring alignment and buy-in from all key stakeholders throughout the design and development process.

Sitemap

A structured sitemap was developed to visualize the hierarchical organization of website content and navigation paths.

System1 design portal sitemap

Utilization of wireframes

Wireframes helped visualize and plan the structure of the design portal, ensuring accessibility and flexibility in navigating and accessing resources within the portal.

System1 design portal wireframes

Mockup creation

Mobile and desktop mockups were created to visualize the portal's layout and functionality across different devices, ensuring consistency and usability across various platforms. Throughout the UI design process, I received feedback on design variations from designers on other teams.

System1 design portal screenshot
System1 design portal screenshot
System1 design portal screenshot

Incorporation of unique brand identities

Maintaining consistent branding elements throughout the UI design was crucial, encompassing colors, typography, and imagery. Each design system aligns with its respective website and style guide, ensuring coherence and reinforcing brand identity across all brand representations within the portal.

System1 design portal identity

Accessibility considerations

I always prioritized accessibility best practices for each design system, for example, ensuring high contrast ratios, scalable font sizes, and keyboard navigation. This approach guarantees inclusivity and compliance with accessibility standards.

System1 design portal accessibility

Custom-built theme

I designed a custom WordPress theme prioritizing ease of editing, enabling stakeholders to make updates and modifications as needed. Later in the process, I collaborated with developers to put some final touches into the portal.

Modern HTML, CSS and JS were utilized in the development process. Responsive design principles were implemented to ensure optimal viewing and interaction experiences across a wide range of devices and screen sizes.

System1 design portal custom built theme
System1 design portal screenshot
System1 design portal screenshot

The review stage

Engaging designers and project managers from other teams in the review process ensured alignment with their respective brand identities and requirements.

A staging site was created by the development team to provide early access to the design portal. Feedback was incorporated to refine and optimize each brand's representation within the portal.

System1 design portal screenshot
System1 design portal screenshot

Empowering stakeholders

Training sessions were conducted, and documentation was provided to empower stakeholders with the knowledge and skills necessary to navigate and edit the portal effectively. As a result, teams were empowered to take charge of their brand representation, fostering a sense of pride and responsibility in brand management.

The outcome

  1. I introduced the design portal to over 200 employees during a company-wide meeting.
  2. Shortly after, it became an integral part of the onboarding process, empowering new employees with essential tools for effective brand management.
  3. Externally, the showcase of strong brands attracts potential employees and showcases our collaborative capabilities.
  4. Through ongoing advocacy and promotion of the design system, I facilitated its widespread adoption and essential integration into brand management processes within System1.
System1 design portal picture of website

Get in touch

Let's Start Something

Email LinkedIn Github