Home
RIIPL
Gmail
Branch
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 an 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 closely 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.
view live prototype
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.
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.
A set of user stories for the Endorsement builder tool would be:
  1. Organizations should be able to easily create an interactive webpage populated with their endorsements.
  2. Voters should be able to filter the interactive webpage based on which candidates are on their ballot in the upcoming election.
  3. 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.
The options available for customization are:
  1. Logo
  2. Primary color
  3. Image
  4. A default state: what does it look like when all three previous options are not provided?
Variations
from left to right: Full customized, no logo provided, no logo & bg image, default state)
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.
v2 iterations of the interactive landing page
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.
Sponsored Ad Spots
Ad spots available on the Branch website are linked to political hot topics & issues. Organizations can select what candidates they'd like to feature and under what issues should their endorsements be visible on the Branch website.
Initial explorations
Initial explorations of the visual style of the sponsored endorsements.
v2 designs
A note of feedback I received was that from an interactions standpoint, a voter should be able to navigate to an organizations endorsement guide from the Ad. I iterated on a few variations to account for this. The color of the Ad spots also needed to convey a sense of political neutrality without being too obvious.
v2 explorations, we ended up picking the first of the two as the current design.
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
    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. 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.
    Text readability was also a major factor in choosing to provide a prominent "preview" section. The tool allows for the selection between white and black text color. Users can immediately see the relationship between their chosen brand color/background image and the text and adjust text color accordingly. All images are automatically given a slight background blur to improve readability.
    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.
    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
    We had some trouble with communicating the value of the sponsored ads and opted to take it out for the first launch of the page since that feature will not be launching in version 1 of the Endorsement builder.
    Final design for the marking page