Project Background

Branch is a political tech startup that helps voters make informed decisions and create unique ballots for local and national elections.
‍
The platform summarizes information about every race and issue, reducing the effort needed for voters to gather information before making decisions. However, despite user growth, only 30% proceed to build their ballot on the platform after browsing. Although the overall engagement is low, user data suggests that once a voter takes the step to make a choice, there's an 80% chance of them completing their ballot on Branch.

Deliverables

Interactive Prototype

Desktop/laptop high-fidelity prototype for online order flow
Mobile high-fidelity prototype for online order flow

UX Research

Research analysis (see full report)
Affinity map
User journey map

Interactive Design

Online order task flow redesign
Responsive wireframes

Before we could find a solution, we needed to know the reason why users were not engaging beyond browsing in the first place.

Previous user journey from browsing the ballot to choosing a candidate

There were quite a few issues with the existing user experience. The head of product and I had a brainstorming session where we uncovered potential pain points that would deter a voter from taking an action:

An issue is not interesting to me
I don't know what to do
Too overwhelmed to act

Afterwards, I came up with three design solutions and listed the impact each solution might have.

Solutions brainstorming snippet, click to view full Miro board

Project Scope

Although a lot could be done to optimize the product, we were only 4 weeks away from the next election. Time was of the essence.

After a discussion with both product and engineering, we decided to cut out the “Guided first vote” idea because it would take too long to implement.

Project Goal: Shorten the path from browsing to taking action to increase likelihood of users making their first choice.

Design Tasks

Restructure the ballot page layout to guide users to find desired issues quickly
Redesign the race page to encourage users to make a choice

Timeline

1 week of design including usability test
1 week of build and launch with A/B tests

Team Size

Project lead: Head of product
UX designer: Summer (me)
Engineer x 1

The “Guided first vote” idea scored high on impact, but the amount of effort it required may have rushed us into launching without testing, which is a best practice the team was unwilling to compromise.

Ballot Page Redesign

My initial idea was to group races by impact in a grid of cards for a more organized, responsive layout. However, during our design review, the team raised some compelling arguments:

Categorized cards are a new component that would require more engineering effort
Our users are not yet loyal enough to adapt to big UI changes

After the review, I decided to keep things simple. I leveraged the existing list component and added an accordion for grouping issues.

The redesign should achieve three things:

Present all races in an organized way for easy navigation
Allow users to view the ballot in the previous UI in an expanded list
Provide users feedback on their progress

Ballot page before and after

Race Page Redesign

The race page has a more complex layout that presents challenges:

There is a lot of information on this page that must be retained, as required by the head of product
Users should confidently "choose a candidate," so the UX should facilitate easy decision-making while allowing users to learn about each candidate

The new design must highlight the "Choose" button while preserving all existing content and features, including the "heart" buttons.

Resolving challenge 1: Present information with better hierarchy

My design intuition told me to reconstruct the hierarchy of the page first. I started by laying everything out in the open; seeing how all the elements play together.

After sketching and rearranging the content, I presented 4 variations during our design review. These variations mainly served as a visual aid to prove the power of hierarchy. When everything is important, nothing is.

My goal was to convince the team that what this page needs to drive action is a primary CTA that is both obvious and relevant.

The team agreed to keep the focal point on the “Choose” button and decided to move forward with Version 3.

In this version, the “Choose” button is placed right next to the candidates. This allows users to make a choice in one click, reducing friction.

Race details page before and after

Resolving challenge 2: Prompt users to take action at relevant touchpoint

The candidate profile page is a part of the race page and it holds great value for Branch. This page provides everything users need to know to make a confident decision.

The existing UI presents the information, but users had to return to the race page to make the decision. This added friction lowered the chance of a user making a choice.

There’s a simple fix. I added a “Choose” button under the candidate’s name and made a point to keep the button behavior consistent by allowing users to "undo" their choice.

Candidate profile page before and after

Findings from Usability Test

After the designs are reviewed and approved, I created an interactive prototype for usability testing. Given the tight timeline, I decided to use Maze for a remote, unmoderated test.
‍
We were able to test the prototype on 20 participants, and the new design scored 4.3/5 on ease of use.

Maze test heatmap and feedback from testers

While the new design succeeded in guiding users to take actions, the heatmap revealed more insights that were later tested in the A/B tests:

The majority of the misclicks happened due to the limitation of the prototype
Many misclicks suggest that users want to learn more by clicking around on more information

The team was happy with the result and started implementing the designs.

Post-Launch Results and Lessons

We wanted to measure the effectiveness of the changes and rolled out two experiments. We separated the changes on the ballot page and race page to measure them independently.

Experiment 1 - New Ballot Page Layout

Contrary to the usability test, the new design saw a 9% decrease in average choices made.

The experiment assumption was that by presenting information in a more organized way, we would reduce cognitive load and help users find what they are interested in more efficiently. We expected this new layout to make users stay on the platform longer and in turn increase the chance of them making a choice. However, the change in layout did not have a positive impact on the average number of choices made.

My guess is that the grouping method might have made it too easy for users to skip races that they are not interested in, which lowered the average number of choices made.

Experiment 2 - New Race Page and Candidate Profile Page

We saw great results from this one. We achieved our goal of increasing the likelihood of a user making a choice on the platform.

Additionally, the new design surfaced the "View profile" link and candidate profile reads also saw a 55% increase.

After we rolled out these changes to 100% of users, we saw even better improvement in overall performance. The number of choices per ballot grew from 1.8 to 4.7 compared to the last election.

Lessons

Based on the results of the experiments, we rolled back the changes on the ballot page and only released the new race page to all users. Because of the interconnectedness of a given products components on the user experience, it is important that designers experiment and test before committing to changes.

There is a great deal of humility in design. I don’t and I won’t always know what’s best for users. My job as a designer is to identify problems, and present solutions to be tested and chosen by users.