While working with the company to prepare for their website refresh, one of my duties was to go through each service and update page layouts to be more efficient and raise retention rates.
Each service page has a Resource Center at the bottom that links to one of four possible resources:
The Centers were long, especially for popular services that had more resources. Each section repeated the main icon with the occasional minor variation, but otherwise no new information was in the large icons. I decided to work on a way to present the same information while making larger amounts of content accessible to people new to the website.
For the category icons, I removed the subtitle, as it was repeated at the top of each category section, and reiterated in the resource descriptions. I used the initial document shape as the basis for each icon, and used thicker lines for easier readability and scaling.
The colors for each type were from the color palette of the overall site, and were used elsewhere, so they would be kept the same. My goal would also be to keep the spirit of the outdated icons to prevent confusion from repeat customers.
For the layout itself, the main two formats were between a horizontal or vertical format. The horizontal layout was based on creating a carousel that can be clicked through for additional resources. It would maintain a more similar format to the existing center with a title and then individual listings, except only a single row would be shown. The vertical format was based on a single icon, title, and then a list of different resources, without repeating the icon.
We went forward to a high fidelity mockup of the vertical layout, as it was the most efficient with space and the least visually repetitive.