UX & 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)
The UX design process started with creating a sitemap to organize the content of the site effectively and jumping into an interactive prototype to use for usability testing. During the initial discussion with Concern, they explained how the donate feature of the website wasn't functioning as well as they would have liked, and wanted that to be a primary focus for the new website. They also mentioned how users generally had difficulty navigating the website due to having a pretty large website, so the primary focus of the usability test was centered around these two concepts.
The usability testing script and findings helped to refine the design further and relay to the business with actionable insights.
The goals of the usability test were to understand:
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. This decision was also based on the results of the usability test. 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.
