Seeing a need in the current marketplace for a web application that addresses the need of better connecting non-profits/NGOs with corporate investors, I came up with the idea for the Communability Platform, and acted as the Project Manager, User Researcher, Interaction Designer and UI Designer. This case study was an independent capstone project in my Designlab UX Academy curriculum in June 2017.
Communability serves as an online connection platform for community projects and socially responsible companies looking to invest. The websites goals are not only to provide an easily searchable platform to search for projects nationally, but to help community projects receive the funding they need.
Users will access the platform to create an account, view or submit projects, and connect with individuals who are either interested in investing in a project or hoping to receive funding from an investor. An important necessity was to have the ability to filter by project type and location.
I followed human centred design and lean UX design thinking process to make sure that my design decisions were supported through user research and feedback.
Empathize & Define
As the sole designer and manager of this project, a clear research plan was written to provide project focus and highlight research goals. The research plan was written in consideration of building empathy with the websites users.
My approach to this problem began with identifying the current needs in the market to better understand challenges, frustrations and behaviours from both a community project and corporate side. I wanted to understand how companies currently find community projects to invest in to uncover users habits and behaviours.
I started off by conducting a discovery phase based on existing secondary research, a review of corporate social responsibility requirements in Canada, and a competitive analysis in the current market. This discovery phase helped identify and prioritize the key areas of focus for user research.
In-person and remote user interviews were then conducted to identify current usage trends and behaviors, knowledge gaps and opportunities, and determine priorities from both the community project and investor perspective. After the interviews were conducted, I sent out an online survey to validate quantitative data for both the corporate and community side.
Leveraging the user personas, and synthesized data from the user research phase, I created a sitemap, user flows and wireframes.
Having organised the content into categories, I create a sitemap to show the relationship between the content on the site.
I then used the sitemap to see how users would complete essential tasks, and mapped these tasks out with user flows to identify any opportunity for additional streamlining of task completion.
Once I hashed out the overall structure and navigation patterns of the site, I drew up the product’s blueprints, or wireframes to illustrate the overall layout of the product interface.
You can view all Wireframes here at the Invision Link:
For quick prototyping, I used InVision and Usability Hub to create low fidelity prototypes to test user flows and iterate the wireframes quickly and efficiently. I conducted in person user-testing on a laptop with four different users. Feel free to try the InVision prototype.
Test findings were compiled into an affinity map which served as a guideline for our next round of design iteration. I distilled the next steps for the wireframe revisions under “Changes to Implement”.
Reflection and Next Steps
This case study was a capstone project in my Designlab UX Academy curriculum. I had a limited time constraint of two weeks to complete most of the deliverables, as well as creating a project brief and defining the project problem.
However, I was able to experience the challenge of having a lack of resources, and learned how to manage my time, adjust my work, and prioritize in order to accomplish specific goals but still produce results that were high-quality within my given constraints.
My next steps for this project would be to roll out all of the UI design to approved wireframes, create another visual prototype to test the designs, and iterate on the designs as necessary.