Outside the Box()

Lessons in UX

I rarely talk about my work projects on my blog, but we’ve finally completed a project which is worthy of showing off. I’m the application manager for Nationstar Mortgage’s Loan Origination System (LOS). I have a small team of great Java developers working for me. Our system has both an internal and external facing component, so I’ve got two sets of users to please.

Around last October, we noticed a downward decline in the satisfaction rating of our external facing site. The marketing department takes monthly surveys of our users and circulates the reports with the management team. Our management team decided that we needed to do something about it. We weren’t going to be able to grow external business with our existing site. Several ideas were tossed around, but I finally suggested with bring in some usability expertise to help us give the site a better user experience.

After filling them in on what Usability and User Experience (UX) were all about, and that there are people highly specialized in doing just this kind of thing, they got behind the idea. Now the trick was to find the right experts. We talked to a couple vendors, but ultimately settled on Improving Enterprises. While it helped that I’ve known their management team for about a decade, what really sold the ultimate decision makers was their expertise and vision.

We started with a two-week analysis engagement. The Improving UX guys would talk to samplings of all the users of our site. They also went through the site themselves, including the workflow. We even had them sit in on a new-hire training class for the system. The result of this engagement was an impressive set of design comps and an extensive list of recommendations to improve the usability of the system.

We then had them put a UX expert, David, on site with about half of my Java team to work on putting a new face on the external site. As is always the case, there was a lot deadline pressure, so we had to comprise where it made sense. I had a specific goal for Improving of providing the templates we would need to carry this initiative forward after the initial engagement. This meant I wanted css, stylesheets and html files covering typical page layout scenarios so that my team could apply them as needed.

The six weeks with David blasted past pretty quickly. We actually extended him for another month to come in one day a week to validate we were on the right path and get us unstuck when we ran in to scenarios we hadn’t anticipated. My team worked their butts off to hit a tight deadline, and we’re finally deploying tomorrow night.

Here’s a preview of what our external users will get to experience Thursday morning. I’ll compare the old to the new, starting with the login page:

Now normally this wouldn’t be considered too bad, but it typifies the problem with the old site not matching the corporate brand. The colors on the old site were what we affectionately referred to as the Denver Broncos colors. The new login page changes all that:

The new login page nails our brand perfectly, and the blue box demonstrates some of the work we did with improving the consistency of messaging to the users.

Here’s the landing page for old site. Users would see this page immediately after logging in:

Although it is not visible in this image, the navigation links on the left have JavaScript-driven submenus for some items that drop down on hover. None of this was very intuitive for a new user. Here’s how we changed it:

We eliminated the confusing navigation options and narrowed it down to the four primary options across the horizontal bar at the top. There is still a bit too much white space around the filtering options, but I’ll gradually tighten that up.

Here’s the old status page for a case once the user has clicked one of the links on the above landing page:

The bright yellow on the left was how pages with errors were indicated. Counterintuitively, green was also used to highlight a different category of errors. And it was still never really clear what a new user was supposed to do next. We addressed this shortcoming with the new page:

Navigation options are greatly simplified. The left navigation is for hopping to specific sections of a case. We also use icons to indicate sections which have errors. The biggest improvement is the Continue button at the bottom. A new user can literally complete the entire process by clicking that button. They are navigated through all the required pages, all the way to sending the case to our fulfillment system. The power users can still use the left navigation tree to hop to specific sections of our application. We also greatly improved the status display. The green bar at the top is always visibile when a user is working in a case, and shows the status relative to the prior and next steps on the progress bar.

So that’s the sneak peek, now for some observations and lessons learned.

1. Hire good people – I know this sounds obvious, but UX is actually a discipline, and you want people trained and experienced in it. The typical web developer is not a UX person. Good UX people have opinions on how you should improve things and are closer to artists than developers. Listen to them.
2. Don’t pay someone to tell you you suck – This is related to #1 above. We talked with one vendor who wanted to provide a very detailed analysis of the ways our website sucked. This would have been a map of where we had been, not a path to where we wanted to go. If you think your site sucks, it probably does. Don’t waste money confirming the suspicion, fix it!
3. Usability is more than lipstick – I hit on this a little above, but UX is about more than changing colors and buttons. We made fundamental changes to how a user interacts with our system with the goal of giving them a more pleasurable and intuitive experience. A good UX person should be helping you more than just creating pretty buttons and gradients. We addressed page layout, site navigation, page flow, button consistency and user messaging, in addition to applying the new theme.
4. It will take you longer than you think – Even with three developers, updating our legacy Struts/Hibernate site was a bear. We ending up taking a compromise approach for the first release. We fully redesigned the most critical pages, and then only cleaned up the look and feel on some pages. We’ll be making another pass through the system to get those pages.
5. Learn to fish – We knew we would only have our UX person for a limited amount of time. Ensure you get what you need to help carry the effort forward after they’re gone. In our case, these were the page templates (html, css, images, javascript and Photoshop files). You may even want a style guide, although those can be time consuming to create. Either way, your developers should be able to produce new pages using the theme after your UX person is long gone.
6. JavaScript is your friend – We made extensive use of JQuery and JQuery UI in redoing the site. There were some things where it was much easier to apply a style and position or wrap an element using JQuery than to make extensive changes to server side code. We ended up producing a JQuery UI theme branded with our company colors that we can now reuse for other projects.

This has been an exciting and hectic project. I want to thank my team (Deren, Kevin, Smitha and Ajay), along with the UX guys at Improving Enterprises (Travis, Dustin and David). They all did an excellent job. It was great to work on a project that can have this significant an impact for our users, and we’ll be keeping our fingers crossed that everything works as planned.

All images © 2011 Nationstar Mortgage, and may not be reused without permission