UX & Icon Redesign for a Purpose-Driven Website

Landing. Page

Project Overview

Adra, a disaster relief agency affiliated with the Adventist church, operates in over 120 countries. They provide aid in education, health, livelihood, and emergencies by collaborating with local communities, organizations, and governments. Through culturally relevant programs, they aim to foster sustainable change. We will be updating their landing page with new icons to better reflect their mission.

My Contributions

UX/UI designer
Branding

Tools used
Figma
Illustrator

‍

‍

A bright green page with a white accents of stars and lines with a half white half green backgorund

Problem

Solution

How do we reflect global impact in a meaningful way? My challenge with helping Adra involves enhancing user engagement and understanding through impactful iconography and a streamlined landing page. Effective iconography should visually communicate Adra's global impact across diverse audiences, while the landing page needs optimization for easy information intake. Simplifying content layout and emphasizing key messages will improve user navigation and engagement, ensuring Adra effectively communicates its mission and achievements to a global audience.

We'll revamp ADRA's landing page with clear navigation, impactful visuals, and distinct icons for education, health, livelihood, and emergency relief. Each section will offer concise content, real-life stories, and calls to action for engagement or donations. With responsive design and a focus on partnerships, we'll create a compelling space reflecting ADRA's mission and inspiring support.

Objectives

Create a responsive landing page for the icon set. Landing page must have a sign-up form, first name, email address, and a submit button. As well as a donation page that is less cumbersome.

Design process

a timeline of total time to complete project 2 weeks 35hrs

Research

My research phase consisted of me observing other organizations utilized iconography in their landing pages to present their mission better and to translate their story more visually. A study was done in 2023 by a group of of researchers at the Bournemouth University, on icon ratings and how it affects the users experience. It determined that the concreteness of icons and how close they are semantically to their intended descriptor usually is a good indicator of having a useful icon. Having Icons that help create a complete picture and to help users understand what the charity is trying to achieve the better.

Examples of referenced iconography

(Ronald Mcdonald, 2024)

(Feeding America, 2024)

Insight

I determined from my research phase that, making a landing page that tells the story and familiarizes the user with the mission of the organization, so I wanted to craft my icons that went along with what they aim to achieve, as well as reducing the cognitive energy needed to scroll through a text rich website like a charities.

Icons

Brand Guide

Refining the initial sketches proved to be a pivotal step in establishing a robust foundation for my design process. This approach ensured that the core elements were thoroughly developed, facilitating smoother adaptation across various breakpoints. As a result, the transition to responsive design was seamlessly executed, mitigating any potential obstacles that might have arisen. This methodical method not only enhanced the responsiveness of the design but also contributed to its overall professionalism and efficiency.