Our team was tasked with designing custom applications to streamline and accelerate the multiple processes required within the creation a mortgage. Since Product Design wasn't fully established within the organization, there was no clear UX or visual foundation for new projects. To bridge this gap, I took the initiative to design and develop a front-end framework, providing the team with a solid baseline to build upon.
Create a good baseline foundation for backend focused engineers to quickly, and efficiently spin up custom applications for internal business partners.
Discover, define and deliver a scalable baseline for a wider cross-platform design system with UX best practices and design a11y baked in.
Design: Mark Hobbs
Engineering: .NET Team
Given the team's foundational skill sets, this project was an excellent opportunity to share the underlying principles behind our approach. Rooted in Atomic Design principles and the 8px grid system, Fabrication was born. Internally, we affectionately called it Lebowski. Because, much like The Dude, the system abides to platform and user choices.
Breaking down the why behind the baseline standards and principles of Atomic Design.
The basic Foundations of UI are provided as well as the atomic structure of web page elements.
Color scales were introduced so that no matter the application, any visual will feel as though it is part of te application's close family. Based on the primary and secondary brand colors, a tertiary that worked with both was also introduced. This helped create consistency as well, so that no matter the application in use there is familiarity.
Each parent color was broken into lighter and darker shades, 100-900 with 500 being the primary, via automation. This helps to ensure consistent visuals across the platform./p>
Each color was checked via automation in the markdown file to ensure WCAG 2.0 contrast ratios of 4.5:1 for both black and text. compliance.
Typography plays a crucial role in both defining the hierarchy of information, guiding users seamlessly through content and maintaining visual harmony. Considering these fundamentals, we had to keep in mind it's sole use case is internal, information-rich applications.
Breaking down the why behind the baseline standards and principles of Atomic Design.
The basic Foundations of UI are provided as well as the atomic structure of web page elements.
Increased productivity and time to release were cut nearly in half after implementation. The largest problem was legacy applications which was solved by versioning of the new system. The new styles included new naming conventions and therefore was a major breaking change. Remaining applications would be prioritized by the business.
A novel application for managing, utilizing, storing, and sharing Personally identifiable Information when you need it most and at your fingertips.
Being a homeowner is a job in and of itself. Rümi is here to make home ownership a little bit easier.
A collection of various editorial package identities that take complex ideas and distill them into simplicity through the use of easily understandable visuals.
Imaging USA is the first major photographic convention & expo of the year and is put on by Professional Photographers of America. A campaign to grow membership and expo attendance.
This piece that compares the two iconic comic book franchises and their cinematic universes to determine who does it best.
Various data visualizations for CNET magazine, editorial and online implementations.