Role: senior UX/UI designer

UI kit components created for Roostify Atomic design system in Figma.

Context
​​​​​​​When I began as part of the original design team Roostify, the then-still somewhat young digital lending platform software company had about fifty people and was gaining traction with larger lending customers. However, due to a less-than ideal user interface and overall user experience, they were also losing some contracts to a slick-looking competitor. Additionally, their biggest customer was also their most costly in term of resources, due to a highly-customized branch separated from the core product that required hours of continued maintenance. 
My task was to lead the design of the product's first design system, and come up with a product user interface that more accurately reflected the brand's attributes, and could be efficiently implemented and maintained by the front end development team.

Above: Legacy borrower collaboration portal screen.

Problem Statement
Create an original UI design system for Roostify’s digital mortgage application software, with a focus on the borrower. 
Process
Working closely with the Product Manager, contract designer, and an advisory team from Chase, we refined the product’s defined attributes, chose a direction for the visual look and feel based on a series of "style tiles" that represented the main attributes we thought the product should express (welcoming, prepared, trustworthy & collaborative). We planned the creation of a UI design system in phases (including some UX improvements to the navigation and mobile experience), and worked to ensure it met accessibility requirements.

"Trustworthy" style tile.

Below: Experimental "Trustworthy" style applied to loan officer and borrower screens.
Below: Sample of elements in final design system.
Design Principles
The design principles we established for Roostify:
Simplify configurability
Enable trust with consistency
Guide with contextual info
Anticipate and empathize
Be accessible with a human touch
Results
The Roostify Atomic Design System successfully met it’s purpose to create a unified, accessible and consistent user experience, create cost effectiveness through a modular system, and to extend creative direction for future enhancements, all within a white-labeled interface our customers were able to brand. It also achieved the necessary level of required accessibility guidelines, and discussions with prospective customers were able to move forward. The new design system also satisfied the requirements of Chase, who migrated to our core product release after sunsetting the costly separate branch they had previously relied on.
Below: Final core style as shown on borrower desktop and mobile screens.
Back to Top