KINGS TEAM STORE

100 Black Men of Chicago

A Platform that Connects the Organization

TimelineJune 2023 - July 2023

Tools Figma, Optimal Workshop

RoleLead UX/UI Designer

Team MembersPruthvi Kumbargeri, Kisha Lipscomb, Andrew Thomas, Mandy Wong

100 Black Men of Chicago is a non-profit mentoring organization that aims to improve the quality of life and enhance educational and economic opportunities for underserved youth in Chicago and is affiliated with the national organization 100 Black Men of America.

Live Site ↗

01 / Overview

ProblemStreamlining communication and reaching all participants, especially with time-sensitive information. Currently, there is no central communication platform for the organization.

SolutionA mobile app would provide an efficient and scalable solution to communicate with parents and mentees, support their mentoring program.

02 / Stakeholder Collaboration

Methodology

As a group, we fleshed out our UX research plan, which included a literature review, competitive analysis, and user interviews with usability testing.

Competitive Method Analysis

We then conducted a competitive audit to familiarize ourselves with other mobile applications that feature events and communication between users. The apps we chose: MentSpot, GroupMe, and MentorCity.

User Interviews

A series of in-depth interviews were then conducted three members and one parent to further identify pain points, frustrations, needs, and desires with existing products.

The research showed that a streamlined communication platform is necessary to replace the currently scattered methods used, such as email, texts, and GroupMe.

‍Our goal was to identify patterns and pain points in the current experience and discover how each user type can more efficiently and easily operate through their user flows.

03 / Defining the Users

After conducting user interviews, all the participants responses were synthesized to identity themes, opportunities, and features.

User Personas

We clarified the two main user types.
1. Mentor / Site Lead
2. Parent of mentee

USER PERSONA #1
Mentor/Site Lead

USER PERSONA #2
Parent

User Flow

We decided to create separate user flows: one for a Member and another for a Parent.

USER FLOW #1
Member Creates an Event

USER FLOW #2
Parent Responds to Event Invite

04 / Ideate

To kick-off the design process, we began with a card sorting exercise and developed a site map to identify and organize essential features. Quick sketches helped me get ideas on paper to establish which elements were necessary for each screen. A low fidelity prototype was then created for initial user testing.

Card Sort & Site Map

We sent participants the the Card Sort through Optimal Workshop. We then used the results to build a site map.

Site Map

Wireframes & Low-Fidelity Prototype

Using the feedback and insights gained from research and analysis, wireframes and a low-fidelity prototype were created to begin user testing.

05 / Prototyping

Based on insights from the initial user testing of the low-fidelity prototype, we made adjustments. I then translated these improvements into high-fidelity wireframes and created a prototype to reflect the finalized design direction.

We confirmed both the feasibility for development and received approval for each proposed solution.

Establishing the design system

After aligning on the overall visual direction, we established a design system to maintain consistency across all screens and streamline the development process.

High-Fidelity Prototype

The videos below demonstrate the features we designed and presented in our final handoff client meeting. Each feature below was driven by research, client feedback, and user testing.

MEMBERS
Creates an event and adds to calendar

PARENT
Accepts RSVP, updates RSVP count, and adds event to calendar