Empower Our Youth

Non-Profit Website Redesign

The Columbus non-profit Empower Our Youth Foundation needed a new website that reflected all the amazing work they do in the community. In collaboration with a team of 48in48 volunteers, I redesigned the website as the lead UX/UI Designer.

View Site

Introduction

48in48 is an organization dedicated to building websites for non-profit organizations at no cost. They organize teams of volunteer designers, developers, project managers and content writers to come together and create websites in just one weekend. My team redesigned and developed the website for Empower Our Youth Foundation, a Columbus-based non-profit that promotes a healthy, bully-free culture at home, school, online, and in the community.

Role: Lead UX/UI Designer

Responsibilities: Prototyping, User Experience Design, User Interface Design, Information Architecture, Testing, Content Writing, WordPress Development, UX Research

Tools Used: Figma, WordPress, Trello
Project Team: Jessica Mitchel (Project Manager), Geanita Everett (Content Lead), Susan Milbrant (WordPress Development)

The Challenge

Our client, a non-profit organization focused on anti-bullying initiatives, approached us with a website in need of a refresh. Founder Tonya expressed concerns about the site's navigation, information density, and overwhelming visuals. It simply didn't reflect the organization's goals or target audience. Tonya envisioned a user-friendly hub offering clear and accessible resources for students and families impacted by bullying, while also showcasing the foundation's impactful work.

Images from the home page of the initial site

The Solution

To address these challenges, our team implemented a comprehensive redesign. I focused on crafting a user-friendly interface that prioritized clear navigation and accessibility. This included a refresh of the organization's branding to ensure a cohesive visual identity. Furthermore, I undertook a complete restructuring of the information architecture, streamlining content and prioritizing resources for students and families. By critically evaluating existing content, the team was able to reduce on-site information by over 50%, ensuring a user experience free from clutter and focused on providing the most impactful support.

Process

The redevelopment of the website was a fast-paced, collaborative and systematic process that involved gathering insights from the non-profit founder, reworking content, designing the user interface, and creating a working prototype. Our team's process included the following:

Research

We started by interviewing the founder, Tonya, to talk about the organization and her goals for the website. During this interview, we gained an understanding of her users and current pain points. We discovered that this is an organization that does so much for the community, and as a result, the website had lost focus.

The founder, Tonya, intended to use the website as a place to highlight her organization’s work AND as a resource hub for students and families experiencing bullying. Because of the amount of content on the website, it had become difficult for users to find what they needed. Tonya also wanted to expand the reach of her organization, and was looking to update the design to better reflect the recent changes to the logo and newsletter.

Ideate

I started the process by recording all of the sections and topics that the client wanted to appear on the website. I shared the site map with the team and after receiving feedback, I moved forward to creating the initial wireframes.

First site map redesign

Wireframes

I created low-fidelity wireframes to quickly iterate with my team due to the time constraints of this 48 hour event.

Initially, we attempted to create separate "zones" for families and students, but we quickly realized that these designs were going to result in more pages filled with too much content.

Wireframe of the About Page

In order to improve organization, I revised the initial plans for the information architecture of the website to include dedicated resources and events pages. We added two subpages for students and families under resources. This kept the menu uncluttered, and made sure that the contents of the page matched the titles. Our client quickly approved the changes and I began development in WordPress.

Updated Navigation

Final Site Map

Design and Development

The client provided their logo design and requested that the team include lots of colors throughout the site. I used this logo to create the color scheme for the final site.

Content and Webcopy

After creating the wireframes, I developed a text outline of the web copy using Google Docs. In collaboration with my team, we determined what to keep and what to re-write from the original website.

Transformation

Using WordPress, our team developed the new site. We were able to meet our client's expectations, and she was thrilled with the new look and feel of her website.