SIDDHANT SHAH

Lead UX Designer

MobileIron

Web Design System 2.0

Improved usability, productivity, & deployed a cohesive experience across both platform products.

Role

Project Lead

Component UX Designer

Team

Key Contributions

6 Designer

3 Developers

Got stakeholders' buy-in

Streamlined design process

Duration

4 months

 

Background

MobileIron's two major platform products MobileIron Cloud and MobileIron Access was growing rapidly with a focus on shipping new features. Soon the customer complaints surfaced about usability issues and inconsistencies in the user experience as well as the UI components. 

 

Uncovering the actual problems

  • Remote teams working in silos

  • No dedicated team maintaining and updating UI component

  • No clear guidance on common components behavior

  • Developers writing in-line CSS

  • Designers making new components for already existing components

Strategy

I started meeting with engineering leads and came across a newly funded project that was unifying the backend services for both the platform products. I took this opportunity to pitch the idea of building a design system for the front end components. Soon we had 2 developers made available. 

 

Managing the Design Systems Project using Trello

Process

 

Brainstorming

Whiteboarding

Wireframes & Iterations

Guidelines for Designer and Developers

Hi-Fi Wizard Component Flow

 

Impact

 

Launched the MobileIron Web Design System 2.0 in the company All Hands meeting to 400+ employees.

We leveraged Invision's Design System Manager tool, reducing development efforts to maintain a website

  • With a standardized style guide, interactive components, and an easy to deploy codebase our ideation to product release turnaround time has decreased immensely.

 

  • Designers can use a component library in Sketch, using Craft, to quickly iterate on designs.
     

  • Developers can easily deploy a design that is given to them by copy/pasting from the DSM or by using defined element classes.
     

  • Product managers can explore ideas on their own and sales engineers can propose solutions to help close deals all with the DSM

 

This is a win across the board and our company is excited to use it moving forward with more designers actively contributing to the evolving components library.

Building a Wizard-based flow using symbols from Design System 2.0

Thank You

Also check out