CommonSpace

Overview

  • Time: 4 weeks
  • Team: 4 people
  • Role: user experience design
  • Methods used: clustering, personas, prototyping, think-aloud
  • Tools used: Adobe XD

How might we help nonprofit organizations collaborate more effectively and efficiently? This was the problem our team set out to solve. Nonprofits struggle to find organizations with similar values and budgets, and when they do find an appropriate organization to work with, it’s difficult to manage the logistics and communication of a joint event.

Introducing CommonSpace, a responsive web platform that makes it easy for nonprofits to search for other organizations, contact them about working together, and manage events collaboratively.

 

Ideation

Our starting point for the project was a packet of research, including interviews with Pittsburgh nonprofit employees. Based on this, we created personas and scenarios to think through user needs and design opportunities. The key things that stood out to us in the research were the difficulty nonprofits had finding appropriate organizations to collaborate with, and the challenges of running an event together. 

Personas
feature clustering
Feature clustering

We brainstormed possible features for our web platform, and clustered similar features together. The categories that emerged were communication, collaboration starting point, task management, and time management.

 

 

 

 

storyboards
Storyboards

Based on our features brainstorming, we created storyboards to explore different potential features and interactions. Through this, we realized that our primary users were likely to be nonprofit administrators or event coordinators. We also narrowed down features to include only those we thought were necessary for a minimally viable product: 

  • Search (find an organization based on criteria)
  • Contact (easier to contact organization directly in the platform than switch to email)
  • Collaborative to-do list (manage joint events)
  • Shared calendar (manage schedule)

 

 

 

 

Wireframing, Prototyping, and Usability Testing

Having decided on a preliminary list of features to include, we created wireframes and a navigation map of the site. 

We used these wireframes to make a low fidelity digital prototype, which we then conducted usability testing with. We conducted think-alouds with four Carnegie Mellon students, who were asked to complete select tasks as if they were a nonprofit admin while thinking aloud.

user testing results
Results from user testing

User testing was very helpful, and we made several changes to our site based on the results. Most significantly, we removed the calendar function, because the distinction between the calendar and the timeline in the to do list wasn’t clear, and time management and scheduling was better handled through the timeline. We also added labels on to-do list items to indicate which collaborative event they were part of, because we saw users were unsure how they would know which collaboration an item was for if they were collaborating with multiple organizations at once.

 

Visual Design

Our screen designs moved from a dark palette to a lighter, cleaner design to better create the positive and approachable feel we aimed for the site to have.

  • Initial dashboard design (1/3)

 

Final Design

Our final product was a high fidelity interactive prototype for both laptop and phone.

  • Login page (1/6)

 

  • The user opens the platform on their phone (1/3)

 

Next Steps

If we were to take this project further, we would want to conduct another round of usability testing with our final design to see if further improvements could be made. It would also be nice to expand the feature set to include collaborative event budget managing, and coordinating volunteers.