Mr. Cooper Mortgage Platform
The Problem:
Nationstar Mortgage had always struggled with technology, and when they rebranded as Mr. Cooper, elected to go all-in on a fully responsive web application to allow their borrowers to manage their mortgage.
Their branding agency had promised they had the experience to build such an large-scale app, but after 6 months with almost no viable designs produced, they found themselves at the start of their development engagement with Pivotal Labs...and no designs to develop with. A team of 8 designers struggled to get even the basics finished. That’s where I came in.
The Work:
We needed a way to keep 16 developers fed, while also producing designs for 3 different viewports *and* performing user testing. Instead of doing the old-school style of wireframes-> visual designs, we added fidelity to features over time. We kept things simple to start, and over time made them more complex. That ‘simplicity’ allowed the developers to focus on integrations first, core functionality next, enhanced functionality, all the while increasing visual fidelity with every release.
At our core, we used the foundation framework to get us a usable front-end. We started with two style guides - one to define my work-in-progress, and a living style guide where I could influence the CSS of the application. The former allowed me to napkin sketch simple components with developers - the source of truth style guide told them how a dropdown should look and behave, for example. The latter meant I could go into the codebase and directly update any components that needed polish or had only recently had their design defined. I handled most of the SASS/CSS on this project.
The Pivot:
The new Mr. Cooper brand was very opinionated, and a “brand” experience was critical to NationStar. However, about 7 months into development, they signed a major contract with USAA bank to service their mortgages. While great for the company, it meant that our branded experience needed to be white-labeled, and a major pivot needed to occur with the designs.
We defined two new style guides - a generic white-label experience, and a USAA style guide that expressed the USAA brand in the white-labeled application. This allowed NationStar to pursue other potential clients with the new experience, while still developing their Mr. Cooper, white-label, and USAA instances of the application.
The Design:
Making the design both branded and white-labeled wasn’t easy. Typography was rethought in order to allow for more space for ‘big’ characters, in the event that fonts were changed and new characters were larger. A more systematic approach was taken to color to make palettes easier to swap. Custom Illustrations made for Mr. Cooper had to be repositioned to avoid breaking the layout for the white-labeled application.
We left them with a robust, predictable, scalable front-end experience that could be easily skinned for any new clients, with a design system to match.
