Graphic Redesign: Updating a Mortgage Payment Page

I’ve recently been thinking about how much better almost all interfaces could look if they followed the fundamentals of layout, typography, and color. Some apps and websites are usable, but fall victim to basic mistakes made by the designer, developer, or implementer. My goal with this series is to demonstrate how following even the most basic rules of graphic design can lead to better products.

Disclaimer: this is an unsolicited redesign. I do not have the business context, customer feedback, or technical requirements necessary to propose an actual redesign, and so I’m sticking to the visuals only. As with all designs, everything proposed here would need to be tested and reviewed before implementation.

Here’s a preview of the changes I’ll make along the way:

Let’s set some ground rules

The purpose of this Graphic Redesign is to show how much an interface can be improved by following the fundamentals of layout, color, and typography. Here are some constraints I’m putting on myself:

1. The subject must be a real website or application.
2. No new elements can be added to the interface. Only existing elements can be adjusted and reused (So no fancy illustrations, photography, or data vis to distract from the content).
3. When possible, use existing fonts and color palettes.
4. Photography and imagery can be changed as long as they contain the same general subject matter as the original.
5. The general structure and Information Architecture of the design should remain as close to the original as possible.

Here we go!

The Original Design

This is a screenshot of the web interface I use to manage my mortgage payments. I changed some of the private information, but you get the idea. You may notice a few things off the bat:

• Constrained layout: The layout of this page feels like it was built to fit on a monitor from 2005 (probably because it was). It’s highly likely that the credit union is using a third-party system with their logo slapped on it, and that system is being framed into their own website. While the header has a fixed width (and is strangely spaced from the top of the page), the footer is full width and actually covering up valuable information. Both feel like an afterthought. There are some easy opportunities here to help this page feel more modern by more thoughtfully using the space within the viewport.
• Sterile typography: The information I need is shouting at me in all caps without much visual hierarchy to help me distinguish and find what I need (except for the blue headers). The dual column layout here can be tough to track due to space between the items and a tight line-height. Bringing this closer together with some extra space should make them easier to read.
• Dated color palette: While color plays a huge role in usability and emotional response to an interface, much of it also has to do with trends and preference. The only real colors we’re using here are blue, black, and gray. Blue has obviously been highlighted as the brand color, but switches from an interactive color (sidebar) to a establishing hierarchy (blue headers).

Let’s break this down piece by piece.

The Page Header

](/img/graphic-redesign-updating-a-mortgage-payment-page/uccu-comparison-1.png)

1. I removed the unused whitespace here to shrink the height of the header and give more attention to the main content on the page.
2. I centered the logo and the menu on the right within the header so they feel more balanced. The top alignment being used here looked like a mistake to me. When elements share the same container, they usually feel the most balanced when they share the same alignment (frequently middle alignment for horizontal containers, and left-alignment for vertical containers).
3. The menu on the right side seems to play a crucial role in the user identify if they’re viewing right loan. To help it feel more like a title, and to visually balance it with the logo, I bumped up the weight and size of the menu. I also removed the go button to save a step here, since selected the wrong item in the menu is only as painful as clicking the “back” button.
4. I also made the header span the entire width of the page. Not every page has to do this, but it helps the page feel more modern by giving the appearance that it was constructed specifically to fit within your browser viewport; not as an afterthought.

Let’s take a look at the new header!

Feeling better already! (Also, don’t tell anyone, but I removed the footer entirely because it didn’t seem to be doing anything. Like, at all.)

The Sidebar

This sidebar isn’t so bad, but it does struggle to do some of it’s most basic functions: tell me where I am, and help me navigate the information hierarchy.

1. I’m on the “General Information” page, but nothing on the page tells me that. I pulled the green color out of the logo to differentiate this page as an accent color.
2. Sub pages here (represented by a slight indentation and smaller font size) can be difficult to interpret at a glance. I added a lighter color to help with that differentiation, but kept the indentation to assist users with limited eyesight or color blindness who may not be abel to tell the difference.
3. The hard white borders separating each item actually distracted me from reading the text, so I subdued them to use a darker color instead. This allows the text to have more visual prominence.
4. The “Help” and “Log Off” items here feel different than the rest of the items on the list, so I separated them from the main group. While most items deal with my mortgage, these actually take me away from my mortgage information.
5. Once again, I’m leveraging the full height of the screen the make this sidebar span the entire viewport. This also serves to make the layout feel more modern, though I would want to test this with users before moving too far (because it takes the navigation farther away from the content, and also moves “Help” and “Log Off” much farther down the page).

Let’s check back in:

The Mortgage Details

Finally, we arrive at the meat of the page. This is the content the user came to see, so it should be front and center. It should be easy to scan and even easier to read. Let’s jump in.

1. That red error is actually referring to the item at the very top, so I moved it up where it belongs. Here we have to be careful with color because red can sometimes mean “bad” or “error” in an interface, but here it’s just extra information about the principal balance. I softened the color considerably. If I allowed myself to add more content to the web page, I would probably include a “Learn More” link to a help center page in case the user doesn’t understand what “payoff amount” means.
2. The most unfortunate thing about this content is the two column layout. The generous spacing actually causes it to appear as two separate and possibly unrelated pieces of information (See Gestalt Proximity), while the exact opposite is true. It’s somewhat difficult for me to read from the left the right without losing my place, so I’m opting for a one column layout. This will take more vertical space, but I’m willing to prioritize legibility over spacial efficiency (obviously this is the kind of thing that would be great to test with users).
3. I removed the thick blue header and replaced it with floating text. This is mostly just my preference as I think the headers create unnecessary visual noise, but it’s unlikely to impact legibility or usability very much.
4. Larger type anchors me to the most important information in this section. For purely information pages like this, I prefer to give the users a place to look first.
5. I made all the text lowercase. Lowercase is usually easier to read and scan (because of the variation in ascenders and descenders) and also avoids the issue of words appearing to be acronyms or vice versa. I also chose to bold the data itself instead of the label, pulling the more important information into the foreground a little more.

Final Design

Lastly, I added a page header to further strengthen the navigational elements, and turned the first section (Loan Summary) into a floating section along the top rather than another white box. I also changed the text from straight black (#000) to dark gray (#333) as I tend to find black looks somewhat harsh and dated.

What do you think?

---

If I was moving beyond visual design fundamentals, I would reorder most of the information on this page and hide some of it by default (with a “show more” button) but I’m choosing to stop here to show what a difference basic graphic design can make.

The best part about all of these changes that they could all be accomplished with CSS alone. Not every interface needs to be completely torn down and built back up to be successful. I’m also not using expensive typefaces or complicated color palettes (I’m only using Arial!). Are there other improvements to be made here beyond basic graphic design? Of course! But now we can start from a modern, legible foundation.