Playground
Website design for a new, community based feature that connects volunteers with individuals and organizations in need.
Website design for a new, community based feature that connects volunteers with individuals and organizations in need.
The current method of connecting volunteers to organizations in need of help is via Discord server, which is difficult to discover and browse, and there is no application process to apply for help directly from Playground.
Add a section to the Vegan Hacktivist website that provides a central hub for browsing, applying for, and submitting requests for help.
View PrototypeUX/UI Designer
Figma, Photoshop, Procreate
4 Weeks
Kristen Granieri
Nicolas Yvan
The Vegan Hacktivists are a volunteer organization of skilled people who help individuals and organizations with their animal rights advocacy efforts.
Any requests they do not have time and resources for are made available to the 'Playground', which is a community of volunteers outside of the core group.
The Playground volunteers learn about and accept requests via Discord, which is where Playground operates.
In order to learn about or apply for open requests for help, somebody would have to join the Playground Discord server. This meant that the discoverability was low and accessing information had several barriers, such as potentially creating an account, or committing to joining the server with no opportunity to simply browse open requests, or learn more about volunteering with Playground.
Additionally, applying for help is done through the same form as applying for help from the Vegan Hacktivists, which may discourage smaller organizations or individuals who may not typically quality for help from the Vegan Hacktivists, but would for Playground, from applying.
Organizations and individuals need help with their projects, and volunteers want to help, but the current method of connecting volunteers and those in need is not easily discoverable, accessible, or browsable. This leads to fewer people being aware of the service, meaning fewer volunteers to help, and fewer organizations applying for help.
How might we make it easier for organizations and individuals in need to connect with volunteers who want to help?
In the next 6 months the goal of the new design is to:
Upon joining this project, some wireframes had already been created by somebody in the organization, many months ago.
After Kristen, Nico, and I spent some time developing these sketches into a mockup and evaluating it's efficacy in meeting user needs, I noted that there were a few opportunities for improvement in some parts of the design.
Namely, the option for those wanting to apply for help was easy to miss as it was just a tab in the header. Additionally, the hierarchy within the listing cards made them difficult to skim.
It was at this point that I decided to back, do more extensive research, and build a stronger foundation for this project to ensure we could build the best experience for the users of Playground.
Through interviewing stakeholders and researching the current user base, I learned that the target audience falls into two main categories:
And additionally, they
In order to more clearly understand and empathize with the needs of the users of Playground, I created personas.
Using my knowledge of the target audience, I decided to create one persona representing somebody posting to Playground, and one representing somebody who may wish to volunteer.
Creating a persona for each of these use cases helped me to create a design that would work for both types of users, as opposed to accidentally becoming focused on the needs of one group.
I conducted a competitive analysis to learn more about how other websites and organizations connect individuals with opportunities, specifically job search websites, and other websites that connect volunteers and in-need organizations.
Analyzing these websites gave me insight into how information can be organized to be easy to browse, skim, and be functional for both those looking for work and those looking for help.
Features such as search and filter, a strong hierarchy within listing previews or cards, easy access for those wanting to post a listing, and easy to locate information about the process are important factors in helping users (both volunteers and those in need of their help) get the most out of the experience.
The following potential solutions were identified to address user needs:
Integrate Playground into the Vegan Hacktivists website
Add an application process for requesting help from Playground
Simplify the process of browsing and applying to request
Create a central hub for learning about, applying, and volunteering
After revisiting the research, defining the problem space more clearly, and getting more specific about the user's needs for this project, I began to develop these ideas with sketches.
These sketches draw from the original wireframes that had been created earlier in the project and other elements from the existing website, but incorporate new elements such as a new landing page from which a user can select to view open requests or submit a request, a collapsable filter and sort, and a new layout for the 'open listing' and 'apply to help' page.
In order to integrate Playground into the existing website, the page will be added, and the navigation will be updated.
Playground is added in to the navigation bar as 'Get Help', and leads to the landing page. From there, a user can select 'View Open Requests' or 'Submit a Request'. Placing these two options on the landing page ensures that users from both groups (volunteers and those wishing to submit a request) are able to quickly and easily locate what they are looking for.
From 'View Open Requests' a user will be taken to a page displaying all open requests, and 'Submit a Request' will take the user to an application form.
After creating the sketches, I developed them into wireframes. I opted to keep the two-across card structure, because in during usability testing with the one-across in the sketches, users felt that having more posts visible on the page at a time made it easier and faster to scan the page for relevant opportunities.
An FAQ section was added to each page to help users feel more comfortable understanding Playground, and 'submit a request' and 'join the discord community' calls to action were added to the appropriate pages.
After completing the wireframes, I developed the designs into high fidelity mockups.
The style of the design follows the preexisting style guide and utilizes the design system that has been developed for the Vegan Hacktivist website. New elements that were introduced follow similar styles to existing elements, and are designed to blend in seamlessly with the colorful, blocky design of the site.
Final designs of the Playground pages
Filter and sort is an important part of searching for volunteer opportunities that are relevant to the user’s skillset and needs. Throughout the design process, several iterations of a filter and sort component were created.
Non-collapsible, minimally styled, radio button and checkmark filter and sort. Minimal design did not match rest of website. Selected filters are displayed to easily check which filters are applied and to allow for easy removal. Fixed, visible filter and sort and predictable interface helps users quickly understand how to use the page effectively.
Pop-out/drop down filter and sort designed by Jen. Stylistically more in line with the design of rest of site. Dropdown style reduces learnability of filter and sort, covering job cards and asking users to open and close every time they want to change the filters introduced significantly more clicks. Currently selected filters not displayed.
I designed the third iteration based on what was most successful about the first two designs. Filter and sort is visible upon opening the page but is collapsible if user chooses to do so. This allows users to quickly understand how they can use this page with the added flexibility of being able to hide the element. Selected filters are displayed for easy skimming and removal. Color coding relates to tags on the cards. The language in ‘sort’ relates to language used on the job cards, and the style is cohesive with the rest of the site.
The style of the design follows the preexisting style guide and utilizes the design system that has been developed for the Vegan Hacktivist website. New elements that were introduced follow similar styles to existing elements, and are designed to blend in seamlessly with the colorful, pixelated design of the site.
This first iteration of the listing card was based on the original wireframes that we were provided with upon beginning the project. The design lacks hierarchy and is difficult to scan. Finding important information requires the user to read every piece of information on the card.
The second iteration begins to address the scanability of the card by moving some important information to the top of the card, and adding a colored border to the category tag. However, the dense paragraph text and awkward bullet list still make it difficult to understand at a glance.
This final version of the design utilizes a clear hierarchy to make the card easy to scan. Important information is easy to locate quickly from card to card, and doesn't require the user to spend much time reading each card to determine if the opportunity meets their requirements. Use of color and icons helps move the eye through the design, and makes it more engaging.
Due to constraints, the usability testing done during the design process has been limited. Going forward, the most important next step would be to conduct a usability study to test whether these new design decisions effectively address the user needs we established in our problem statement.
Moderated user tests would help us understand better how the design actually works for the people who will be using it, and help ensure that ensuing iterations further target specific user pain points.