Remove Projects From Group
Role
UX designer
Team
Product manager : Mark Frischmuth
UX design team : Aimee Jin, Gregor Kalfas
Research team : Brendan Thatcher, Funmilayo Obasa
Development team : Marlon Keating
Tool & Method
User study Brainstorming Prototyping Figma
Duration
8 weeks
DemocracyLab is a non-profit organization based in Seattle, US that connects skilled volunteers with technology projects that aim to the public good. Volunteers find projects on DemocracyLab's platform, then work with project owners to develop, design, and research.
I joined DemocracyLab in May 2023 as a UX designer and volunteered to present the ‘Improve Group Features’ project. I was responsible for reviewing the user study, brainstorming design solutions, and creating mockups and I am really enjoying working with the research team, product manager, and other designers by collaborating and sharing ideas.
Background
Overview
DemocracyLab website has project and group features.
projects are created by a project owner for tech-for-good initiatives that aim to solve social or environmental problems.
Groups are organizations that support or sponsor projects. Groups can create multiple projects, but projects can also exist independently and also Groups can invite other projects to join their group.
However, many group owners do not use the group feature properly. The research team interviewed group owners to identify the problems of the group feature. One of main pain point is that there is no way to remove projects from a group page. Myself and Aimee were assigned to work on the priority task of ‘Remove projects from group’ as part of the project to ‘Improve group features.’
My Role
I was responsible for designing a way for group owners to remove projects from their group, and I collaborated with other teams to improve the overall group features.
Understanding the pain points of group features : I reviewed the research team's findings to identify the problems that group owners were having with the existing group features.
Brainstorming and designing solutions : I worked with the PM and research team to brainstorm ideas for improving the group features. I created wireframes and mockups to visualize my designs.
Presenting, iterating, and prototyping : I presented my designs to other UX designers for feedback. I iterated on my designs based on the feedback and created a prototype. I handed off the final version of my designs to the Dev team.
Problems
A group page serves as a showcase where they can show their group information and participating projects. Group owners want to easily edit their group page to update news or changes, but there is “currently no way to remove projects from a group.” This could lead to inaccurate information being provided to sponsors or project owners.
⚡The challenge
How can I design an intuitive and communicative user flow for group owners to remove the projects from their group?
Design Process
To design a new user flow for removing projects from a group, my design team decided to review the current user flow for inviting projects to the group. This is because inviting and removing projects are related actions and should have similar buttons or processes. After reviewing the current user flow, we planned to visualize our ideas based on the brainstorm session.
🔍 Current Flow Analysis
How to add project to group : Our review of the current user flow for adding projects to group revealed two key takeaways that we need to keep in mind when designing the user flow for removing projects from groups.
‘Invite Project to Group’ button is available on each project page : Group owners can add a project to their group by clicking the button on the project's page.
Communication step : After clicking the ’Invite Project to Group’ button, a modal dialog will open where the group owner can leave a private message to the project owner. The invitation will then be sent to the project owner, who can approve or reject it
💡Explore Ideas
How to remove projects to group : To simplify the process of removing projects from a group, we added a "Manage Projects" button to the Group Edit page. This button takes group owners to a page where they can see all of the projects that are currently participating in the group and remove the project that they want. We also gave group owners the option to send a private message to the project owner during the removal process.
- ‘Manage Projects’ button vs The kebab menu
We originally considered adding a kebab menu to each project card to allow group owners to remove projects. However, as we don't have any other options now to add in the menu except a removal. A more user-friendly option would be to add a Manage Projects button to the group edit page. This button would take group owners to a page where they can see a list of all the projects they are participating in and remove them from there.
- Remove one project at a time vs Remove multiple projects at once
Group owners can remove projects from their list of participations by clicking the "Manage Projects" button. We considered two options: removing one project at a time and removing multiple projects at once. We decided to allow removal of one project at a time so that group owners can send a private message to the project owner. This ensures that project owners are aware of their removal and have the opportunity to ask questions or provide feedback.
Outcome
Finally, group owners can now easily remove projects from their group and display accurate participating projects information on their group page.
Takeaway
There was already an existing flow for adding projects to groups. DemocracyLab also has a design system. When I designed a new flow to remove projects from groups, it was important and challenging to align it with the existing flow and UI design. My design team explored many ideas and analyzed the effort and effect of each idea to choose the appropriate solution. We were fortunate to have a large team of UX designers at DemocracyLab, which allowed us to share our ideas and get feedback from each other.