Harry Gu - Creative Designer & Developer | Portfolio

Earth-toned website redesign displayed on laptop and mobile screens.

Earth-toned website redesign displayed on mobile screen.

Reentry Reimagined Website Redesign

Result: The redesign led to a 40% increase in website traffic and active recurring monthly donations.

Visit Website

Technology

Wix, Figma, Inkscape, Krita

Service

Web Design, Branding, Digital Photography, Digital Illustration, SEO

Reentry Reimagined is nonprofit organization dedicated to supporting individuals transitioning back into society after incarceration. The redesign focused on enhancing branding, aesthetics, and SEO while maintaining brand consistency.

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

Reference interface featuring bold activism imagery and clear typography.

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.

Reference interface utilizing diverse photography and red accent colors.

American Heart Association Site (Credit: American Heart Association)

Reference interface using bright yellow branding and storytelling elements.

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