UI Design, Front-End Development

Lockton is a UI refresh fresh of a website portal where employees can read and update their insurance benefits. The goal of this project was to keep all of the existing content, apply an updated design, and make it responsive.

Approaching a Refresh

Updating the design of a UI can be challenging. Sometimes, people have differing opinions when it comes to the subjectiveness of design, and what actually looks better. Things can quickly get out of hand, and before you know it, what started as a redesign, creeps into an endless loop of design.

For this project, it was important to clearly outline goals from the very beginning. After collaborating with the stakeholders, we all agreed on goals for the UI update. The scope of the redesign would be to keep all of the existing content, but update the look and feel, and also make it responsive.

A glance at the previous design.

Working Efficiently

Since all the content was going to be the same, the next step was to plan some of the front-end design. I did some quick sketches to structure hierarchy with new layouts, outline content, and ideate how the layouts would work responsively.

For this project, I opted to skip the high fidelity mockup phase. A lot of the value that would come from this update would happen by following a system and applying modern web styles. After documenting the existing interface and sketching basic layouts, I dived right into building the front-end.

Sketches of how I might approach the front-end layouts.

npm scripts to serve, watch and build a small project.

Front-End Design

Designing in the front-end is not a typical approach. However, in this position, I was both the designer and the developer. Being able to visualize high fidelity versions of simple sketches allowed me to work quickly through this project without having to iterate only with mockups.

My Front-End Design Process:

  • Roughly sketch layout ideas and hierarchy
  • Scaffold the front-end without any custom styles
  • Use utility classes for typography, spacing and layout
  • Write in responsive classes
  • Iterate and polish visual design

Simple, clean, responsive typography.

Smooth Shipping

Overall, the project was a success. The stakeholders loved the design and took my templates to use them on their website. One thought I couldn’t help shake was how would we know if this redesign was effective? Without proper user testing from the original to the new design, it would be hard to know if this work was helpful.

Since the entire front-end was to be re-built, we could have easily implemented some easy usability fixes if we had discovered them. Going forward, I hope to implement user testing before and after a redesign, instead of focusing only on aesthetics.

The updated welcome page.