Rail Newsletter
Module

NEWSWELL is a nonprofit organization and part of Arizona State University Media Enterprise. I work there as a part-time UX and front-end developer, primarily on the Times of San Diego website, working in WordPress/Newspack with HTML and CSS.

On first glance, the right rail looks crowded with 11 options crammed into 2 columns and even longer all in one column. It looks weak in the hierarchy because it has no elements that make it stand out from the rest of the page. It has a white background and no border on a white page. The accent colors look bland and out of place when paired with just plain black text.

I came up with three solutions to the issues I noted. The first solution was a subtle grey border that sat at the edge of the module. This helped differentiate it from the rest of the page without turning the module into such a block, as I rounded the edges a bit. The next solution was an angled linear gradient background that I developed for another news signup module. It had no border but still a rounded edge. The third option was a structural change. It had the same gradient background as the previous composition, but I turned the checkboxes into a dropdown. The dropdown addressed the crowding problem and reduced cognitive load. I assumed that most users would realistically subscribe to one neighborhood, the one they live in.

Three visual directions were developed and presented — stroke border, gradient background, and dropdown. The gradient composition was selected as the preferred solution, as they did not have the data to back up the dropdown decision yet. Implementation on the live site is pending.