Contact Us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right. 


123 Street Avenue, City Town, 99999

(123) 555-6789


You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.


NationBuilder: an IA Study & Mobile Mockup

Lucy Dotson

* 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 
  • Sketching
  • Wireframing (Sketch)

Revisiting the NationBuilder Information Architecture (IA)

Closed Card Sort

 Susan, mid sort. 

Susan, mid 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:

  1. 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.  
  2. 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. 

Original IA

New IA

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:

  1. View supporter activity in real time (use case: supporters tweeting live at an event)
  2. View their assigned followups due that day (use case: remind themselves of tasks while OOO)
  3. View a data visualization of their organization's growth (use case: to be able to quickly reference growth figures in a networking scenario)
  4. View and search supporters and point people (use case: to brush up on your top supporters' info prior to a fundraiser)
  5. Add/edit posts and events to your website (use case: posting a photo or video live from your event)
  6. 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. 

  People & Organizations screen

People & Organizations screen

  Communications screen. 

Communications screen. 

  Main Dashboard. 

Main Dashboard. 

  Website screen. 

Website screen. 

  Settings screen. 

Settings screen. 

Next Steps

Test the prototype with several NationBuilder users, and revise accordingly.