with Blueprint, Tech for Nonprofits

National Black Justice Coalition


National Black Justice Coalition, or NBJC, is a civil rights organization based in Washington, D.C., dedicated to empowering Black LGBTQ+/SGL people and ending racism, homophobia, and stigma, through federal public policy advocacy, coalition building, research, and education.

I designed a platform 0-1 to further NBJC’s community organization efforts, promote events, and otherwise be a general resource in the Black LGBTQ+ space.


Role • Team

Product Designer (Sole)

Timeframe
Sep 2020 - Jun 2021 
Skills
User research, Product strategy, Visual Design, Interaction design, Usability testing
Tools
Figma

1. Background and Motivation        1. Background and Motivation          

When NBJC reached out to us in mid 2020, America was in the middle of a tumultuous time of protests, angry and frustrated over police brutality and killings of people of color.

There was no existing platform or tech that was perfect to create what they envisioned in a new resource for communiity organization, participation, and to promote and continuously update a living record of Black, LGBTQ/SGL focused organizations.

So,
How might we make it easier for NPOs and their communities to build and organize effectively within the Black LGBTQ+ space?




2. Defining and Understanding the Problem(s)    
           
USER RESEARCH

Establishing why needs were not met through existing solutions designed for NPOs



01. Error Analysis: existing platform problems
First was a competitive audit and analysis of other potential solutions on the market.



👥 Spreadsheets and Airtable

  • Cannot easily discover and add new orgs
  • Difficult, annoying to manually update and keep track of
  • As database grows, hard to manage and effectively use information

👥 Facebook Events & Eventbrite

  • Not comprehensive LGBTQ+/SGL listings or database of organizations
  • More effective for listing one-off events, not learning about an org and their activities


👥  Guidestar


  • Is a “directory” of NPOs, but not community oriented
  • Paywalled and not accessible to the masses and public
  • Not an interactive, network type of platform




02. User Interviews
Figuring out user needs progressed to a logical understanding of features to tackle.




Determining user needs

  • easily accessible to public and simple to navigate
  • powerful moderation features
  • room for growth and flexibility

MTP Feature Gameplan
  • Organization registration
  • Moderator and Admin 
  • Organization list and search





3. Synthesizing Insights into Ideation  


ANALYSIS AND SYNTHESIS

Distilling research and interview insights into user needs




User types and personas



Organizations  



Wants to:
  • Advertise and promote
  • connect with other orgs and share resources
  • reduce time spent on using platform
 


NBJC Staff



Want to:
  • Easily moderate and select partner orgs
  • Approve events 
  • Access settings for users


Public Users



Want to:
  • Discover organization info and events
  • View further organization details





User flow mapping + Scoping

Mapping out the intended user flows within each user solidified the scope of our goals and what steps or features would be essential in the MTP.







4. Design  Process        4. Design Process    


DESIGN, CRITIQUE, AND REPEAT

Designing core features for admins, partner orgs, and the public that will actually be used

All the above research insights, principles, and goals now guided the next steps.

Working each feature through different stages, I identified strengths and weaknesses between design variations and converged towards “winning” choices that aligned with our design goals and principles.


FEATURE ONE - Iteration
NBJC Moderator + Admin Dashboard

After initial sketches, I began to flesh out and iterate on the low fidelity wireframes.


In mid fidelity, I focused on improving on these areas of readability, flexibility, and encouraging thoughtfulness:








FEATURE TWO - Iteration

Organization (Partner) Application Portal









FEATURE THREE - Iteration

Organization Profile Page








FEATURE FOUR - Iteration

Map, Search, and Events







  



5. Final Designs               5. Final Designs               

How did the design principles I defined, and feature iterations, actually translate into the final product?


FEATURE ONE

NBJC (Staff) Moderator Dashboard


What the User needs: Preserve information accessibility and density, but keep everything legible and highly agile in interaction.


Solution:
  • see most important info quickly “at-a-glance”
  • encourage thoughtful evaluation of organizations
  • better, seamless reading experience for staff








FEATURE ONE AND A HALF

NBJC (Staff) Admin Dashboard



What the User needs: have fine-grained control over all areas of the tool in a simple interface without complexity while managing NBJC staff moderators


Solution:
  • provide big-picture control over the platform as it scales
  • ability to change org requirements and questions for admission as time passes, built for longevity







FEATURE TWO

Organization Application & Dashboard

What the User needs:  feel confident fully representing a large variety of missions and orgs, reducing the amount of time spent on the platform

Solution:
  • make sure NPOs know “where” they are in the process
  • simple copy and flow reduces complexity and time spent
  • flexibility in the form to accommodate a wide variety organization types and backgrounds








FEATURE THREE

Organization Profile (Edit & Public View)




What the User needs:  Quickly set up profile and edit information without any extra hassle


Solution:
  • guiding orgs w/ modals and helper text
  • reduce unnecessary and confusing “in-between” screens
  • ease of information accessibility / visibility
  • prioritizing most essential info about orgs






FEATURE FOUR

Map, Search, Events



User needs:
 Easily discover and search for organizations, movements, and events to join.

Solution:
  • tailor search results very granularly
  • encourage exploration and discovery of new orgs or events
  • focus on the main purpose of the site: search for or join








    6. Implementation &  Reflections 

    Preparing to ship / handoff
    • Reorganizing and prioritizing last efforts + bugs
    • Making and cleaning up handoff Figma
    • Writing documentation of project and usage







    Expected Impact at Time of Handoff
    • app to be linked as external site on NBJC.org website and promoted to NBJC affiliates
    • potentially 10s-100s of thousands of visitors!
    • Unfortunately, we handed off before NBJC’s team began full integration, so I don’t have access to launch or current usage stats  









    Reflections
    Things I learned

    • importance of frequent communication 
    • clarify expectations for all stakeholders
    • design with end users in mind
    What I’d do differently
    • prioritize user and usability testing
    • standardize design system earlier on in the process
    • use more design thinking frameworks in early stages



    Wanna get in touch? I’d love to chat through email, or say hi on LinkedIn