Group Project

Reach One Youth

Reach One Youth is a non-profit, 501(c)(3) organization whose mission is to provide youth development programs for underserved youth. In this project we reached out to the organization for a desktop redesign to address accessibility concerns.

Overview

The Covid-19 Pandemic forcibly took students from the classroom and back into their homes. As a result, virtual learning students in K-12thgrades have faced a variety of obstacles such as low academic performance. I planned on using design and research to uncover solutions for these users.

The Problem

  • Desktop users are uncertain and having difficulty with accessing information about Reach One Youth's programs. This is a problem because it leads the user to endlessly scroll through each page to find information or leave the website.

Our Solution

  • Redesign a desktop flow that will highlight Reach One Youth's programs, mission and popular content
  • Improve page layout and align with content hierarchy conventions
  • Improve clarity of navigation labels and headings on webpages to match user expectations

Project Details

Timeline

September 1st - December 1st 2022

My Role

UX Designer
Asset Collector

Platform

Desktop

Tools

Figma
Slack
Zoom

Process

Double Diamond (Discover > Define > Develop > Deliver)

Team

Hydeia Blakey: UX Designer
Jalena Threatt: Content Writer/Researcher
Jayna Taylor: UX Researcher
Stephanie R: UX Designer/Asset Collector

Team

Hydeia Blakey

UX Designer
Asset Collector

Jalena Threatt

UX Researcher

Rayna Taylor

UX Researcher

Stephanie R.

UX Designer
Assett Collector

Discover

The Reach out to Reach One

My team & I started this project after investigating several non-profit organizations that we could give back our UX design skills and time to. Given that the team resonated with their mission to help underserved and disenfranchised youth, Reach One Youth is an organization that we were interested in helping with accessibility issues we were experiencing while using the website. We reached out to the organization to see if they were interested in a redesign and waited for a response.

Meeting our Stakeholders + Preliminary Research

After receiving an email back that the company was interested, we gave a presentation detailing who we are, why we were interested in redesigning their accessibility issues and how we could help through UX Design. 

We received tons of feedback and were given preliminary research on what the company wanted us to focus on, their target users and what was important to their business to highlight for our project.

Target Users

  • Youth (children/teens age range 3-18)
  • Adults (18-24, i.e. college students)
  • Older Adults (24+, i.e. parents, business professionals, volunteers)

Stakeholder Goals

  • Create a functional but youth friendly website that can handle a lot of user traffic and provide a stress-free experience
  • Make communication for job announcements, volunteer opportunities, registration and donations more efficient
Back to top

Heuristic Evaluation

With our target users in mind, I assisted the research team with creating a heuristic evaluation of Reach One's website and provided feedback on my findings.

View Usability Report for more findings
"Having so many sub-tabs underneath the navigation bar is distracting."
Interviewee from Usability Testing

Testing the Website with Real Users

With a knowing is learning attitude, our research members investigated users thoughts on the website to see what they thought about it.

From usability testing 6 users, the research team uncovered some key findings through affinity mapping which was essential in my process to generating ideas for a potential solution.

  • Many users are unclear about where and how to find program responsibilities or how to volunteer
  • Finding and making a donation took up the most time out of all tasks asked of users
  • Novice or first time visitors rely heavily on the homepage to find important information
  • Parents want to understand the benefits of their children participating in Reach One Sports
  • Volunteers want an easier way to find out responsibilities before applying
  • Users are unsure about the relationships between images and texts

Define

Revising the navigation hierarchy

I created a sitemap to show the page hierarchy to help organize the information architecture on the current website. The sitemap is based on open card sort results compiled by the research team.

Starting at the end

Based on the insights uncovered from affinity mapping, we created three goals that would be our focus for the redesign.

Redesign Home

  • Redesign the homepage to help users find and discover important information (i.e. eligibility, fees, schedules, events) and highlight popular content (i.e. news, success stories)

Improve Layout

  • Improve page layout and align with content hierarchy conventions with prominent CTAs.

Match User Expectations

  • Improve clarity of navigation labels and headings on webpages to match user expectations of where to find information.

Persona Creation

With the company's target users in mind and our goals for the project, the research team created two persona's: Parent and Volunteer for this project. It was important to have these users in mind as I moved towards sketching because these are the users we were designing for.

HMW

This led us to our how might we statement: 

"How might we organize information on the Reach One Youth website in order to make programs easily accessible for volunteers and youth."
"How might we organize information on the Reach One Youth website in order to make programs easily accessible for volunteers and youth."

User Flows

With our HMW statement in mind, I created common user flows that aligned with the company and user goals. The following user flows are focused on making Reach One Youth's programs more accessible and user centered.

Develop

Designing for a Cause

We began to complete several sketches keeping in mind common donation and non profit-layouts and standard desktop conventions for inspiration behind this. Each team member created several sketches of the proposed user flows.

Stephanie's Sketches of Sports Pages
My sketches for Volunteer and Homepages
My sketches for Sports pages

Putting the pieces together

With sketches created and decisions made with ideas we aligned on, we started low-fidelity designing in grayscale. Going forward in this study, I'll annotate and highlight my responsibilities from the design process.

For the low-fidelity wireframes, I was in charge of the main portions of Flow 1 which include the sports page and registration forms.

Sports Program Page

Reach One Youth's original sports page included a small informational video that led into a lengthy form for youth to fill out with parential guidance.
The revised design for the sports page includes an hero video that would showcase the sport selected with additional information. I felt it was important to make information easily accessible because many users during testing found it difficult to find the information they needed.
Based on users difficulty to find important information such as registration fees, we wanted a F.A.Q. to be on the registration page for common information. I also had the idea to merge the website's success story page into the sport's registration page to give users a look into the community that Reach One Youth provides.
The final section of the Reach One Elite sports page would include a message to the user persuading them to register for the selected program with a registration button and a footer to get to other pages on the website.

Sports Form Pages

Reach One Youth's forms left users feeling overwhelmed with the amount of content and language in some areas weren't clear enough for users that may not be as tech-savvy.
To combat this, I split the form into pages and implemented a progress bar that would give users clarity on where they are in the process. In this fashion, users would be fed information at their own pace and can freely click the next page when they're ready to move on in the application.
View All Low-Fi Wireframes

Develop

See the Redesign Live

Low-Fidelity Wireframes ushered us into the hi-fidelity design amongst our impeading deadline to present this project to our stakeholders. My design partner created a style guide with an expanded color palette of Reach One Youth's color scheme and a new typography system that's clean to read on desktop systems.

Click the fullscreen icon to use prototype or click hereClick to view prototype

Reflection

Takeaways

Balancing business and user goals

  • This was my first project designing for a non-profit and rather than focusing solely on the user, I needed to understand the business and what message they wanted to convey to their demographic. Goal setting was very beneficial to this project because I was able to align the goals of users as well as the business to come up with a redesign that could work for both

Next Step: Usability Testing!

  • The project doesn't end here, we want to eventually set up testing with Reach One Youth's users to see if our solution is feasible compared to the original website.