RecruitHER Design System

The system behind the mobile-friendly, athletic female recruiting site.

Fall 2024

RecruitHER logo

My role:

• Content & Design Lead

Project Overview:

The design system was created to manage the design standards and the reusable components and patterns of our project, RecruitHER. For our design system, we used Canva and Adobe Illustrator.

Problem:

High school female athletes often face disparities in the recruiting process compared to their male counterparts. Traditional recruitment platforms either overlook their needs OR fail to present their achievements in an impactful and accessible way. Coaches and recruiters often struggle to find a centralized and cohesive platform to evaluate players’ skills, which hinders female athletes from having equal opportunities for recognition. Some of the key challenges include:

1. Lack of Representation
2. Inconsistent Design Standards
3. Limited User Engagement

Solution:

The design system for RecruitHER was created to address these issues, by ensuring an equitable experience for all users. This system was built around prioritizing inclusivity, clarity, and consistency. One of the main components we wanted to promote was ensuring that the platform was fully optimized for mobile use, making it easily accessible for coaches and athletes on any device.

Brand Name/Logos:

Our logo was strategically used to create clarity and relevance to our mission. There is a clear purpose in connecting athletes to better opportunities while emphasizing our message of gender equity in sports. The name, RecruitHER was used to create a professional, but modern feel that would appeal to athletes and recruiters. The logo we created for RecruitHER is bold and clean to reflect strength and confidence.

RecruitHER Logos

Brand Voice/Mission

Before diving into the full design of our product, we took the time to define our core values and establish what RecruitHER should represent for our target audience:

Our mission is to empower high school female athletes by showcasing their talent, amplifying their voices, and connecting them with recruiters to level the recruitment playing field.

Color Palette:

Our team decided to use colors that represent creative dynamic contrasts and resonate with athletic themes. Using these colors for our palette captures the users’ attention and helps to create emotions associated with sports and the athletic competitive nature.

Typography: For our typography, we decided to use Archivo Black, Archivo Narrow, and Roboto. We wanted our typography to be professional, easy to read, and accessible.

Typography for RecruitHER

Graphics/Imagery

For our imagery, we wanted to focus on movement and motion. All of our graphics were used to reflect the strength of young female athletes and appeal to recruiters. The bold colors build excitement and capture attention. Images are youthful, energetic, and competitive to convey a sense of professionalism, showcasing female athletic talent.

Imagery for RecruitHER

As the Content and Design Lead, I wanted to prioritize the features that were emphasized during our interviews:

• Athlete Profile Setup
• Custom Profile Search Functionality
• Descriptive Account/Profile Creation
• Direct Messaging with coaches, recruiters, and scouts
• Social Media Integration

Throughout our process, we heavily relied on our various UI components. This included:

• Buttons
• Text Fields
• Forms
• Alert symbols
• Template for our featured athlete page
• Tabs

Results:

Lessons Learned:

• Prioritize a seamless, responsive design that adapts well to various devices — This is a key lesson because we want to ensure that our site is mobile-friendly.
• Consistent visual components help to build brand recognition and trust.
• A well-documented design system simplifies the design phase and is key to maintaining consistency.

Success Metrics:

• We used our user feedback to curate our features. Changes made during the prototype phase were based on user feedback and all of our designs were made with the user experience and engagement in mind.

Next Steps:

• Our next steps include conducting user testing, analyzing the results, and preparing a detailed report to share our findings. The report will be organized around key insights and actionable recommendations. Any necessary improvements will be informed by the outcomes of our testing.