top of page
GFDP-New-Full-Logo-2024 1

THE COMPASSION FOUNDATION

The Compassion Foundation is a charitable organization dedicated to raising funds for the local community, providing vital support to individuals facing hardship and adversity. Through their efforts, they strive to make a meaningful difference in the lives of those in need within the community.

Tools

Figma
Adobe Illustrator
Adobe Photoshop

My Responsibilities

User Interface Design
User Experience Design
Logo Design
Branding

Team

UI/UX Designer

Objective

The objective of the Compassion website redesign project is to modernize the platform, enhance user experience, and streamline the process for users to purchase tickets for events, raffles, and other offerings. This includes creating a visually appealing and intuitive design that simplifies navigation, promotes engagement, and fosters a seamless purchasing journey, ultimately increasing user satisfaction and conversion rates.

Target Audience

We focus on a key demographic: middle-aged individuals with significant financial means who are driven by philanthropic aspirations. This segment of our target audience represents a demographic characterized by both the capacity and the inclination to make substantial contributions to charitable causes. Through extensive research and tailored outreach strategies, we have identified their desire to make a tangible difference in the world as a driving force behind their philanthropic endeavors. By understanding their motivations, preferences, and philanthropic goals, the Compassion Foundation has been able to effectively engage with this audience, fostering deep connections and inspiring impactful donations that drive our mission forward.

Competitors

The Compassion Foundation operates in a landscape where several formidable competitors share a similar mission of aiding those in need. Among its competitors are established charitable organizations such as the Red Cross, United Way, and Salvation Army, each boasting extensive networks and longstanding reputations for humanitarian work. 

Analyzing the competitors of the Compassion Foundation serves as a vital tool for discerning prevailing design trends and adopting best practices. It enhances our comprehension of the dynamic market landscape within which we operate as designers, allowing for more informed decisions. Moreover, this research aids in gauging the effectiveness and success of the website currently under development, facilitating a more efficient and targeted approach to achieving our objectives.

Site Mapping

For the Compassion Foundation project, the creation of a site map is of paramount importance. As the foundation seeks to effectively engage with its target audience and facilitate seamless interactions, a well-structured website is essential. The site map serves as a foundational blueprint, outlining the hierarchy of pages, content organization, and navigation pathways. By visually mapping out the structure of the website, I can ensure that all relevant information about the foundation's mission, programs, and initiatives is logically organized and easily accessible to users.

Sketches

Sketching plays a pivotal role in the website design process for this project, offering numerous benefits that contribute to the success of the final product. These sketches provide a rapid and flexible means of brainstorming and exploring diverse design concepts and ideas. They allowed me to quickly iterate through different layouts, arrangements, and visual elements, fostering creativity and innovation.

Low Fidelity Mockups

Creating low-fidelity mockups for the this project holds significant importance in the web design process. These initial mockups provide a tangible representation of the website's layout, structure, and basic design elements without getting bogged down in intricate details. By focusing on simplicity and functionality, low-fidelity mockups allow me to rapidly iterate and experiment with various design concepts, ensuring that the overall direction aligns with the foundation's goals and user needs.

Style Guide

From the sketches, I then built a more precise image of the components all together, with a more accurate representation of shapes and sizes using low fidelity wireframes.

Aa

Inter Extra Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

HEX: D83C30

RGB: 216 60 48

HSL: 4 68 52

HEX: B42C22

RGB: 180 44 34

HSL: 4 68 42

Aa

Inter Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

HEX: FBEBEA

RGB: 251 235 234

HSL: 4 68 95

HEX: 000000

RGB: 0 0 0

HSL: 0 0 0

HEX: FFFFFF

RGB: 255 255 255

HSL: 0 0 100

Aa

Inter Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Mockups

Following the creative brainstorming phase, the design process transitions seamlessly into the refinement stage, where the final mockups take center stage. Presented below are the meticulously crafted mockups showcasing the culmination of the Compassion Foundation project's redesign efforts, highlighting the most pivotal aspects of the newly envisioned website.

Home Page

The process of creating a Walmart B2B account streamlines efficiency and empowers businesses with seamless administrative control. Upon registration, an admin representative from a company initiates the account creation, wielding the authority to add fellow admins and users, thereby establishing a structured hierarchy. Through a user-friendly interface, the admin gains access to a suite of tools, enabling precise management of services and resources for their company's employees. This streamlined process ensures efficient dissemination of information and services, fostering enhanced collaboration and productivity within the organization.

Meet the Team

The process of creating a Walmart B2B account streamlines efficiency and empowers businesses with seamless administrative control. Upon registration, an admin representative from a company initiates the account creation, wielding the authority to add fellow admins and users, thereby establishing a structured hierarchy. Through a user-friendly interface, the admin gains access to a suite of tools, enabling precise management of services and resources for their company's employees. This streamlined process ensures efficient dissemination of information and services, fostering enhanced collaboration and productivity within the organization.

Donations

The process of creating a Walmart B2B account streamlines efficiency and empowers businesses with seamless administrative control. Upon registration, an admin representative from a company initiates the account creation, wielding the authority to add fellow admins and users, thereby establishing a structured hierarchy. Through a user-friendly interface, the admin gains access to a suite of tools, enabling precise management of services and resources for their company's employees. This streamlined process ensures efficient dissemination of information and services, fostering enhanced collaboration and productivity within the organization.

Sponsorships

The process of creating a Walmart B2B account streamlines efficiency and empowers businesses with seamless administrative control. Upon registration, an admin representative from a company initiates the account creation, wielding the authority to add fellow admins and users, thereby establishing a structured hierarchy. Through a user-friendly interface, the admin gains access to a suite of tools, enabling precise management of services and resources for their company's employees. This streamlined process ensures efficient dissemination of information and services, fostering enhanced collaboration and productivity within the organization.

Events

The process of creating a Walmart B2B account streamlines efficiency and empowers businesses with seamless administrative control. Upon registration, an admin representative from a company initiates the account creation, wielding the authority to add fellow admins and users, thereby establishing a structured hierarchy. Through a user-friendly interface, the admin gains access to a suite of tools, enabling precise management of services and resources for their company's employees. This streamlined process ensures efficient dissemination of information and services, fostering enhanced collaboration and productivity within the organization.

Branding

Following the creative brainstorming phase, the design process transitions seamlessly into the refinement stage, where the final mockups take center stage. Presented below are the meticulously crafted mockups showcasing the culmination of the Compassion Foundation project's redesign efforts, highlighting the most pivotal aspects of the newly envisioned website.

VIEW BRANDING GUIDE
bottom of page