Harry Gu - Creative Designer & Developer | Portfolio

Project Overview

Reentry Reimagined is a Grand Rapids-based non-profit organization dedicated to supporting individuals transitioning back into society after incarceration. Their mission focuses on providing resources to formerly incarcerated individuals, breaking down reentry barriers, and fostering personal growth and community reintegration.

The organization's existing website was rudimentary, lacking in aesthetics and difficult to maintain due to its custom-coded structure. It lacked effective communication of their mission, lacked donation capabilities, and posed challenges for non-technical staff to update.

Objectives:

As the designer, my role encompassed:

Redesigning the website on a user-friendly platform for easy maintenance by non-technical staff
Transferring the domain name to the new platform
Implementing a donation system to facilitate financial support
Enhancing the site's SEO to improve visibility and reach
Enhancing design aesthetics and branding that effectively communicates the organization's mission and services

The Website Before Redesign

Liberty in North Korea Site (Credit: Liberty in North Korea)

Research and Discovery

Target Audience

The target audience spans a wide age range and diverse backgrounds, including:

Community partners and stakeholders
Potential donors and volunteers
Formerly incarcerated individuals seeking support
Family members of those transitioning back to society
General public interested in social justice issues

This diverse audience required a design that was accessible, easy to navigate, and appealed to various age groups and technical proficiencies.

Competitive analysis of similar non-profit websites:

I examined websites of established non-profits, for example American Heart Association, Malala Fund, and Liberty in North Korea's site. Key observations included:

Clear, mission-focused homepage messaging
Use of impactful imagery and personal stories
Prominent call-to-action buttons for donations and volunteer sign-ups

Key insights that informed design decisions:

Clean, modern design: Following the trend of successful non-profit websites, I opted for a clean, uncluttered layout to enhance readability and focus.
Warm color palette with contrasting elements: I chose warm, inviting colors to convey hope and positivity, while strategically using dark grey to subtly represent the challenges faced by clients. This balance visually communicates both the difficulties and the potential for positive change.
Prominent mission statement: Placing the organization's mission front and center helps immediately communicate purpose to visitors.
Storytelling elements: Incorporating client testimonials to illustrate the organization's impact and inspire hope.
Impactful imagery: Incorporating authentic photos and graphics to humanize the cause and create emotional connections.

American Heart Association Site (Credit: American Heart Association)

Malala Fund Site (Credit: Malala Fund)

Design Process

Initial Client Consultation

Gathered requirements and understood Reentry Reimagined's goals

Gathered content required on the website, based on the old website and the client's suggestions.

Discussed target audience and desired functionality

Platform and Technology

Figma for website design, on of the best software for UI and Web Design.

Inkscape for custom illustrations, a decent free software as alternative for Adobe Illustrator.

Chose Unplash and Pexels for good quality, free stock photos.

Chose Wix as the website platform for ease of maintenance for non technical people, it also has discount for non-profit organizations as well.

Brand Identity Development

Typography: Red Hat Display font family with specified sizes and weights

Color Palette: Primary (brown tones), Secondary (black and white), and Tertiary colors

Content Strategy

Collaborated with the client to outline key messages and content hierarchy

Identified essential pages: Home, About Us, Services, Resources, Contact

Testimonials from actual clients to showcase real impact and build trust

Visual Design

Created mood boards to align visual direction with brand guidelines

Designed key page layouts (Homepage, About, Resources) using Figma

Applied the established color palette to convey warmth and professionalism

Incorporated imagery and graphics that represent hope and transformation

Checked for accessibility compliance using online WCAG contrast checker tools.

Responsive Design

Adapted layouts for mobile, tablet, and desktop views

Client Feedback and Iteration

Presented designs to the client for feedback

Made revisions based on client input. The client generally satisfied with the design, we only changed some texts for more updated information.

Implementation

Implemented Figma design on Wix

Integrated Stripe for secure and efficient donation processing

Optimized the site for search engines (SEO) through Wix SEO portal

Ensured mobile responsiveness and cross-browser compatibility and tested on both Chrome Developer Tools and real hardware

Set up DNS records to direct the domain name (reentryreimagined.org) to the appropriate server.

Testing and Quality Assurance

Conducted thorough testing across devices and browsers with Chrome, Firefox and Safari, and various window size using browser's dev tools (F12 Menu).

Offered initial support and monitored site performance through Wix Dashboard

One of the later prototypes

Brand Guidelines

Results and Impact

The redesign resulted in 40% increase in website traffic
Increased usability and aesthetics
Received active recurring monthly donations from Stripe

The Website Before Redesign

The Website After Redesign

Home Page - Desktop

Resources Page - Desktop

About Page - Desktop

Contact Page - Desktop

Home Page - Mobile

Resource Page - Mobile

About Page - Mobile

Contact Page - Mobile

Technology

Service