Homepage Checkbox
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.

The solid background color gives the module heavy visual weight, making it dominate the page before the user has context for what it is. It also clashes with the orange accent color used throughout the module. The title is visually indistinct from the rest of the content — size alone isn't enough to establish hierarchy. It has 11 checkbox entries and the list created awkward layouts across screen sizes. The last word of the description paragraph widowed on most breakpoints.

To solve these issues, I first applied the gradient background I developed in the Newsletter Pages case study. This solved two problems at once — it broke up the strong rectangle that was present before, and now the background color and accent color are more complementary. Next I experimented with the title. I implemented a short orange underline but at smaller breakpoints it looked like it was underlining the last word only, visually singling out that word instead of the title as a whole. After that feedback, I tried a subtle drop shadow to give it a bit of dimension and this became the solution. After this, I improved the order of the list items as well as how the text reacts in smaller screen sizes. I noticed the sign up button could be bigger on mobile as well so I made it the same width as the email field.

The checkbox list alignment has been updated so entries line up cleanly across columns. One minor mobile refinement remains before it ships to the live site.