UI Design, Project Management
The design overhaul for Concern Worldwide US started back in 2022, where I acted as one of the Project Managers and sole UI Designer of the project. I did a small portion of the UX, but my involvement there was focused primarily on conducting usability tests before the design phase.
Concern Worldwide US is a returning client who were happy with my agency’s ways of working. They were pleased with designs I had done for their Carbon Footprint Calculator back in 2021, and have worked on several projects since.
.svg)
Concern Worldwide US has their own style guide and icon set, which was followed closely for this design. For the color palette, "Concern green" was used as the primary color and "biscuit" was used as the background color for each screen. For the typography, the style guide calls for both IBM Plex Serif and IBM Plex Sans, so I took this as an opportunity to use IBM Plex Serif for all headings, statistics, and larger callouts, and IBM Plex Sans for everything else. This helped to establish the hierarchy and create a bit more visual interest, as many of the pages on the site can be quite long and informational.
Additionally, I played around with pieces of the logo to create interesting backgrounds and overlays throughout the designs -- you'll notice that at the bottom of the "donate" page for the subscribe form, and may notice some desktop overlays throughout. All of these overlays pass WCAG guidelines for accessibility, which is always top of mind for every project I design. The same goes for the overlay text on the images; a darker blur effect was used to not take away from the images, and also to make the text readable throughout. This was done because Concern wanted full-width images where text in many cases would be displayed on top. The overlays were not used as liberally on mobile and instead were displayed as solid colors beneath the images in many cases.
The donation option was something that Concern wanted to call some attention to, so a donation widget was added to the home page for a seamless donate option. There is also a page dedicated to donating in a few different ways, with a bit of supporting information such as FAQs and statistics.
For the header navigation, there's a design example of how this is structured. Since this is a larger site, it was important to organize the navigation accordingly by categorizing each section with bold text for primary pages, and regular text for the secondary pages. Images were used for parts of the navigation to call more attention to sections that Concern wanted to highlight. In the designs below, you'll notice an image of the interactive map within the navigation to draw attention to the areas that Concern works in.
