Branch Endorsement Builder Remodel

Endorsement
Builder

Real client end to end product design

Role: Product Designer

Duration: 16 Weeks

Responsibilites

Product Definition

Lo-fi & Hi-Prototyping

Interaction Design

Usability Testing

Copywriting & Marketing

“Best way to get out of a creative rut is to try new techniques and expand yourself.”

-Kirk
(Interview Participant #1)

Project Overview

I came on as a contract product designer for Branch in March 2022 to help define and ideate a series of new tools focused on issue advocacy and campaign endorsements.

I designed the endorsement builder which aims to solve the disconnect between issue-advocacy groups and voters. It gives organizations the tools they need to market and disseminate their endorsements to more voters who care.

On this project I led the end-to-end design process while collaborating with the founder/developer to create a viable MVP. We tested with 8 of our targeted users, confirmed that our tool helps simplify their current workflow and was a viable product to go to market with.

It's currently in development with multiple early adopters signed up.

view live prototype

Issue-based organizations are doing the hard work of advancing issues in a harsh political environment. Whether those issues are a cleaner environment, better healthcare, better education.

One big tool that organizations have in advocating for their issues is endorsing candidates. To raise awareness of these candidates advocacy organizations rely on paper mailers or websites to disseminate information.

These tactics come with drawbacks: paper mailers are often either lost or ignored by voters who receive them and websites are costly to set-up and maintain— especially for smaller advocacy groups. The average voter tends to vote based on how they align with candidates on various issues. Most voters however, aren't as knowledgeable of all the numerous issue advocacy groups that exist. Even if a voter does know about a high-profile organization, these organizations tend to endorse up to one hundred candidates at a time. Making it difficult for a voter to figure out which candidates are relevant to them.

Product definition

The Endorsement Builder product is meant to solve this disconnect between issue-advocacy groups and voters. It gives organizations the tools they need to market and disseminate their endorsements to more voters who care and it gives voters the ability to filter endorsements to only the candidates on their ballot.

A set of user stories that helped define product direction are:

Organizations should be able to easily create an interactive webpage populated with their endorsements.
Voters should be able to filter the interactive webpage based on which candidates are on their ballot in the upcoming election.
Organizations can create and advertise their endorsements directly on the Branch website.

User flow diagramming

Before any kind of wire-framing, I started with a user-flow diagram mapping out the various screens that would need to be designed.

A user-flow was essential in achieving alignment between myself and the developer on the overall user experience of the product. We sat down together over a virtual meeting and went through each step of the flow, talking through interactions, data collection points and intended user behavior and other design considerations.

Landing page -> Sign in/Sign up

Homepage -> Interactive web page/ad spots editor (new user w/ no active tools)

Homepage -> Interactive web page/ad spots editor (Existing user w/one or more active tools)

Interactive web page

The groundwork for the interactive web page was laid in an earlier product exploration before my time at Branch. My task was to adapt it to fit into the Endorsement Builder landscape. The main requirements were that it needed to be flexible enough to be customized but visually appropriate for political organizations in it's default state. It also needed to allow voters to input their address information into the ballot finder feature which allows them to filter down to the relevant candidates on the page.

Variations

Ballot filtering explorations - v1

Ballot filtering explorations - v2

Made the main CTA more prominent based on feedback from a usability testing session that revealed that user's were not noticing this action on the screen. Also redesigned the organization description section and added a section for important election dates.

Final version of the interactive guide

Ballot filtering explorations - v3

User's were having trouble understanding how icons on the previous iteration worked and were stumbling to figure out how to input their address and confirm. Opted to keep a more prominent main CTA in view during the input step.

Endorsement Tool Builder

The endorsement tool builder is an online portal for users to create, launch & manage their landing pages or Ad campaigns. A large chunk of my time was spent developing the interaction model for the web app.

Lo-fi iterations

Mid-fi version of the endorsement builder

The explored model splits the interface in two. With an "input" side on the left allowing a user to build out their tool of choice and a "preview" section on the right where they can see their choices and additions reflected in real time on the landing page. The rationale behind a split view is to allow users to quickly understand how their interactive page will look like as they make adjustments based on their specific brand guidelines.

The Endorsement builder's customization options are constrained by design to offer a quick and easy way to express an organizations brand by only focusing on the essentials: Color, logo and imagery. A member of an organization building out an interactive web page can quickly find the best configuration of their landing page that meets their needs.

Hi-Fi iterations

Post review with the developer, the second round of iterations involved adding a bit more of Branch's visual language and also fleshing out the preview section so we can test the prototype.

Hi-Fi iterations - v2

We tested with users heavily involved in marketing operations for political organizations. The goal was to measure how well these individuals understood how to use the tool, gauge how well aligned the editor's options were to their needs, discover additional learnings that could be useful in improving the tool.

Post-feedback, I added an interstitial screen before entering the editor to briefly provide context to the tool, I also made some layout adjustments and included example copy for text input fields.

Hi-Fi iterations - v3

The last round of iterations was more about further refinement, collaborating with the developer on what elements could be redesigned or improved for a better experience.

Final version of the endorsement builder

Marketing Page

Lastly, I designed the marketing page to promote the Endorsement builder tool. The goal was to create a one pager that political organizations could read through and understand what it is and what value can be gained by using it. The page also needed to communicate cost, time and effort and ease of use as succinctly as possible.

Iterations

With the founder working mostly on copy, I focused on layout & visual design for the marketing page. Through out the process we tested the page with marketing professionals who work with/for political organizations to understand if the page was meeting the goals we outlined and also assess what other information would be relevant to include.

Final design

Final design for the marking page