J. J. Keller

UI Designer, Corporate Marketing

Screenshot of publication library in row layout.

Webpage before redesign

The Before

This screenshot shows the Compliance Library Full Library page before the redesign. I was tasked with redesigning this page to solve several UX feedback issues such as:

  • Too much scrolling
  • No way of finding specific publications
  • Not responsive on mobile devices
Low fidelity wireframe of new page layout with blocks and notes.

Wireframes and Prototypes

Based upon the UX results and product line specialist, I researched existing product line and industry standard design systems for this type of layout. Ideations of wireframes helped narrow down the best way to address user concerns, such as:

  • Reduce scrolling by switching from rows to columns allowing more results
  • Add filtering options allowing users to narrow down results
  • Design the page mobile first and expand for desktop users
Notes on required fields

Product Card Notes

Required fields arranged in designed layout

Product Card Design

Required fields final design showing image and description

Product Card Prototype

New page design showing products arranged in a column grid gallery layout.

The Result

After providing a design document to the CMS developers, I worked alongside them to ensure design accuracy, branding consistency, and page performance. The final result, seen in the screenshot, was well received by both customers and management. The library page analytics also trended upward in retention and lower bounce rate.

View larger image

Challenges

  • Product descriptions are inconsistent in description length
  • Some filter options apply to multiple industries
  • Users would like to search for specific keywords

Solutions

  • The cards were designed for equal heights to maintain the layout
  • Added industry tags and sorting options
  • Developers were unable to implement a search feature