College Outreach and Recruitment Program
MY ROLEUX Designer
UI/Visual Designer
ACTIVITIESDiscovery
Wireframing
Responsive Web Design
Icon Creation
Prototyping
Presenting Work
Client Facilitation
TOOLSBasecamp
Notion
Figma
Adobe Illustrator
Project Overview
While working with the team at Bust Out, I redesigned lead-generating web pages to communicate the benefits of Be The Match’s college campus programs and encourage students and faculty to get involved. With a mobile-first approach, I redesigned the web pages, enhancing the content to address audience goals and showcasing the program’s positive outcomes. My redesign equipped our client, Be The Match, with a hardworking microsite they can continually use to engage with and recruit college audiences.
Problem Space
When donating bone marrow and blood stem cells, there’s an optimal age where you can give the most. That’s generally in your early 20s. And if you’re also very athletic, that’s even better. Finding matches is a numbers game; you must cast a wide net to increase your chances of finding them. Where better to cast that net than on college campuses?
That’s precisely what Be The Match does. And they don’t have just one, but multiple programs they call pillars: Ambassadors, Chapters, Get in the Game, and Partners.
Situation
Each pillar has its own director and dedicated team behind the scenes. This resulted in a series of ad-hoc web pages for each program. Beyond that, the pages didn’t do a great job of cross-connecting. When visiting one of the sites, it wasn’t clear to our target audience that multiple options were available for getting involved with Be The Match as college students.
Action
Discovery and wireframing
My first step was inventorying the existing content and pages and identifying similarities. I also met with the stakeholders at Be The Match to understand their goals. This led me to design layouts using modular sections that could easily be moved around, added, removed, and reused across the pages. This reuse of patterns also helped cut down on development time and had the added benefit of tying the individual pages together and creating a sense of continuity across all program pillars.
Applying Visual Design
By sharing wireframes early, I got buy-in for the new direction. My next step was applying the brand to create an energizing, optimistic, modern look. I made use of color blocking within sections to create pages that were dynamic and visually exciting. Not only did this create visual interest, but it also helped with the scanability of information, helping our audience identify relevant information.
Through discovery, the team and I learned it was important for our target audience to see people like them who have been donors. It helped to demystify the process and make it feel more approachable. Because of this, I created a testimonial pattern to highlight sorties of past donors and the impact of their experience. And I prioritized using imagery of students involved with the college programs.
Additional Benefits
In addition to the social proof, I also added a section highlighting the ways their involvement would be a benefit to their college experience and beyond.
Getting Involved
These programs wouldn’t be possible without the students’ involvement, so collecting leads and encouraging students to participate was the primary goal. I made sure to include clear call-to-action buttons on every page that lead to a sign-up form.
Results
These college program pages will be a tool that Be The Match can use year-round to engage with college students and attract volunteers and students to join the registry.
