ALTR Design System
ALTR is the first no-code, cloud-native platform that simplifies control over users data. I was brought on board to implement the product lead growth model and better enable our users within the product.
I expanded UX guidelines by developing a UX asset library and standards as well as designing and launching new features.
Company: ALTR
Role: Lead UX Design
Product: ALTR
Deliverables: UX asset library and design system
As the initial Lead UX Designer, I had the responsibility to stand up the working design system and style guide. While there were scattered designs from previous designers, none were held together with a larger design system or component library. The backbone of the product was built with Material UI and a lot of hard coded workarounds that splintered the original material design library into variants within the product.
Moving forward with the creation of the design system helped me quickly visualize what branding changes we could make to a components to ensure that our product had an enterprise look and feel.
One of the very first issues I found with the existing styles was the use of a brand color green that conflicted with clear messaging around when something was correctly configured, operating as assumed, or successfully imported. This miscommunication in the color pallet was one of the initially proposed changes for the team to implement.
Color issues found throughout the product also affected readability, accessibility, and functionality in general.
The secondary issue that was found in the product audit was the miss matching fonts. I found three fonts in use in the product plus an extra unrelated font in use on the website.
In order to standardize our system and bring consistency across both the product and our marketing communication I implemented the use of Mukta in the product and recommended the update of the marketing website and materials also use the same font and color base.
Now that the basics of font and color were decided I could work back through the product and develop the design system from the smallest items through to the larger components, templates, and features.
Building the component library up from the smallest items ensures that the product as a whole has a consistent and reliable brand. The original icons used in the library were varied in both size, weight, and scale. They clearly were pulled from multiple sources and didn't have a standard makeup.
The inconsistency added to the disjointed look and feel of the product. By updating to an icon library that had multiple weights and had the ability to be used at both large and small scales helped us bring the ALTR brand into focus.
Rebuilding the files from scratch allowed me to realize the repetitive issues with the current style sheets. This helped me begin updating the components to better serve the product mission. Standardizing components using atomic design methodologies and cleaning up accessibility issues became the initial step of the redesign process.
While the navigation is still in the process of being paired down, adding in the icons helped users have better recall for where the pages they were looking for resided.
I also implemented the consist use of our brand color as both the calls to action and a way to call attention to specific high value items on the page is a pulled back version of what the ALTR product previously had in place. The old brand color green also had multiple variants and convoluted its usefulness in the product drawing users attention away from the main focus of the features.
