Summary

We knew we needed to update the chrome of our application with a more modern look and feel, but also address some usability issues such as drawing attention to certain highly useful features, creating a visual hierarchy for CTAs on screens with multiple buttons, and defining a new color palette.

There were at least three of us working on this project on the design team. My part included creating these mockups displayed here while collaborating with the design lead and researcher (as well as lead dev and PO).

The Request

After user research, we determined it was time to update the styling for the interface of our primary lifecycle product. We knew we wanted the design to have a newer, updated appearance, but there was also low hanging UX fruit we knew we could address in the process.

The Goals

Create a new design with a more modern appearance. Also, address UX low hanging fruit such as defining clear call-to-action buttons on each page, visibly enhancing items that offer great value but were previously missed by customers and beginning a Pattern Library and Style Guide.

The Process

We spent a great deal of time as a team initially defining what we wanted to accomplish. We knew the application needed a makeover from a styling standpoint, having been built several years prior. But there were also opportunities to not only modernize the design but address UX issues that had built up over time.

This process included collaborating with the other members of the UX team; developers, our primary user; senior leadership, to ensure it reflected their values and desires for the design of the product; marketing, to ensure we were in sync with brand guidelines; support, who knew better than anyone about the issues and complaints surrounding the design; customer success, who knew our customers better than anyone.

We evaluated design trends for applications, researched ways to improve the styling not just from an aesthetics perspective but also ways to improve the experience of interacting with it by changing colors, fonts, and padding. We also examined competitor applications to see what they were doing that worked well and ways we could learn from that.

Next, we defined a new color palette, created a basic style guide and began creating mockups using the information we’d learned.

The Results

The examples posted in this article are just a few of the mockups I created for this feature. My goal was to go with styling that not only was clean and timeless, but also offered clarity using colors, fonts and padding to draw the right attention to the right places (and reduce attention for the less important, where applicable).

A common complaint amongst our users was that the application at times felt too busy or heavy. I wanted to lighten things up a bit by adding more whitespace, using soft colors to define borders, spacing to offer clarity in items which had a relationship, and of course ways to improve the design from an accessibility standpoint. This included testing colors to ensure they made sense for users with color blindness, identifying items with labels where possible (as opposed to just colors or icons) and increasing clickable areas within buttons and links.