Project Vision
Bonterra gives clients tools for doing political advocacy, whether it's a small campaign or a big one. EveryAction, a Bonterra product, is like a special tool used by the Democratic Party and other approved non-profits. It's a system that helps with fundraising, reaching out online, and doing advocacy work.
With EveryAction, clients can link supporters with representatives not in Bonterra's database using custom contacts. But here's the catch – when they do that, they lose some features that control where the advocacy happens. So, supporters can flood inboxes with comments.
People using EveryAction wanted a fix. They wanted to be able to control where comments come from, so they asked for the option to limit comments to specific areas. That way, they can keep things in check and connect the right folks through their forms.
Challenges
1. Discover and assess user needs and competitive products
2. Balance feature enhancements with a limited development enviornment
3. Test solutions to validate design decisions
My Role
Product Designer
Tools Used
Figma
Condens
Zoom
The Goal
Design System Limitations
The Bonterra UX team is tasked with managing and maintaining three separate design systems to support specific products. The design system I would be using, Progress UI v.2, has no front-end support. I would only be able to leverage existing UI components to create my designs, a challenge I had not faced in my career before. While there are a number of improvements I would like to make to the legacy design system, the lack of focus on net-new UI provided me more space to focus on the UX process and solutioning.
Not only was there no front-end support, but there was extremely limited documentation on design patterns that did exist. This made it difficult to understand what components made up the legacy system and how to determine the products' best practices. A compromise I came to with a fellow design lead was to, while working alongside this initiative, begin filling in the gaps in documentation. While tinkering with the live product, I noted any UI patterns or elements that did not exist in our current Figma libraries to be discussed upon later.
This resulted in bringing higher fidelity in our Figma libraries to meet our development code repositories – and ultimately adding new UI components that I would be able to use for future projects.
User Research & Discovery
We would be revisiting a previously shelved project, so time was dedicated to synthesizing previously gathered information and conducting a competitor analysis. While this data provided an impression of the problems clients were facing, it lacked direct client research to validate. After meeting with a handful of clients to learn more about their needs and experiences, I had the basics down and could begin building low-fidelity wireframes of the journey I was envisioning. Alongside this feature, two noteworthy additions were discovered:
In interviews, we learned that our clients use our advocacy tools in different ways. Some handle a few contacts, while others deal with hundreds. Pre-installed contacts have useful grouping options, but custom contacts don't, making it hard for quick selections. To help, we're not only adding comment-restriction features but also giving custom contacts the same grouping options as pre-installed ones. This way, everyone can easily organize their contacts.
We needed to think of ways to re-engage supporters located outside of the specific geographical limitation. Clients preferred a way to redirect cold leads to other opportunities of action.
Early Ideation
With this system, clients can treat the tool like mixing various contacts, similar to making a Mirepoix, before adding them to a form. They can also specify the type of boundary metric for their advocacy efforts. Our interviews revealed categories ranging from zip codes to custom boundary file uploads. Because of the diverse use cases, user testing becomes essential to validate decision-making and ensure that our solutions can seamlessly integrate with different workflows.
User Testing
Following the development of a functional prototype, we sought feedback from 11 participants by presenting our designs to them. Collaborating with a user researcher, we crafted a list of unbiased questions to determine the tools' impact on users. The user feedback, documented with the assistance of my product manager, was recorded in individual videos and uploaded to Condens, a user research tool that aided in organizing information. Subsequently, this information played a crucial role in a facilitated workshop, where our team dissected the data to arrive at a final solution.
Final Solutions
Individual custom contacts can now easily toggle geographic restrictions on and off for convenient usage. Second, contacts can be selected individually or grouped into a custom 'Target Group,' allowing supporters to be paired with any number of contacts for specific actions. Editing contact and target group information can be done within an edit panel, mimicking the behavior of pre-loaded contacts. This design aims to feel native for experienced clients and intuitive for newer ones.
When handing off designs to developers, both the project manager and I are available to address any questions they may have about the pages. Designers play a role in describing interactions, ensuring key icon elements are included, and pulling any CSS elements not present in the original style guide. A quality assurance document is used to track and address these issues as they arise. Additionally, an analytics dashboard is created to enable clients to monitor valuable page statistics.
Impact
What I learned
Working within an existing design system can be limiting, but can also save designers time tinkering with the aesthetic choices that can sidetrack a project. However, knowing when to enhance the system and advocating for unique UI components can be beneficial for a product's future.
By understanding these capabilities, I was able to catch potential road blocks early, as well as advocate for unique feature additions that exceed our client's expectations ☺
