* I am not affiliated with NationBuilder in any way. I'm just a fan of the work they do.
NationBuilder is the antidote to community organizers' woes. Popular with political candidates and nonprofits, it's a Community Organizing System-- think Salesforce meets Wordpress for community organizing.
While it's been around since 2009, NationBuilder doesn't have a mobile app. Its highly customizable suite of tools is difficult to fit in your pocket. I decided to take a stab anyway.
I assessed the content structure of NationBuilder, reorganized the subpages, and build a clickable wireframe prototype to illustrate the first two layers of navigation.
- Card sort
- Wireframing (Sketch)
Revisiting the NationBuilder Information Architecture (IA)
Closed Card Sort
In this provisional card sort, I gave my user five main categories to work within: Communication, Main Dashboard, People, General Settings, and Website. My goal was to understand where cards within the main categories could be grouped, combined, or eliminated.
I compiled the new card sort navigation, adjusting it in a few areas where my sorter misunderstood the card meaning. Post-adjustments, I noticed a few things:
- On the web version, there are multiple routes to access the same content across categories. This doesn't need to be the case for mobile.
- Within each main category, subcategories exist that could be merged or nested together rather than presented as a flat hierarchy.
To keep things simple, I focused on the core features of NationBuilder, ignoring add-ons. I developed a new navigation structure that minimized duplications and grouped like things together.
Designing the App
My goal was to create quick-view states for all information that could be useful on the go, and provide more robust functionality on lower screen levels. I hypothesized that users on the go might want to:
- View supporter activity in real time (use case: supporters tweeting live at an event)
- View their assigned followups due that day (use case: remind themselves of tasks while OOO)
- View a data visualization of their organization's growth (use case: to be able to quickly reference growth figures in a networking scenario)
- View and search supporters and point people (use case: to brush up on your top supporters' info prior to a fundraiser)
- Add/edit posts and events to your website (use case: posting a photo or video live from your event)
- Tweet at your followers and view their social activity (use case: live-tweeting an event)
I applied my navigation structure to five different screens.
Based on my hypotheses, I developed five screens that showcase the most vital information first. At every stage, the user is able to take an action on the top right corner; whether they taking note of an interaction with a supporter, adding a quick blog post, or reminding themselves to follow up with a prospect.
Test the prototype with several NationBuilder users, and revise accordingly.