ATLAS DESIGN SYSTEM

The LoansPQ redesign project was an opportunity to update the look & feel and standardize the visual language. Considering project scope and timeline, there was also a need to maximize deliverable handoff and development efficiency. A design system provides the necessary guidance to assure visual, behavior, and usage consistency.

VIEW STYLE GUIDE VIEW BEST PRACTICES PRESENTATION VIEW REPORT VIEW PRESENTATION

Role: Product & UX Designer

Methods & tools

Competitive analysis
Content audit
Accessibility audit
Stakeholder interviews

Project duration: December 2017 - March 2018

Deliverables

Design specifications
Guideline pages

Goals

Business goals:

Enhance user confidence in using the product
Increase trustworthiness of the system
Align the product with company branding

Project goals:

Speed up design process and reduce development efforts
Eliminate inconsistencies in the product
Reduce design debt over time

An Underwriter’s user scenario and journey map when decisioning an application.

A user scenario for a Funder and their journey map during application funding.

Process

Competitive analysis - Since this was our first time creating a design system, we looked for guidance from existing systems. What components did they have? How can they be applied to LPQ?
Content audit - We completed an audit of the components used in the existing system to understand functionality needs.
Test the waters - Following standard guidelines, we began designing. The team met every morning to showcase designs, get feedback, and iterate.
Establish standards - In addition to visuals, behavior and usage needed to be defined and standardized in order for the design system to serve its purpose. e.g. focus & error states and min width & height, etc.
Piece everything together - After finalizing the specifications, it was time to build the design system within the company intranet.

‍

The error state is immediately triggered when a required field is empty.

The loan officer and applicant can directly communicate using the Messages feature within the system.

Microanimations provide instant feedback and display changes more clearly.

Toast notifications inform the user about the system's status.

A view of the loan officer's collections dashboard.

The error state is immediately triggered when a required field is empty.

The loan officer and applicant can directly communicate using the Messages feature within the system.

Microanimations provide instant feedback and display changes more clearly.

Toast notifications inform the user about the system's status.

The error state is immediately triggered when a required field is empty.

The loan officer and applicant can directly communicate using the Messages feature within the system.

Microanimations provide instant feedback and display changes more clearly.

Toast notifications inform the user about the system's status.

Challenges

Design trade-offs - Technical constraints can prevent the intended behavior from being implemented. Discussions with the Development team occurred regularly to explore trade-offs and compromises that will mitigate its effects. ‍
Micro-animations - The initial component design was only focused on the static aspects like visual specs and behavior. Animations were an afterthought but sometimes they are what bring the component to life.‍
Reusability - Components and guidelines need to be carefully considered to be reusable before being added to the design system. Otherwise, the design system will become bloated and unusable.

Learnings

Maintenance - Design systems are a product in it of itself. Like a product, they need to be maintained and enhanced to remain useful.
Guidance, not instruction - Guidelines and specifications outlined in a design system is meant to guide designs, not constrain them.
Side effects - A solution for one problem may create problems somewhere else. Component enhancements need to be thoroughly researched to ensure there aren’t any unintended side effects.

BACK TO PROJECTS