top of page
Siddhant%2520Profile%2520Picture_edited_

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

Project Overview

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. 

Background

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. 

Strategy

Managing the Design Systems Project using Trello

Trello Process.png

Process

Process

Brainstorming

Brainstorming.jpg

Whiteboarding

Whiteboarding_Wizard.jpg
WhiteBoard_In-line Editing.jpg
WhiteBoarding_Date&TimePicker.jpg

Wireframes & Iterations

Wireframe Wizard 1.png
Wireframe Wizard 2.png
Wireframe Wizard 3.png

Guidelines for Designer and Developers

rule steps.png
dosdonts wizard.png

Hi-Fi Wizard Component Flow

Hi-fidelity Demo

Impact

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

bottom of page