To brainstorm, research, and design a prototype of a responsive web platform that provides seamless services to non-profits who wants to find the best-fit peers and efficiently collaborate with them.
Yumei Jin, Helen Kim, Elizabeth Onstwedder, Teja Talluri
Brainstorming, Personas and Scenarios creating, Story Boarding, Wireframing, Navigation Map designing, User testing, Mood Board creating, High Fidelity Screen Designing.
Problem and solution
Non-profits want to work together to further their goals and create the most value in their respective communities and through collaborating with each other, they hope to increase their exposure in communities outside their domain, pool their resources to make a greater impact, and show evidence of impact to gain further funding.
However, there are two main problems that stop nonprofits from working together:
- it’s hard to identify an appropriate organization to work with in terms of similar values and compatible budget;
- it’s hard to manage the logistics and communication of holding an event together.
Our team envision to design a service, CommonSpace, that addresses all of these concerns by bringing everything together in a responsive web platform that’s easy to use on your computer or on your phone.
With CommonSpace, organization administrators can now:
- browse and match with appropriate organizations;
- manage logistics of different collaborations;
- handle communication with other organization administrators in one place without having these processes scattered on multiple services and devices.
We expect that our solution will enhance collaborations among non-profit organizations by providing a platform for them to instantly collaborate, efficiently planning, and increasingly exposed in public.
Research and design process
Brainstorming of Personas and Scenarios
When we first created our personas and scenarios, we originally covered the main stakeholders involved in non-profit work: administrators of non-profit organizations, investors and sponsors, and volunteers. However, based on feedback from our peers, we zeroed in on the experiences of administrators of non-profit organizations since they’d be the primary users of our solution.
Final Personas and Scenarios
The following personas and scenarios reflect the final personas and scenarios that were used in our presentation.
For our features clustering, we categorized possible features under:“communication”, “collaboration starting point/information”, “task management”, and “time management”.
Based on feedback from the previous peer critique regarding our personas, we decided to create storyboards that would highlight the organization administrator’s experiences with our solution and focused on how multiple users would interact with each other in this space.
Wireframes and Navigation Map for user testing
Based on our selected storyboard, we figured out the essential user flow, and created the following wireframes and navigation map for usability testing.
User Testing Results
We tested our navigation map with 5 users, and received valuable feedback. We then extracted insights from our user feedback, and addressed solutions to these insights. Below are the insights of our user feedback and the solutions we incorporated into our next design iteration.
- How we addressed it: We removed the calendar because we realized the time management aspect of scheduling was handled through the timeline in the to do list.
- How we addressed it: We added a label to each to do item to indicate which collaboration it was associated with.
- How we addressed it: We added a line of text under the heading giving some more detail, e.g. “add or edit event related tasks”
- How we addressed it: This seemed to be likely due to the low fidelity nature of the prototype as dropdown menus and text entry weren’t fully implemented, so we did not make any changes.
- How we addressed it: We decided that providing some suggestions for what to address in the message would help make it easier for the receiving organization to read, and therefore make them more likely to reply, so we didn’t delete the prompts entirely. However, we shortened them significantly to make them more readable.
- How we addressed it: We added a line of text noting that the organization would receive a message.
- Observation: People were confused about how the to do list and calendar related to each other.
- Observation: Users weren’t sure how they would know which collaboration a to do item was for if they were collaborating with multiple organizations at once.
- Observation: Users weren’t quite sure what the dashboard items were for, e.g. when asked to add a task and assign it to someone, a user said “to do list seems like it should be my to do list, but I don’t think it will be in search or calendar so I guess I’ll click to do list”
- Observation: Users expressed general confusion over editing to do items, especially in how to change the person responsible.
- Observation: Users found the prompt questions in the contact page too long to read easily, and some users felt too constrained by the questions.
- Observation: When filling out the form to contact another organization, some users weren’t sure how the message recipient would know it was them and how the receiving organization would reply to them (e.g. they weren’t sure whether to leave a name or email - they don’t need to since it goes through the platform messaging system).
Before we started gathering resources for the mood board, we brainstormed and voted on several adjectives that fit our project environment and goals. Once we had a set list of adjectives that we wanted to convey, we were able to create the mood board with purpose.
Together, we brainstormed these associated Adjectives as the best descriptions of the value of CommonSpace:
Clean / Clear
Based on our mood board, we decided to build the below style guide to guide the overall sense of CommonSpace as we think it best reflects the value we want to deliver to our users.
Screen Design iterations
Changes in the login dashboard
Initially, the design of the login page had a solid color background, the product logo and the login/registration form. In an effort to match recent web design trends, we decided to pivot to a full size image background and include a small blurb explaining the product on the login/registration page.
Changes in the overall design
Initially, the design of the login page had a darker palette which was ultimately switched for a lighter, cleaner design to fit the visually style and mood of our solution space. When we color-coded items in the revision, we were reminded about using color purposefully so each of the relevant pages should have those colors involved to bring a sense of continuity to the design choices. In the final design, the color coding remained but was made much more subtle to indicate that these were supposed to be point colors for each sub page. Other elements such as a product logo and consistent typography was also implemented in the final iteration. Finally, the “search” function changed to “browse” to better suit the different motivations behind why an administrator might be looking for another organization.
The following screens are the final web screens for the final presentation and interactive prototype. These screens follow Heather’s procedure for browsing, finding, and reaching out to Rebecca from Galvanize.
The following screens are the final mobile screens for the final presentation and interactive prototype. These screens follow Rebecca checking her messages and replying to Heather.
The following screens are the final mobile screens for the final presentation and interactive prototype. These screens follow Heather adding on a new to-do and Rebecca checking her updated to-do.
Final Interactive Prototype
▸ Final Web Prototype: https://xd.adobe.com/view/e7b7129b-a738-43a3-ba12-620a105731ae/
▸ Final Mobile Prototype: https://xd.adobe.com/view/e60aa417-bfb3-473e-88a6-8fddec6a5208/