Project:
Brand Identity & UI/UX

Role:
Design Lead

Tools:
Adobe Xd, Photoshop,
& Illustrator

Case Study

Background: The Sickle Cell Association of Delaware, or SCADE, is a non-profit organization dedicated to providing services for those in need of sickle cell disease-related support. The association focuses on education, advocacy, as well as support for those affected by sickle cell. They pride themselves on being caring and warm while still being educational.

Challenge: SCADE wants to help as many people in the Delaware area as possible but has difficulty reaching its desired demographic. The non-profit does not have much in the way of branding to entice its target audience and is hard to find since it has almost no web presence.

Goals: Design a Brand Identity and a High-fidelity Website prototype with a mobile version.

Website Prototype

Mobile Prototype

Research

Competitive Analysis

In order to understand the necessary elements of a nonprofit website a competitive analysis was completed. We discovered that education and services needed to be focused on with interactive components to keep the user engaged with the content.

Target Audience

To understand who the target demographic would be we researched and found two main personas we should focus on when crafting the branding and web development.

Targeted Research

After establishing the organization’s demographic we reached out to a community affected by sickle cell disease (SCD) with a survey. From the survey, we discovered the following:

Most people looking for SCD resources, services, and events are knowledgeable caregivers and advocates for the cause.
Those affected with SCD want a variety of options and services offered to them by non-profits.
Those affected by SCD frequent the web for help in their journey.

Branding

Logo

In the creation of a new more modern, simplistic logo several ideas were explored. Topics relating to sickled cells, caring, blood, and Delaware were considered. Ultimately the design was two sickled cells coming together to make the shape of an S with a heart in the middle as a logomark. The logo is the logo mark combining with letters to make out the acronym SCADE.

Dark Blue

RGB: 16, 36, 78
CMYK: 100, 92, 38, 37
HEX: #10244E

Red

RGB: 234, 52, 37
CMKY: 0, 99, 100, 0
HEX: #EA3425

White

RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
HEX: #FFFFFF

UI/UX Design

Wireframing

Now knowing the demographic, their needs/wants, and what the SCADE board aims for in their brand we started wireframing for the web and mobile versions. Each version was to have eight pages including home, education, advocacy, events, news, and about pages.

Ui Elements

We based our UI elements on what was important within the targeted audience for the web and mobile versions. This included the following and more:

Donation Buttons/Tab
Menu
News Tabs
Email Newsletter Form
Advocacy Cards
Interactive Events Calendar
Educational Video Carousels

Web & Mobile Pages

Each Version has eight pages (home, education, advocacy, events, news, and about) that are interactive and responsive. Each page has imagery correlating with the page content as well as keeping the new brand identity. The mobile version contains the same information as the web with a different layout on similar pages to fit a smaller screen better.