Main Nav & Hero
- Emphasis: Donate CTA is turned into red button and moved to a higher-impact area (top right). It was getting lost before, and it shouldn’t be crowding the logo.
- White space: White space added to main nav, extra items moved to hamburger
- Colors: Background changed from gray to white to feel cleaner
- Typeface: Changed from Roboto to AkzidenzGrotesk because according to the Red Cross, that’s actually one of their brand fonts. I also used Georgia because it’s known as perhaps the most readable onscreen typeface.
- Logo: changed from “pin” look to flat design.
- Hero
- The original news page didn’t have a hero image. A striking image keeps a user on the page longer because it pleases the eye and stirs emotions.
- This image evokes heroism, which is something that I think the Red Cross could leverage a lot more in their brand, especially if they utilized the archetypes branding framework.
- Calling the page “impact” rather than “news” could prove problematic for SEO. It’s a copywriting suggestion that seems appropriate for the Red Cross, given how important their impact is to their brand.
Branding
I used the specific red that is indicated in the Red Cross style guide, even though it doesn’t seem to be the shade of red that they themselves are using. I also gave them secondary colors: blue and gray. These colors provide a calming, soothing balance to the urgency of red.
Emphasis
One of the most important things for a nonprofit is to communicate what it has accomplished, since this is one of the reasons that people will keep supporting them. This is why I very explicitly listed the accomplishments at the top of the page, right under the hero.
Motivating and engaging the user
- Key action: Moved the donate CTA from the buttom of the page to right below the fold.
- Copy: frame certain impact as being what the donors accomplished.
- Engage the eye: Made images larger
- White space: added more white space around article headlines
- Skeuomorphism out, flat design in: Used filled boxes instead of outlined boxes so that the page feels smoother and more cohesive, to help create a sense of calm and order.
Hierarchy yet again
We switch back again to the more city-centric content. Somerville’s current website has a news section, but by not including snippets along with the article title, they’re missing an opportunity to engage the user.
A spotlight on the wins
This is an entirely new idea that I came up with. I imagine that it would benefit Somerville if its citizens were more aware of the successes and wins going on in the city every day. This section would be for good news of all kinds, from new services to local heroes.
Article Page
Applying best practices for online reading
Category: Added the “category” (“140 Years of Service”) to imitate what large news media websites do. This gives the reader a sense of knowing where they are in the website, and also communicates organization, which communications professionalism and trustworthiness.
Header and snippet: Header font changed to Georgia, text enlarged. First line of article made into snippet to draw the reader in. Added a reading-time indicator (“11 min” in this case)—another feature that many media companies use.
Hierarchy: moved social share icons under the snippet and turned them from blue to gray. This is where other media websites place them, and they don’t need to draw so much attention by being blue.
Type readability improvements
- Body font changed from Roboto to Georgia for readability.
- H2 changed from Roboto to Akzidenz to be on brand.
- Text enlarged.
- Text column narrowed so lines of text aren’t so long.
Final CTA and user engagement
Donate CTA: added this; original page didn’t have it at the end of the page. It can also be helpful to have different sorts of fundraising messages in different parts of the website, to avoid fatigue. This is an opportunity to have a longer call for donations.
Recommendations: Original page had articles listed here, but no header. Just calling it “Recommended for You” creates another touchpoint with the user.
Skills used: UI • UX • Branding • Copywriting • Marketing • Community Engagement Strategy • Nonprofit Strategy
