Building a Solid Foundation For The Design System

Luminary is a subscription podcast network with original shows from creators like Russell Brand, Trevor Noah, and more.

Role

Contract UX Designer (January to May 2021)

Platforms

iOS, Android, Responsive Web

Overview

Luminary is a cross-platform product that is available on iOS, Android, and Web. One of the challenges for designing across platforms is to create a consistent UI and native experience for each one. 

Problem

Designing multiple platforms without an organized and structured design system would be time-consuming, but also, the efficiency, consistency, and scalability would suffer.

Solution

I took the initiative to create component libraries for iOS, Android, and responsive web breakpoints as a solid foundation for the design team. In addition, following the Apple Human Interface Guidelines, Material Design, and web best practices, worked closely with the mobile team during design hand-offs, and provided design feedback before product launching.

Challenge

I had no previous experience with Figma before I joined and this was a great opportunity to learn a new tool that's known for its seamless collaboration features. 

Atomic Design

With the atomic design approach, switching to different button states, icons, colors, and images became effortless once it's set up.

colors
grids
shadows
Screen-Shot-2020-07-17-at-4.45.59-PM

iOS design system

design-system

Web design system

Switching Elements

Create Designs in Seconds

Designers across teams are using the design systems for creating beautiful mockups.

play-store
Back to top Arrow