Overview

The 19Labs Figma design system is a collection of reusable elements and guidelines that ensures consistency and efficiency when designing and developing our wide range of digital products. Compiling a library of pre-defined styles and components ensures we can streamline both design and development processes, enhance collaboration, and maintain brand integrity. The result is more cohesive and user-friendly products.

Objective

Improve consistency: By creating a cohesive and comprehensive design system we can maintain consistency in the design and development processes. The reusable assets and components serve as resources to define the visual and functional elements of the product and interfaces and provide a common language for designers and developers.

Streamline process: Each component, asset, and style are designed to be reusable during the design process and to serve as a reference for the development team. When possible, assets contain additional necessary components so they can be exported and used as-is. This increases consistency and reduces front-end development resources.

Enhance user experience: By having a centralized reference for the design and development team we can ensure a unified visual language and user experience is used across all 19Labs platforms.

Before the design system was created there was no reference for designers or developers. Each feature was designed and developed almost from scratch, using only bits and pieces from previous work. We worked hard to change this process and the results have met and exceeded our expectations in both the design and development phases of our process. There are still many components and styles to add, and we are looking forward to building out the system as new opportunities arise.

My (general) Process and Responsibilities

UI/UX Mobile and Web App Design

Planning & Research

• Research competitors, similar features, and resources.

• Define audience and feature requirements.

• Define and outline user experience, journey, and workflows.

Design

• Wireframe interfaces for either, or both, mobile and desktop applications.

• Create feature-complete layouts, experiences, and graphics and ensure they fit easily into the current product and workflow.

• Ensure designs are accessible and responsive for different screen sizes and devices.

• Create feature prototypes to represent actual functionality.

• Present design documents, prototypes, and feature requirements to management and developers throughout the process.

Development & Release

• Update the design system with necessary assets and components.

• Work closely with the development team for a seamless transition between design and implementation.

• Create feature release documentation and test cases to outline requirements and ensure they have been met.

• Complete in-depth testing to ensure feature functionality and design specifications have been met.

Training, Marketing, and Documentation

• Create comprehensive training documents and videos for implemented features.

• Write and assemble marketing materials to describe to customers, stakeholders, and the public new or updated features.

• Create custom content, assets, and layouts for product documentation and marketing.

• Work with the marketing team to ensure the accuracy and completeness of product and feature releases to the public.

• Create trade show packages including product documentation, business cards, banners, and booth layout.