Role: senior UX/UI designer
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 their white-labeled web platform'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
How might improving the borrower's experience with a new design system also improve user accessibility, increase competitiveness and retain more customers ?
Working collectively with the Product Manager, contract designer, and an advisory team from Chase, I refined the product’s defined attributes, chose a feedback-driven 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). I looked to product design industry leaders* for guidance, and planned the creation of the UI design system in phases (including some UX improvements to the navigation and mobile experience), and worked to ensure it met accessibility requirements.
Above: "Trustworthy" style tile.
Below: Experimental "Trustworthy" style applied to borrower and loan officer screens.
"Trustworthy" style applied to borrower archetype activity screen.
"Trustworthy" style applied to lender archetype pipeline screen.
Sample of elements in final design system.
Process
We began by addressing the app's responsiveness as it was not user-friendly in mobile view, and enabled our front end team to tackle the UX items with the heaviest lift first. Foundations came next: typography, color, iconography, buttons. We also determined what would be customizable by clients, and produced configurability guides to let them know what areas they could add their logo, change background colors, link and button colors, for instance.
After this, we upgraded existing page-level components and patterns such as navigation menus, chat messaging, alerts & modals. We reviewed many utilitarian patterns such as usage of form controls, and ensured they were consistent with expected user patterns.
I also established the design principles for building out new components such as date pickers, mobile navigation menus, and of course produced style guides for our designers and developers. Final specifications were ported from Sketch to Zeplin, and later we migrated the entire design UI kit into Figma to improve efficiency with sharing out to developers
Accessibility was also a big part of the design system build, as the product was consumed by mortgage originators and lenders and needed to satisfy financial regulations. We consulted the Web Consortium Accessibility Guide (WCAG) and their tools to ensure contrast ratios were sufficient, and successfully passed accessibility audits by third parties.
Design Principles
The design principles I established for the design system were:
● Simplify configurability
● Enable trust with consistency
● Guide with contextual info
● Anticipate and empathize
● Be accessible with a human touch
● Enable trust with consistency
● Guide with contextual info
● Anticipate and empathize
● Be accessible with a human touch
These were an especially helpful aid for empowering individual decision-making, something that was instrumental to moving the process along amongst a team of 2 designers working on 2 separate parts of the platform (borrower side, and lender side).
Example Style Guides
Page from an iconography guide describing activity icons and their meaning.
Page from an iconography guide describing utility button icons and their meaning.
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.
Final core style as shown on borrower desktop and mobile screens.