top of page

DemocracyLab

Designing a simple & effective alerts feature for volunteers of DemocracyLab

Successfully Created Toast.png
Manage Alerts (1).png

Project Overview

Challenge

DemocracyLab is a nonprofit that helps tech for good projects launch by connecting skilled volunteers to projects that need them.

 

Currently the DemocracyLab platform is lacking an alerts system that will allow volunteers to receive notifications once projects of their interest become available. With many projects looking for the skills of mighty volunteers, DemocracyLab wants to increase volunteer engagement and participation.

Objective

Design a simple, intuitive, and personalizable alerts system that connects volunteers with available projects on DemocracyLab.

Project Type

Add a Feature, UX Volunteer Project with DemocracyLab

Role

UX Designer, UX Researcher

Team

Myself & 3 UX Designers

 

Collaborating with cross-functional teams like PM, UX Research, UX Writing, and Dev.

Duration

5 months

(July 2021 to Nov 2021)

Understanding the Problem Space

Some initial research was conducted by the UX Research team at DemocracyLab but our team wanted to conduct additional research to better understand our problem space so that we could design a better solution for users.

Competitive Analysis

To begin our research, our team started out by looking at direct and non-direct competitors in the market. We wanted to understand how other competitors are currently notifying users of potential openings that are of interest to them. We were also interested in uncovering competitors' strengths and weaknesses.

 

After conducting our analysis, we developed a simple features matrix to showcase where DemocracyLab's platform stands in comparison to others in regards to alert features.

Competitive Analysis Matrix.jpg
NY CARES.png
GLASSDOOR.jpg

Assumption Mapping

My team also met for an assumptions mapping session leading to valuable discussions amongst the team about user needs and risks associated with finding solutions to address these needs.

Assumption Mapping.png
Assumption Mapping (1).png

User Flows

User flows were created to better understand where alerts might best fit into the platform. 

User Flows & Sketches - Democracylab Alerts.png

Designing

Sketches

Each team member sketched up some ideas of what they envisioned the alerts feature to look like. Afterwards, we got together to present and share our thoughts.

We also presented the sketches in our weekly design stand-up meetings to gather feedback on our designs from designers, developers and other cross-functional teammates.

Here are some of my sketches!

Untitled_Artwork 1.png
Untitled_Artwork-3 1.png
Untitled_Artwork-1 1.png

Prototyping

Being that the team was split between two designs, we decided to split prototype both so that we could conduct testing on both versions which would ultimately allow users to choose what suits them best.

Version A Screens

Group 901.png

Version B Screens

Group 903.png

Testing

Unmoderated Remote Usability Testing

Using the Maze platform, we tested Version A and Version B with volunteers of DemocracyLab.

 

Tests for both versions consisted of the same tasks. Our team wanted to see which version generated more positive user feedback and was more intuitive for users.

Test A had a total of 42 respondents while Test B had a total of 24 respondents.

Ultimately, more participants were able to successfully complete the tasks on Version A as opposed to Version B. When analyzing the heat maps of both Versions, more misclicks were noted on Version B. 

Group 625729.png

Key Insights

Proposed Changes

Finding the alerts settings proved to be challenging for some users.
Users had difficulty locating where to manage alert settings. It wasn’t apparent to users that clicking on the profile icon would bring users to a menu with an 'alerts setting' option.

Users get overwhelmed if too much information is shown at once.
Having alerts settings as part of profile settings resulted in too much information being displayed to users at once. Users found it difficult to pinpoint where exactly they could edit their alerts and also reported feeling overwhelmed by the content.

Users prefer a more accurate description for the toggle button.
Rather than having a simple ‘alerts’ label next to the toggle, users prefer to have a more descriptive label so they could anticipate what might happen if they toggle the button.

Incorporating a bell notification icon in the top upper horizontal menu bar.
Most users associate a bell icon to notifications or alerts. Upon clicking on the bell icon, a menu will populate allowing users to select an 'edit alerts' option.

Having a feature solely for alerts settings.
Implementing an entirely separate portion of the site that focuses on alert settings management cuts down the amount of information shown to users at one given time.

Editing the label of the toggle button to be more specific.
Changing the label to 'get alerts' tells users exactly what to exact if they were to toggle the button. 

Iteration

Since Version A appeared to receive more positive review and feedback amongst our users, we focused on fine-tuning and reiterating Version A based on user feedback.

Our team also tweaked some interface design to match DemocracyLab's existing design system.

 

Some features of Version B were well received by users, so we also incorporated some aspects of Version B's design into Version A.

Change #1: Incorporating a Bell Notifications Icon in the Homepage.

Header.png
Group 625718.png

Change #2: Editing the Alerts Toggle Button Label to be More Precise & Accurate

Screen Shot 2021-12-27 at 11.44.06 PM.png
Screen Shot 2021-12-27 at 11.44.18 PM.png

Change #3: Redesigning our toast notifications to include precise date and times.

Project alert created modal-mobile.png
Success Toast.png

Change #4: Incorporating filter settings from Version B into Version A's design.

Project Alerts Settings.png
Project Alerts Settings.png

Final Screens

Notification Menu.png
Delete Alert_.png
Manage Alerts.png

Reflections

Next Steps

  • Moderated Usability Testing​​With the updated prototype, more testing should be done to gain user feedback on iterations. While non-moderated usability testing can be convenient & quick, the truth is, at times, it doesn't beat moderated sessions. Our team would love to gain more high quality qualitative feedback through additional testing. 

  • Focusing on Building out the Feature on Mobile: DemocracyLab's mobile platform currently still lacks a notifications system. The next step would be to design this feature while taking into account limitations of a mobile interface.

Learnings

  • Working around Constraints of Design Systems: Design Systems are wonderful, but are still rules! They design what you're able to do and how you should design. At times, they could reduce your ability to be creative since you still have to follow guidelines. In this project, I learned to love the constraints of a design system as it promotes consistency and reduces building time!

  • Working with Cross-Functional Teams: During this project, I had the pleasure of working with various cross-functional teams which proved to be super fun. Working with the development team at DemocracyLab enabled me to design a feature that was feasible to build. Good communication was key in getting us on the same page of how we wanted the designs to be built out.

bottom of page