Unsafe Parking

Untitled

For the launch of our first mobile app, there was no design system in place. We were building everything from the ground up, and there was no established standards or shared patterns. When we first launched our driver app in 2021, this lack of a unified design system quickly became apparent. Without a cohesive framework to guide us, the Lytx experience became fragmented and lacked cohesion.

## Objectives

Our immediate focus was on establishing a unified foundation through the development of a comprehensive style and component library. This endeavor aimed to achieve three key objectives:

* **Establish a Single Source of Truth:** Create a centralized repository of design specifications to foster clarity and productivity for both designers and developers.

* **Drive Cross-Product Consistency:** Ensure a unified, high-quality user experience across all Lytx products.

* **Enhance Efficiency:** Empower designers and developers with a library of pre-built components, streamlining their workflows and reducing development time.

## Design Process

The process for this project involved researching existing design systems, taking inventory of our existing components, defining new styles and components, and integrating the new design system into our existing designs. As part of this effort, there were a few key requirements.

* **Light and Dark Themes:** Define color styles for both light and dark themes to accommodate user engagement during different times of day.

* **Responsive Components:** Ensure that components adapt seamlessly to the wide range of devices used by drivers.

* **Lean Design System:** Given our limited time and resources, prioritize a lean design system that enables rapid value creation and resource optimization.

## Colors

The color palette of the Lytx design system was carefully crafted to align with our core web product, ensuring a cohesive experience across our entire ecosystem. We mapped out light and dark color schemes to guarantee a seamless transition between the two modes. To streamline the design process for both modes, we utilized the Appearance plugin.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F3a8a9062-9ae6-44a6-92bf-36892ca733a1.png?alt=media&token=459dfbe8-55d2-42de-b816-4aee1a7187cb","id":"3a8a9062-9ae6-44a6-92bf-36892ca733a1","width":1460,"height":2562,"filename":"Driver App - Colors - Light.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F1e485dd7-856d-468f-b6fa-eba8d13bccf1.png?alt=media&token=dfeb6e5e-0a76-4fe1-a915-8c2f6b35eacf","id":"1e485dd7-856d-468f-b6fa-eba8d13bccf1","width":2920,"height":5124,"filename":"Driver App - Colors - Dark.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F8dbb4313-a440-48a8-a17a-2f9c60e0ce12.png?alt=media&token=9ca4bf45-fbcd-4684-ae67-aecf407a74dd","id":"8dbb4313-a440-48a8-a17a-2f9c60e0ce12","width":2920,"height":5124,"filename":"Driver App - Colors - Constants.png","type":"image/png","caption":"","border":false}]}
```

## Typography

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2Ff155c5ac-cf84-45a9-850d-710e7d826472.jpg?alt=media&token=e9473e1a-7f7d-4e07-af29-8ba9607a5c26","id":"f155c5ac-cf84-45a9-850d-710e7d826472","width":1700,"height":1061,"filename":"Text Styles.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## Component Library

The component library serves as a repository of reusable UI elements that empower our designers and developers to create consistent and high-quality experiences. We leveraged Figma's variant feature to efficiently manage component variations and auto-layout to ensure responsiveness across different devices.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2Fd9624cb4-e2d6-4b28-8ee9-78276af5cb71.jpg?alt=media&token=eb6467d9-0506-49af-a4bd-403e7eef27ff","id":"d9624cb4-e2d6-4b28-8ee9-78276af5cb71","width":3589,"height":2221,"filename":"Driver App Design System.jpg","type":"image/jpeg","caption":"Dark/light components","border":false}]}
```

## Data Visuals

Data visualization components were thoughtfully designed to effectively communicate complex information in an intuitive and visually appealing manner. These components catered to a variety of data types and scenarios, enhancing the overall user experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2Fa7102934-43a2-4e01-a640-d6e736daccce.png?alt=media&token=ab95994f-c1a8-4467-b06f-1eae56b4744c","id":"a7102934-43a2-4e01-a640-d6e736daccce","width":2830,"height":4276,"filename":"lytx-ds-data-visuals-dark.png","type":"image/png","caption":"Created by Yuxuan Li, Visual Designer","border":false}]}
```

## New Screens

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2Fec36164f-2829-4ef9-945f-185a5e24966f.png?alt=media&token=9b4de3c5-e9cd-4ec4-bdc1-d0c3709acd88","id":"ec36164f-2829-4ef9-945f-185a5e24966f","width":905,"height":1764,"filename":"iPhone chrome-2.png","type":"image/png","caption":"Pre-login screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F9e5d8d49-4525-414e-a442-da6307517fa5.png?alt=media&token=66723536-0635-4280-9251-a7ae4fec8d59","id":"9e5d8d49-4525-414e-a442-da6307517fa5","width":905,"height":1764,"filename":"iPhone chrome.png","type":"image/png","caption":"Login screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2Fbe2b0873-4325-4dc8-9438-485adedd4d49.png?alt=media&token=5f182c2c-7de7-4cb2-8d35-676f96ac57ef","id":"be2b0873-4325-4dc8-9438-485adedd4d49","width":905,"height":1764,"filename":"iPhone chrome-5.png","type":"image/png","caption":"Home screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F751e2022-166e-4331-b4c9-b2feb8a4c06b.png?alt=media&token=dfdec25b-57a8-4204-8383-d2b661a73023","id":"751e2022-166e-4331-b4c9-b2feb8a4c06b","width":905,"height":1764,"filename":"iPhone chrome-4.png","type":"image/png","caption":"Safety activity feed screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F89a0e6d4-0337-435a-8d4c-7b2c6847b425.png?alt=media&token=e17ab73e-5c8d-4d00-9fab-3a5e10d85b16","id":"89a0e6d4-0337-435a-8d4c-7b2c6847b425","width":905,"height":1764,"filename":"iPhone chrome-3.png","type":"image/png","caption":"DVIR history screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F5fc0cf53-98c4-49a1-bcd8-a5bf3e94e16b.png?alt=media&token=ded52175-fcb3-49f2-84b7-6c22498ade75","id":"5fc0cf53-98c4-49a1-bcd8-a5bf3e94e16b","width":905,"height":1764,"filename":"iPhone chrome-6.png","type":"image/png","caption":"New DVIR screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FgDgif9MEhegYU6ToO6DWAkpvEVG2%2FskBeOAaFa4l5SC5S7xVZ%2F4baed309-5417-4676-9f32-abba77874c5c.png?alt=media&token=5f781157-e614-46cd-8ea0-5ce0d2ae92c5","id":"4baed309-5417-4676-9f32-abba77874c5c","width":905,"height":1764,"filename":"iPhone chrome-1.png","type":"image/png","caption":"Help screen","border":false}]}
```

## Next Steps

Our investment in a new design system has already yielded significant benefits. Our team's velocity has increased, and we're shipping high-quality, visually consistent features. While we have established a solid foundation, our journey is far from over. We are committed to continuous improvement and have identified several key areas for further development:

* **Component Library Expansion:** We will continuously expand our component library as our product evolves, ensuring it remains comprehensive and up-to-date.

* **Documentation and Guidelines:** We will meticulously document guidelines and best practices for each component to ensure clarity, consistency, and adherence to accessibility standards.

* **Storybook Integration:** We will implement Storybook to streamline UI development, testing, and sharing of components, further enhancing our design system's efficiency and effectiveness.

## Reflection

* **Treat as a Project:** Approach your design system as a dedicated project, conducting thorough research, iterating on designs, and collaborating with engineers and stakeholders.

* **Creative Freedom:** Your design system should not stifle creativity or limit your design choices. Instead, it should serve as a flexible framework that empowers you to create innovative and user-centric experiences.

* **Atomic Design:** Build components from the ground up, starting with atoms and assembling them to construct more complex components. This approach ensures consistency and scalability.

Driver App Design System

Product Designer

DVIR App

BIN Utilization

Sales Enablement

Mobile Design System

Designed and launched a cross-platform mobile solution for DVIR compliance within the Lytx Driver App that led to 2500+ vehicle subscriptions.

Designed new driver safety experiences, including reporting, advanced mapping, and video-based features that reduced incidents and improved fleet safety metrics.

Co-created a mobile design system for the Lytx Driver App, establishing a unified set of components and guidelines to improve consistency and increase engineering efficiency.

Product Deisgner

Lead a key design initiative for Marqeta’s flagship embedded finance solution, delivering 8+ card management features that enabled customer migrations and acquisitions immediately following launch.

Built a multi-brand design system used by 9 designers, supporting multiple teams across our embedded finance product. Own the Figma component library ecosystem with a focus on theming capabilities, WCAG accessibility compliance, and scalability.

Design and launch new features for the Marqeta Dashboard to streamline operational workflows for program managers, leading all phases of design including user interviews, process mapping, user flows, wireframes, and usability testing.

Led redesign of a global field work order management system, improving workflow efficiency and modernizing the visual language. Conducted contextual interviews, created process maps, and led usability testing.

Supported design of the Solar Intranet using a data-driven approach. Provided heuristic evaluations, prototyping, usability testing, navigation design, and dashboard design.

Optimized the Solar Turbines career page for SEO and information architecture, resulting in a 15% increase in user traffic.

UX Designer

Solely led all phases of design for a legal software that simplifies case management and docketing for law firms

Paris Do

2023