US2020, by way of citizen schools, is an organization initiated by the White House to advance the fields of STEM through mentorship and education. US2020 matches STEM professionals with students from non profits and schools. How might we create an experience that not only communicates US2020’s mission, but also matches STEM professionals with local non profits who represent students?
1 Remove friction for mentors to search and sign up for opportunities on multiple devices
2 Make it easy for non-profits to list clear, compelling opportunities
3 Create a space for connection so mentors and non-profits can communicate with each other
4 Create a compelling visual experience that excites mentors to sign up
• Set the overall pace and timeline for our research and design explorations
• Led and facilitated interview sessions with stakeholders and users
• Led the experiencing mapping process–service blueprints, user flows, IA, prototypes
• Created the visual and interaction system, while also providing direction to other designers
• Established effective style and interaction guides with multiple engineering teams
• Articulated research findings and design solutions to directors and stakeholders
Designed at WINTR
I set out to understand the challenge by observing STEM mentoring events and conducting interviews with mentors, non-profit partners, and stakeholders. After gathering this research, service blueprints were created to identify gaps and goals for each type of person (STEM mentors, non-profit partners, and US2020 admins) from the first moment of interest to final stage of the mentoring experience.
After identifying the goals and gaps in the current experience, it was time to define how the mentors and non-profit partners would flow through a new system. User stories, flows, information architecture, and quick wireframes helped to address the priority of the requirements for the design. The core of the experience focused on two aspects: 1) make it easy for mentors to search and join an opportunity and 2) guide non-profit partners to list an opportunity to find a mentor. Additionally, establishing experience guidelines with the US2020 team help to set the vision for all aspects of the experience moving forward.
I set out to start the design process with a mobile first approach–designing for the smallest screen and working up. This allowed the team to maintain a mindset of simplicity and focus as we built out the core components of the experience.
Searching for opportunities was a large component of the mentor's experience. It was important to guide potential mentors to opportunities that best fit their situation–whether they wanted to search at-a-glance, or in depth. Sketching, coding prototypes, and testing the platform with mentors helped us to better understand the details of their behaviors.
I created two stages of the search–basic search + advanced search. This allowed mentors to have control over what search filters were most relevant to them. The basic search included category and location details, while the advanced search was tailored to fit their availability, distance from opportunities, or whether they wanted to be in person or mentor virtually.
In order for mentors to find interesting opportunities, it was important for non-profits to list interesting opportunities. After talking with non-profit partners and testing out what it's like to complete a listing form, we uncovered insights that helped us figure out how to create a more easy, guided and quick form input experience. It's all in the details–tracking the steps of where they were at in the form process, guided input descriptions, and saved drafts helped ease the process of listing an opportunity for non-profit partners.
In order to communicate how the experience worked, it was important to accommodate for the nuances of information for the two different types of experiences: 1) how mentors can find an opportunity, and 2) how non-profit hosts can find a mentor. With this in mind, I designed a toggle interaction–allowing mentors and non-profit hosts to quickly and easily switch the content according to their needs. This interaction also made it easy to quickly choose their role and scan the information on their mobile devices.
As part of the iterative process during beta testing, a key piece of feedback we received was that communication between mentors and non-profit hosts was made via loose emails and forgotten calls. In response to that, I set out to create a dashboard that allows mentors and non-profit hosts to share ideas, questions, and orientation documents–all in one place. This dashboard can be accessed after sign up. While the content of the dashboards between mentors and non-profit partners are tailored to their specific goals, the grid system and design modules remained consistent for more maintainable and efficient code.
A brand system refresh was created to reflect the mission in a playful yet sophisticated way–connecting with STEM professionals as a reminder of what it was like to experiment as a child. Live style guides were created in order to communicate with multiple engineering teams about how the design system worked.