top of page

Fred's Closet
Redesign + Copy Rewrite                 

Client

Fred's Closet, Inc.

​

My Role

UX Writer and UX/UI Designer

 

Team

Organization Founder, Web Developer, and UX Writer 

​

Background

Fred's Closet is a 501 (c)(3) charitable organization on a mission to spread gun violence awareness and prevention and support families affected by gun violence.

Problem

How can we motivate website visitors to actively engage in Fred's Closet's mission?

 

Solution

I partnered with Fred's Closet to provide users with clear copy and a responsive, easy website experience.

 

Duration

30 Days

Wireframing + Prototyping

After meeting with Fred's Closet's founder and web developer to discuss their desires for the  website, I sketched mobile wireframes to determine essential elements for the principal user flows:

  1. learning about Fred's Closet,

  2. donating to the organization, and

  3. signing up to volunteer with the organization.

​

​

Paper Wireframes.png

Then, I used Figma, a four-column grid, and an eight-point grid system to develop consistent spacing, a visual hierarchy, and a familiar aesthetic across the mid-fidelity mobile screens.

Mid-Fidelity Wireframes.png
Typography, Color, Imagery + Style Guide

After a project brief with the design team, I applied the principles of typography, color, and imagery to the high-fidelity prototype.

 

The original lime green honors the sentimental inspiration behind the organization’s cause. We aimed to evoke optimism, hope, health, and growth through more accessible green and high-fidelity design elements.

​

 

 

Here's the design documentation for the redesign: 

​

​

​

The following pages received the most redesign support:

​

​

Home Page

Low-Fidelity

Mid-Fidelity

High-Fidelity

Who We Are Page

What We Do Page

LMH what we do.png

Through several iterations, the 'Back' option was missing from the screens without the donation and volunteer forms. To fix my error, I included the browser bar in the high-fidelity prototype.

 

After consulting with the organization founder to review the prototype screens, we agreed to:

 

  1. add the Fred's Closet's tagline to the Home page,

  2. remove the 'Donate' button from the top of every page,

  3. remove 'Sign Up' buttons next to each volunteer opportunity and replace them with hyperlinks, and

  4. include a Register button for volunteer opportunity notifications.

Volunteer Page

Copy Upates
Copy: Before, After + Brand New

I rewrote the original copy in a clear, concise manner and friendly tone. I aimed to maintain the integrity of the nonprofit's message and encourage users to engage with FredsCloset.org.

​

The redesigned Home page has a clearly visible menu at the top left of the screen. This keeps users consistently informed of where they are in the website's flow.

 

Prominent CTA buttons encourage users to engage further as they scroll.

​

Short subheaders and chunked copy feature relevant information previously hidden on other screens.

 

Images, buttons, and spacing separate short, left-aligned body copy to reduce cognitive load.

Before
Home.png

Original FredsCloset.org Home page

After
Home Desktop Hi-Fi.png

Redesigned FredsCloset.org Home page

On the redesigned About page, each image is briefly explained in the copy or with a caption.

 

The updated copy maintains relevant information.

​

For consistency, the text is separated by images and spacing to reduce cognitive load.

Before

Original FredsCloset.org About page

After

Redesigned FredsCloset.org About page

The redesigned Programs page offers a rationale for engaging in one or more programs.

​

The body copy layout is consistent with that of the Home and About pages: clear, concise, left-aligned, and separated by images and spacing.

​

Each featured program has a brief CTA underneath each subheader to replace the original body copy.​

Before

Original FredsCloset.org Programs page

After
WhatWeDo_DesktopBreakpointV10.png

Redesigned FredsCloset.org Programs page

To meet the nonprofit's goal of collecting volunteer and donation data, I also created multi-step forms for the volunteer registration and donation processes.

​

(Hover over an image. Then, click the navigation arrows below.)

When users land on the Volunteer or Donation pages, they will see:

​

  • a header noting where they are,

  • brief explanations of the benefit of volunteering or donating, and

  • one or more CTAs.

​

​

On the multi-step forms, users will see:

​

  • content spread across multiple screens to reduce cognitive load, 

  • a progress bar indicating where they are in the form flow, 

  • 'Next' and 'Back' buttons to increase user control, 

  • clear form field instructions, and

  • a toast confirmation message and CTA upon form completion.

Future Impact

The redesigned, optimized website for Fred's Closet can result in the following:

​

  • ​Increased engagement: Compelling content and user-friendly navigation can increase engagement. 

    • This raises awareness of the nonprofit's mission and can boost participation in its advocacy efforts.

​

  • Enhanced education and advocacy: FredsCloset.org can serve as a resource hub and empower its users with

    • Educational materials, statistics, and personal stories on gun violence

    • Advocacy tools like petition signing and event notifications

​

  • Expanded reach: Fred's Closet can attract a broader audience.

    • This helps to disperse the organization's message and garner support from new demographics and communities.

​

  • Improved fundraising efforts: Fred's Closet can facilitate easier online donations, fundraising campaigns, and sponsorship opportunities.

    • Providing clear CTAs and showcasing the impact of donations can increase donor participation and financial support for its initiatives.

​

  • Community building: Fred's Closet supporters, volunteers, and advocates can have a stronger sense of community.

    • Features like forums, social media integration, and user-generated content can facilitate more connections, collaboration, and shared experiences, and fortify the nonprofit's network and impact over time.

💡
💡
💡
💡
💡
What I Learned

Here are my takeaways from the redesign process:

​

  • When designing for larger breakpoints, there has to be a consistent balance between page elements and a relatively greater amount of whitespace.

​

  • Mood boards give direction and focus to a design. 

​

  • Involving potential website users in the redesign process will improve future iterations and help reconcile user needs with business goals.

✅
✅
✅

Top of page

bottom of page