Modernization

Overview

This project was a modernization and design-system creation for a government-centric application. Alongside a fantastic team, I was asked to take a product built decades in the past (before components were even a thing) and create a design system and modernized application based off of those building blocks. With that challenge, I was also tasked to bring this application up to accessibility standards for a wide variety of users.

How do we take an outdated product and bring it into the modern world from the ground up? 

My role as a Product Designer

Before changing the application, I had to understand it. This product was immense with an already large user base. To ensure we kept the product within the guidelines of requirements, I spent the first portion of the assignment working through the application manually with existing users to chart the workflows. I felt there were five things that were crucial to the succes of this product.

• Established workflows
• Information architecture
• Important behaviors
• Constraints
• Dependencies

The product had accumulated years of workflows, patterns, and exceptions. A visual refresh alone wouldn't address the underlying experience. Not only did the product not have standardized user patterns, it had so much information that the goals of the user were blurred.

What couldn't change

Early exploration focused on reducing the amount of interpretation required from users while preserving the information necessary to make decisions.

A key transformation

After understanding how and why the product should be created, I was able to create a detailed and personal design system for the product from the font sizings to the largest data tables. This product needed to be functional through mobile use, so the design system ended up being larger than most.

System evolution

After completing the design system, I was able to create repeatable "design patterns" to ensure the developers didn't need pixel by pixel mockups to continue their work. Some of these patterns included how to stack certain forms, destructive action patterns, and how to view a large data table in a mobile setting without losing context

If you would like to explore this project in full, please navigate to the password-protected case study in the call to action below.

NOTE: The trust and discretion of the clients listed are of utmost importance to my practice so there are many things I cannot share publicly through this portfolio, which is why the image provided is minimal.