MENU
In the spring of 2021 I applied as a team mentor with Develop for Good, an organization that matches teams of student designers with industry mentors and nonprofits looking for design support. My team of student designers partnered with Gateway Regional council, a nonprofit working in the community empowerment and civil rights spaces, to redesign their website with usability in mind.
My mentorship style balanced education and delivery, providing resources and opportunities for my design team to dive deep into our interests while providing frameworks and timelines for making important decisions. Throughout the design process, I leveraged my design industry experience to guide the student designers through a successful partnership.
Applying to mentor with Develop for Good, an organization that gathers teams of student designers and industry mentors to partner on design projects for nonprofits, represented a novel role for me as my first formal mentorship of a team. After applying to the program and receiving my acceptance, I reached out to respected mentors I had found over my years as a designer, to learn the best practices and insights from their broad experience. I felt surprised and honored at how candid my mentors were in these conversations, and I took away a set of core principles to aspire to in my own mentorship journey:
Eager to build context on the nonprofit side as well, I reached out to contacts in the nonprofit space, who shared their knowledge about what drives successful partnerships between nonprofits and consultancies. Keys to success garnered from those conversations included:
The project kicked off with an introductory meeting for our design team of 8 student designers and developers, where we generated a list of questions to ask the Gateway Regional Council (GRC) team. In our first meeting with GRC's team of 6 employees, our designers asked probing questions to understand the organization’s mission, the design team leveraged a collaborative whiteboard space in FigJam to take notes in a quick identity map. This whiteboard helped us come to a collective understanding of the group we were designing for, and the role they aspired to in their community.
GRC sat at the crossroads of a number of different community initiatives structured to benefit minority groups. We gained insight into how the organization prioritized empowerment, building connections, and enacting positive change through collective action, principles that guided how we began to think about our design process.
We also gathered GRC’s goals for the project, which we used to inform the creation of our roadmap.
After we got to know GRC and understand their goals, I led the team through a roadmapping exercise. With the double diamond framework as a backdrop, we brainstormed steps that the group would be interested in taking. This helped me proactively identify opportunities for designers to jump in on parts of the project that excited them, like competitive analysis, research, and high-fidelity wireframes. I parsed this brainstorm into a more concrete timeline doc for us to track work in, while I encouraged other team members to translate our thinking into a more formal proposal to bring to the GRC team and ensure that our plan matched their expectations.
With the project plan confirmed, the team started to explore our project space. As designers performed a competitive analysis of other nonprofit websites, I helped them frame probing questions for walkthroughs with GRC to understand what types of web interfaces the nonprofit did and didn’t connect with. Over the course of these walkthroughs, the team identified key inspiration points for benchmarking our designs. We also set up a card sorting exercise of current and potential website content for GRC to engage with in Fig Jam, which helped us collaboratively frame a structure for the website.
In response to our designers’ desire to perform user research, I encouraged the use of a cognitive walkthrough to establish a benchmark for current website user experience and identify opportunities for usability improvements.
Our team collected the results of this research and our card sort into a consolidated site map, which incorporated GRC’s aspiration for their users as well as the users’ goals in coming to the website. This finalized site map was socialized with GRC for their feedback and eventual approval.
In parallel with the designers’ efforts, the engineers on the team began to explore potential website hosting options; we made the decision early on to constrain ourselves to keeping GRC on wix, motivated by wanting to meet our partners in a web management interface they could continue to use after the project was finished.
Once we had built suitable background and context, the team began to translate our learnings into a journey map and low fidelity wireframes. Our journey map, workshopped with the design team team and GRC, helped identify key moments in our users’ movement through the website that our designs would support. We also used this artifact to further refine our proposed structure and content for the website.
To foster collective ownership of the design process, I proposed for our team members to individually explore wireframe design concepts for the key pages we identified, before bringing our ideas together in a Sprint-inspired dot voting workshop.
Through this workshop, we arrived at a consensus on design ideas to anchor the first set of consolidated low fidelity wireframes we workshopped with GRC.
With a collective idea of how we wanted the website to look, I helped designers divide up responsibility for progressing different key pages through future iterations and higher levels of fidelity. The team adopted an MVP-style prioritization mindset, as I facilitated a workshop to collectively determine our requirements and nice-to-haves for the wireframes we were creating based on the needs we had identified with GRC.
To guide the iterative process of refining our low fidelity concept designs into high fidelity prototypes, I leveraged my design systems background along with a careful approach to feedback to ensure our designers learned through creating quality designs.
To foster consistency, reuse, and collective UI decisionmaking, I advocated early on for our designers to approach their wireframes with a systems mindset. In addition to sharing design systems theory and examples for these newer designers to build context in this space, I helped them gather the resources to start creating our own website-sized system. Our system consolidated design decisions on spacing, type, grid, and color through design tokens, and also included simple and complex UI elements. Atomic design principles in particular were useful for our designers to understand how different parts of the system worked together.
Over the course of this work, I helped guide designers’ focus to important details like accessible color contrast and interactive states, supplying educational resources along the way.
The systems work evolved organically into a color workshop with GRC, where we applied different color palettes to the website to help gauge which color set best matched the organization’s identity.
As designers iterated on their pages, we used regular partner review meetings and team check-ins to provide constant feedback. For our meetings with GRC, I advised our designers on some best practices for presenting ideas and gathering actionable critiques, including structuring meeting time and asking effective questions. In the team sessions, I empowered designers to advocate for their decisions and critique across different parts of the project, providing actionable resources for them to learn from as they incorporated key design principles.
After our wireframes passed a final team review, the designers transitioned into helping our developers build the pages on GRC’s Wix website. I helped the team establish targeted development timelines, truing back to our MVP delivery priority list to help us allocate time to key features. Thorough developer handoff notes helped smooth the transition from wireframes into webpages.
The team structured this final development effort around scalability and longevity for GRC, generating a style guide and implementation guides to help the nonprofit’s team maintain the resources we delivered.
At the conclusion of our 10 week project, we delivered a new live look to the GRC webpage that highlighted their story and impact, designed around insights gained over the course of our team’s collaboration with the nonprofit. This webpage serves as the core of GRC's partnership with 17 community empowerment leaders and organizations, across a footprint that includes Atlanta, Chicago, and Kansas City.
We also documented our design decisions in a style guide to serve as the foundation for GRC’s future implementation of new webpage content.
Our design team showed tremendous growth through this project, exploring new areas, learning to apply design concepts, and working together to produce quality deliverables. At our final project presentations to the Develop for Good organization and GRC, the work the team had performed received broad positive feedback. I’m proud to have mentored this team through a successful nonprofit partnership, and look forward to applying my experience as a mentor to more groups in the future.
