Relational Organizing App

Client: More Equitable Democracy; GPS Impact

Role: UX Designer

Duration: 20 hours

Description

Relational organizing is a political organizing technique that relies on leveraging the strength of people’s personal relationships to get their friends and family involved in a cause instead of impersonal methods such as canvassing, cold calling, or direct mail. GPS Impact approached me with a framework for a digital platform to link large relational organizing efforts together from top-to-bottom, but the experience needed a lot of work to become useful.

 

Check out this quick video I animated about the project!

(AfterEffects, InVision App, Sketch)

The Problem

Using an extremely limited amount of work hours, take a bare-bones framework for a desktop-oriented relational organizing platform, plus the information I could gather in a 1-hour kickoff meeting with the developer, and create a concept and clickable prototype that would win a contract from a potential client to build out the complete application.

The Solution

A mobile-first application concept focused on integrating top-down task support with common communication platforms that street-level organizers use to communicate with their friends and family. This would streamline the primary and often tedious functions of relational organizing to a few simple clicks that could be executed for big impacts in the little moments when we all tend to check our phones.

 
Justin impressed me most with his ability to problem solve and organize tough user experience obstacles into a neatly designed workflow.

His designs and maps were not only easy for our clients to appreciate, but created understandable and thoughtful goals for me and my development team to recognize and code.

– Joshua Mitchell, Lead Web Engineer - GPS Impact
 

User Contexts

Top-down task support: From global movement organization to street-level organizing

As Jake explained the organizing support structure, I sketched the relationships of users and their spheres of control to illustrate and agree upon the brief:

The client runs a "global" campaign made up of local organizations that recruit members to organize their friends and family, and there are three tiers of users. Every user is potentially a local peer-to-peer organizer, but some also support and coordinate small groups of organizers and a select group (the client) needs to coordinate and support the entire movement.

Whiteboard sketch breaking down user-level scopes during briefing

(Markers)

Cleaned up breakdown of user relationships.

(Adobe Illustrator)


Interface Wireframes & Comps

As Jake is not only the developer but also a super-user, he was able to answer many of my questions about user needs and relationships. From there, a primary push I made was to concept the application primarily for mobile given the assumption that most users interact with their peers either face-to-face or via social media and cellular messaging platforms.

Based on our discussions I built out working lists of user needs for each level of organizer and from there I quickly began prototyping a new interface schema in Sketch and making it interactive with InVision.

 

Initial pass at top-level user needs based on developer requirements.

(Adobe Illustrator, OmniGraffle)

Elevated-fidelity functioning wireframe screen for top-level and all-teams dashboard for Global Organizers.

(SketchApp, InVision)

Top-Level Organizer scope

Visualize Global and Regional Organizing effort trends, afford drill-down support to see what teams need more resources and support

Jake had indicated that data visualization would be important going forward to allow organizer-leads to monitor progress and readily identify teams or individuals that may require extra care and support. Not only are high-level global and team metrics prominent, each team and organizer is laid out on their own cards with key metrics allowing a lead to rapidly search or scroll to rapidly locate any areas that need special attention.


Initial pass at local lead user needs based on developer requirements.

(Adobe Illustrator, OmniGraffle)

Elevated-fidelity functioning wireframe screen for local-lead organizer team dashboard.

(SketchApp, InVision)

Team-Level Organizer scope

Rinse and Repeat: Visualize Team Organizing effort trends, afford drill-down support to see which organizers need extra support

Jake had indicated that data visualization would be important going forward to allow organizer-leads to monitor progress and readily identify teams or individuals that may require extra care and support. Not only are high-level global and team metrics prominent, each team and organizer is laid out on their own cards with key metrics allowing a lead to rapidly search or scroll to rapidly locate any areas that need special attention.


Initial pass at organizer-level user needs with a concept building for the working interface concept.

(Adobe Illustrator)

Elevated-fidelity functioning wireframe screen for top-level organizer all-teams dashboard.

(SketchApp, InVision)

Peer-to-Peer Organizer scope

Support quick execution of tasks with integrations into common messaging platforms

Here, a user adds the friends and family they are responsible for and, now leveraging the role of mobile devices in society today, can import social media and contact details. This way organizers can take direct and immediate action on prompts and action items through whatever channels they naturally interact with their peers.

This functionality is one of my biggest contributions to the project as it transforms the prototype that Jake had built from a passive checklist into a powerful tool that streamlines the entire organization dynamic. Organizers can pop into the app any time and create social and political change in minutes they might’ve otherwise spent mindlessly scrolling social media!