Project Overview

Team

Victoria Cope (project owner), Jason Chou (scrum master), Mariah Jacobs (build master), Josue Figueroa (UX researcher), Wan-Ting Ko (UX researcher)

* Everyone on the team wore developer's hat and did pair programming to bring the design to life.

Client description

Southwest Florida Community Foundation (aka: Collaboratory) is a non-profit organization that exists to help fund and connect other organizations within the SW Florida region to work on social, environmental, and other issues affecting its constituents.

Project Description

Our clients needed a communication hub and centralized location online to enhance connectivity outside of Collaboratory’s physical space. Particularly in the COVID era of ambidextrous communication, this application needs to work symbiotically with in-person activities to supplement information-sharing and new means of connection.

Stakeholder Description/Persona

Community changemakers are already working hard to improve their neighborhoods. Through connecting with various stakeholders during our UX research process, we’ve identified that these individuals needed a tool to help them spend less time searching for vital information so they could focus on their own causes. The goal was to have a simple tool that could be integrated with their current means of communication and daily work flows. They also needed a hub that allows them to cross-reference their in-person interactions to engage in deeper connections once the initial introductions have taken place.

Product Goal

Aligning the information provided to us regarding our clients, community stakeholders, and the project needs, we wanted a product goal that runs parallel with future Collaboratory plans and community needs. We determined that our specific goal is a working prototype of a web-based application that includes channels, event details and directories to connect organizations and individuals within the SW Florida region based on similar interests and needs across our user base.


Agile Project Management

Our Product Backlog

The idea behind our agile project management is that after each 2-3 week sprint, we can have a potentially shippable product. It also helped us reduce the time of getting held on one issue and delaying the whole development process.

We used Airtable to hold our user stories and track progress during sprints to coordinate application development. We created a customized card layout for displaying key information regarding features we created in our Product Backlog. At the end of every sprint, we held a sprint meeting with all team members and the client to demonstrate progress and plan next steps. All team members also participated in standups twice every week to report updates.

logo
Project management tool

User Research

User Interviews

After discussing with Collaboratory the issues they were having with connecting organizations in the SW Florida region, we conducted remote user interviews where we asked volunteers from these organizations about platforms/tools currently used, communication preferences, and pain points. These interviews allowed up to better understand and identify what needs were not being met.

logo
Interview findings consolidated in Miro
Comparative Analysis

Based on prior conversations with Collaboratory, we identified features we felt could be used in our collaboratory space and began to scope features we felt were appropriate for this project. We grouped features into “must-haves” and “nice-to-have” and reviewed tools previously used by Collaboratory to see where these tools fell short or succeeded. We then consolidated our findings onto a Miro board to keep track of which tools received positive feedback in terms of our “must-have” and “nice-to-have” features. These findings facilitated conversations among Collaboratory and our team members as we decided which features we wanted to prioritize implementing for our application.

logo
Comparative analysis
Additional User Research

We used our comparative analysis to design wireframes of our application which are discussed in more detail in our User-Centered Design section.


User-Centered Design

Wireframes

Based on insights gathered from comparative analysis and stakeholder interviews, we came up with 8 key features and created wireframes to visualize our ideas.

logo
Wireframes
Mid-fidelity Prototypes

We built a temporary design system for the project and pushed wireframes to mid-fidelity prototypes. Design decisions were made based on stakeholder feedbacks.

logo
Mid-fidelity prototypes
User Flows

To communicate the design solution and development plans with stakeholders, we created user flows. This also served as a guide for the team to flesh out the design with code.

logo
User flows
Usability Tests & Interactive Prototypes

We conducted 3 usability tests with target users to validate the solutions we came up with. Interactive prototypes let users get a feel of how the real product works.

logo
Interactive prototypes used in usability tests

We encouraged usability test participants to think out loud during the tests and asked them to fill out post-test questionnaires. This helped us collect feedback for future iterations.

logo
Usability test findings

Technology Stack

Full-Stack Development
logo
Full-stack development

Project Demo

Marketing video for the MVP
Marketing video for the Collaboratory Online project