T.C.M.A.P.
Mutual Aid Map - Volunteer Work
CHALLENGE
Provide UX design and research support with a grassroots project startup focused on providing aid and distribution information in real time to local spaces, organizations and individuals affected by recent events. Working alongside a dedicated group of volunteers and various individuals, many of whom are local professionals working in software development, project management as well as other roles and adding a focus on user experience design, research and user interface design.
SOLUTION
I directed and managed the User Experience design and research focus on the project as one of the only UX designers and researchers involved in this grassroots project. I provided daily contributions around designing features, interaction design and user interface components to better provide relevant needs and adding features to the site. I also provide any additional consulting or guidance as they begin implementation on user research and feedback efforts.
T.C.M.A.P. - Mutual Aid Map
The Twin Cities Mutual Aid Map is a website and tool created by the Twin Cities Mutual Aid Project group. It was built with the goal of providing aid and mutual relief efforts to our community and those impacted by recent events. The map displays and provides live and up to date information on various locations, organizations and spaces or groups that either currently need relief supplies or are seeking efforts to distribute these supplies as well as volunteers and/or donations.
My efforts have focused specifically around the UX and UI design needs the group has expressed they need assistance with, alongside general efforts. With the recent tragic murder of George Floyd, combined with the COVID-19 pandemic, I wanted to provide efforts to help that did not include gathering in large crowds. I found this group and the project early on in their work through Prime Academy’s alumni Slack channel that had a post seeking any help or UX effort from interested individuals. I jumped at the opportunity to get involved and provide my time and skills to those in need around our community, focusing on any efforts to rebuild, restore and empower our community.
User
Primary User
Relief aid and service providers - the sites, locations, groups and/or organizations (not individuals or community members) that are distributing or receiving supplies, donations, providing aid and services to those in need as well as accepting donations for rebuilding purposes and efforts
Aid and service recipients - these individuals, groups and/or organizations are not defined to one specific type of user group or persona, but rather encompass a broad group of the general public and people or organizations which seek goods and donations and utilize the site for finding resources, relief supplies and services and general aid
Helpers and ‘ground’ workers - volunteers on the ground providing efforts to distribute materials, goods or facilitate the management with sites and are typically varied in their daily tasks or actions
Designing public outreach flyers for TCMAP
I helped to make these flyers for the volunteers with TCMAP who work on the ground both distributing aid and materials to sites as well as communicating with these locations a a point of contact on changing hours and relief aid needs.
Specifically I provided ideas and revisions for the overall design and shared with the Slack channel working on the marketing and communications efforts.
Additionally I created the icons for the flyer as well as adding feedback to ensure the layout and visual design of the flyer has appropriate hierarchy, consistency and balance between the design and text.
We translated these flyers into seven languages, with the aim to continue translating them as different populations and organizations needs grow and evolve. They’re printed and ready to be distributed for volunteers, in multiple languages and will provide TCMAP with an effective process to continue helping our community and individuals who need or want to be involved with this effort and tool.
Check out the flyers in 10+ languages on the TCMAP website and flyer page.
Creating quarter-sized handouts for print and social media
Additionally I helped to create a quarter sized sheet handout that would accompany flyers as a hand out for anyone interested, as well as possibly being used for social media posts to raise awareness for TCMAP.
I designed the icons, general layout and was involved in helping to concise and clarify the text provided on this handout sized flyer. My current focus now is to create a few ideas around possible content TCMAP can post to raise awareness on social media or for organizations to include on their site and promote TCMAP as a free resource and tool that provides relief and aid support efforts around the Twin Cities metro area.
Designing a COVID-19 safety reminder for the mutual aid map
After other critical features were implemented, we agreed that we have to focus and remind all users and people involved of the health and safety precautions required as efforts are maintained.
This is a crucial need for the site and I was asked to design a small bar that would serve as this reminder for the desktop and mobile size browser (as the site is responsive and both needs are varied in the placement of the bar).
I designed the icons in Figma and Adobe XD, and worked deeper on designing vectors, icons and various components.
Designing and implementing a search feature for the map
The biggest need our group was hearing came from volunteers on the ground working to distribute and provide efforts to help locations was the absence of a search bar. This was requested by a number of volunteers and I took the lead to create, design and have the feature implemented.
You can see the first concept, the finalized design concept with a streamlined design, and then the live and implemented search feature that exists on the site today. This allowed users to reduce their time spent on the site trying to find their needs and allowed quick access to resources.
Search feature implemented and functional on the Mutual Aid Map
Designing and implementing UI accessibility-compliant features on the map
When I was first helping this group I initially went in and analyzed their color contrast ratio, simple labeling and functions and the most feasible improvements that once completed would comply with digital user interface accessibility guidelines. You can see the simple changes and request I put in on GitHub asking for these changes and colors to be updated. I also have been working with developers on various components on accessibility and have been using WAVE, a Chrome plugin that allows you to evaluate and check different website’s accessibility criteria it meets.
Future ideas and potential updates
As the site continues to grow and provide aid and resources, there are a few ways that I have thought about continuing the efforts and a way to possibly raise funds for the site’s translators, BIPOC organizations and businesses, etc.
I made a mock up of some tote bags with a version that would be able to specifically be made for June (while working on the project it was LGTBQ+ Pride month) and another ‘standard’ version with the logo on it available at all times of the year.
I have also started working on designing a new legend for the Mutual Aid Map so that it complies with accessibility guidelines and does not solely use color to indicate information and site specifics on map markers.
My update contains icons for each type of location and distinction as well as following the current TCMAP color scheme and design aesthetic. I’m still working on the final product but progress and the ‘latest’ design example is shown here.