XReality Academy Design System

XReality Academy

Design System Redesign

A design system overhaul to increase efficiency, scalability, and collaboration.

XReality Academy is an online educational program that teaches Extended Reality (XR) courses. The XReality Design System (XDS), was crafted to enhance the design development process, ensure design consistency, and promote the standardization of reusable components.

Duration

2 months (2022)

role

Product Designer

Team

Director of Product Design
Product Designer

Project Goals

Facing challenges of design inconsistency and collaboration, we set out to create a unified and efficient design system.

Components will be used by internal teams (Developers and Designers) and the interface and experience design of the components will be used by the users of the company platform.

Why it matters:

Consistency:
The design system provides a centralized source of design elements, ensuring that all products, interfaces, and materials maintain a consistent look and feel.
Scalability:
As the organization grows or launch new products, the design system can scale to accommodate evolving needs.
Improved Collaboration:
Design systems encourage teams to work from a shared set of guidelines and assets, fostering better communication and understanding.

Part 1

The Style Guide

The Style Guide provides guidelines defining the visual and design elements used to create a cohesive and consistent user interface. Within the XReality Design System, the Style Guide consists of typography, colors, icons, and spacing.

Typography

The Typographic system consists two fonts families: Poppins, used for headings, and Roboto, used for body text and all other elements.

‍

Color System

The Color System was established so that teams can apply colors to the UI with purpose and significance.

Primary: The main brand color primary buttons, active links selections, and icons
Secondary / Accent: Used for badges, banners, and alerts
Success: Used for the accomplished goals and other successful operations
Warning: Used for warning a user about errors or destructive messages
Grayscale: Used for text, icons, borders, and background colors
Background: Used for the main background color of the user interface

‍

Spacing

We've opted the 4-point grid for spacing, as it allows us to place and arrange elements with more flexibility, accuracy, and precision compared to the 8-point grid.

Part 2

Components Library

I built various variations for multiple components in the design system, keeping in mind of both visual polish as well as good user experience.

Buttons

Buttons are used to help users initiate and action or navigate to another page. CTA buttons have three usage styles, with each button having a role to to balance attention-grabbing UI and subtle supporting actions.

A high-level overview of the button component system

Tabs

Tabs are used to quickly navigate between views within the same context. They help to efficiently group and condense information, packing several screens worth of information into one.

Filters

Filters allow users to make selections or filter content. Users can use filters to help the user narrow down the scope of information via categories so they can find the information they are looking for.

Usage Guidelines: When an array of dropdown filters consists of one or more multi-select filters, use this pattern to allow the user to easily edit and clear selections.

Dropdowns

Dropdowns present a list of options from which a user can select one option. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content. Dropdowns can be used in forms on full pages, in modals, or on side panels.

Here's a glimpse of how a user would customize the component according to their needs.

conclusion

We released the 1.0 version of the design system combined with in-depth documentation.

The design system will continued to be developed and improved. For next steps, we plan to create a dark mode for accessibility purposes.

This project reinforced the significance of meticulous attention to detail, and the need for balance between user experience and visual polish to create a design system that is not only aesthetically appealing but also functional.