Building in progress

EXOS Mobile Design System

An ongoing effort to define the interaction standards, design patterns, and guidelines for corporate mobile products.

 
 
 
 

Corporate Project at ServiceLink, LLC

2021.3 - present

 

The Problems and Goals

Create a streamlined mobile UI design process

A fundamental struggle that has been plaguing EXOS is the disjunction of its product and lack of a cohesive system. Due to the organization and its growth, teams have been historically working in silos, with each team creating their own UI, logic, and UX patterns with little consensus and guidance holistically.

The design system’s goal is to unify and create the design and interaction language for the use of the entire organization. The mobile design system is where those UX mobile patterns, rules, interaction models, components, and signals are housed.

*This is an introduction to EXOS mobile design system. I have intentionally hidden sensitive information.

*This is not a finalized product.

 
 
Landing - Empowering and Engaging (Default) – Hover and Active States.png

High level process

Compoents and Patterns Creation Process

 

For Mobile Design System, I created a high-level process about the procedure of identifying Components/Patterns from existing products. It for the shared understanding of the UX team and who/when to cooperate during the process.

My Role in Building the EXOS Design System

Apple Devices Mockup.jpg
 

 As a product designer and an active contributor to the system, I provide user experience aid to other teams and also lead, create, and maintain standards for the mobile design system library. My responsibilities range from being one of four core designers responsible for creating UX patterns, guidelines, and standards for EXOS mobile design system library, being embedded in initiatives as a strategic and concept resource, communicating with Tech lead and Dev to figure out best practices, and creating strategy and toolsets for domain teams to adopt and rebuild EXOS with a new brand expression.

 

Collabrative Effort

Work with Design System Guild

A “Design System Guild“ is a group of designers dedicated to the Design System, one fundamental role of the Design System Guild is to create, validate, and maintain EXOS Design System Library. I joined and start to work with Senior Designers / Front-end UI developers from the guild and drive the development of the Mobile Design System. During the process, I connected Guild and Mobile Dev team to meet together on weekly basis to understand each other’s vision and discuss/review ideas.

Group 191.png
Group 192.png
 

* * *

Current progress

Building MVP and Prioritize Features for Future Releases

The Mobile Design System got buy-in from CTO and Senior Enterprise Architects. The goal is to create a mobile design system that truly help speed up Mobile Dev team’s implementation efficiency.

 

Planning Mobile Design System MVP and Roadmap

I worked with the guild to list out all the potential features, and prioritize them for MVP.

Screen Shot 2021-03-30 at 9.05 1.png
 

 

Mockup - Aiming for MVP

Here are some examples of the current Design System page mock. Please notice that due to the nature of the design system, things can change fast and require constant adjustment, so the following mockups are not a finalized versions.

 

Foundation -> Typography

Foundation - Typography - Mobile - iOS.png
Foundation - Typography - Mobile – Android.png
 

Foundation -> Colors

Colors - iOS 3.png
Colors - iOS 4.png
Colors - Android.png
 

Components -> Buttons

Components - Buttons - iOS.png
Components - Buttons - Android.png
 

Components -> Cards

Components - Cards – iOS.png
Components - Cards – Android.png