Leia Design System

Timeline: 03.2020 - 02.2021

My Role: Main Contributor in a team of 4

Context

By March 2020, I joined Leia as a UI/UX designer, leading the design for multiple projects - LeiaPix, LeiaCam, Lightfield Studio, and the design system. Unfortunately, all the ongoing projects used different design languages and were inconsistent. It brought an unpleasant experience to users, created barriers for the team, and harmed the company’s branding. Therefore, we were urged to have a design system that could bring consistency between every team and create a better user experience. Since then, I have started to collaborate with other designers and engineers to implement the design system for Leia.

Leia Products

As the creator of the global design system, to ensure visual consistency across each team to work upon, I first needed to understand every ongoing product at Leia.

Leia Loft Store

Leia Loft Store is an app store only available on Hydrogen One Phone and Lume Pad with Andriod OS. It allows users to browse, purchase, download, and update all the apps with Lightfield content. Leia Loft Store has three main pages - Home, Explore, and Library. Features include app detail page, search, sorting, settings, purchase, etc. Based on these features, I listed out all the components needed in this app.

 
 
 

Leia Player

Leia Player is a photo/video editing tool on Hydrogen One Phone and Lume Pad with Andriod OS. It targets novice and expert photographers to view, edit, and manage 2D and Lightfield photos/videos. Leia Player focuses on image/video viewing, switching between 2D and Lightfield preview mode, editing image/video, and sharing image/video to social media. It also has some new features developing within editing. Based on these existing and in-developing features, I listed all the components needed in this app.

 
 
 

LeiaPix

LeiaPix is a social network for Lightfield images. It allows users to capture, discover, and share Lightfield images with a whole community of artists, friends, and family. LeiaPix is only available on Leia Loft Store on Hydrogen One phone and Lume Pad with Android OS. But LeiaPix plans to land on all the Android devices shortly with a whole new visual experience. Also, LeiaPix has three new features in development. LeiaPix has five main pages - Home, Discover, Upload, Notification, and Profile. Based on these existing and in-developing features, I listed all the components needed in this app.

 
 

Leia Technology

Leia has a proprietary Diffractive Lightfield Backlighting (DLB™) solution that can augment a conventional display and gives it almost magical properties while preserving its standard imaging capabilities. Even though it has a breathtaking naked-eye 3D effect, it still has some constraints on a visual level -

  • The screen's brightness is lower than most of the Android devices in the market.

  • White elements will be too bright when the backlight turns on.

  • Some users might feel dizzy when viewing the Lightfield content.

Branding Guideline

The visual identity is built from Leia's brand story and brought to life with 'Playing with Light.' It inspires the look and feels of all Leia's visual identity elements and how they are used in the application.

Learn from others

I researched and looked for references to see how others structure the design system.

Product Principles

Not just for the design team but also for the whole product team, what we need the most is to understand user needs and business goals, to maintain continuous innovation. The Product Principles help everyone on the team to understand, follow, and iterate together.

 
 

Design Principles

The design values of Leia Design provide designers with internal standards for evaluation, enlighten and inspire the design principles and design patterns, and then offer guidance and general solutions for specific design problems. Because of the Leia display constraints, the design team needs to keep in mind that:

  • Most of the Leia products interface should be dark to avoid using a primarily white color.

  • In addition, the font size and the icon size should be more significant than the regular size to reach the standard level of visibility.

 
 

Layout and Grid

 

It is necessary to unify the size of the design board within the organization. For Android Mobile devices, the unified design board is 360 x 640. For LUME Pad, the unified design board is 640 x 1024.

The design team uses the grid system to achieve the order of the visual system. The base unit of the grid is 8, which matches the even number of ideas and matches most mainstream display devices. In the grid system, always pay more attention o the spacing, and the spacing should follow the grid system. For example, use 4, 8, 16, 24, 32, etc.

Color Palette

 

Leia branding guideline has 12 colors, and the base color is first chosen, then overlaid with pure black and pure white to complete a full-color scheme.

Neutral color is mainly used in large part of the text interface.

Red and green are warning colors that represent success, error, failure, or reminder.

Fonts and Typesetting

 

To visually unify our design, we use the same font throughout the product and regulate the font sizes we use for different parts of a component. These font sizes are paired with corresponding line-heights to ensure a pleasing and consistent product layout.

Iconography

 

The iconography used across our products should be clear, concise, and easy to read. When drawing icons, we start with a 24 x 24 px grid. This contains an overflow border of 2px - so ensure that the icons do not go past these overflow boundaries. The stroke is 2, and the outer rounded corner is 2. The linear icon needs to have a corresponding face shape; when drawing two related icons, ensure that the icon outline and size are consistent.

Icon Set

Buttons

 

Buttons allow users to take action and make choices with a single tap. They are typically placed throughout UI, in places like Dialogs/Modal windows/Cards/Toolbars.

Text Field

 

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Text fields should stand out and indicate that users can input information. Text field states should be differentiated from one another. Text fields should make it easy to understand the requested information and address any errors.

Dialogs

 

Dialogs inform users about a task and contain critical information, require decisions, or involve multiple commissions. A dialog is a modal window that appears in front of app content to provide essential information or make a decision. Dialogs disable all app functionality when they occur, and remain on screen until confirmed, dismissed, or a required action has been taken. Dialogs are purposefully interruptive, so they should be used sparingly.

Next Step

The evolution of user system roles accompanies the growth of enterprise product capabilities. Designers should be responsible for their products and improve the discoverability of functions and values. Designers should design with the vision of development and consider the typical growth of both ends of humans and computers.