Lead Product Designer @ Indiegogo

RESPONSIVE CHECKOUT UI AND DATA-DRIVEN IMPROVEMENTS

I directed the design and implementation of a new responsive checkout flow for Indiegogo.

BACK

THE CHALLENGE

Indiegogo is a crowdfunding site based on a marketplace model. Campaigners launch campaigns to raise funds for their ideas and backers support these campaigns by making financial contributions using the Indiegogo checkout experience. Over 40% of the traffic coming to Indiegogo comes from backers using a mobile device. Indiegogo supported this traffic with an outdated mobile experience that was not responsive and was separate from the desktop experience. Supporting multiple payment processors across separate mobile and desktop experiences was increasingly more complex and inefficient for our product teams to maintain and rollout feature improvements.

Introducing a responsive checkout experience
Our goal was to create a single responsive checkout experience across both desktop and mobile and to establish a baseline experience from which data-driven improvements could be made faster.

THE APPROACH

As Lead Product Designer, I directed the product design from start to finish and mentored a junior product designer through each of the following activities:

  1. Research and Analysis

  2. Ideation and Solution Design

  3. MVP Definition and Product Roadmap

This junior product designer had no prior experience leading a project of this scope. My goal was to teach and guide her through my design process, and to give her the confidence, tools and experience to help her implement this framework independently on future projects.

Understanding current pain points
At Indiegogo, our product teams sit in the same offices as our Customer Support and Campaign Strategist teams. These teams interact with Indiegogo customers everyday and receive a wealth of user insights directly from our customers.

Our first step began with facilitating a design session with these team members to leverage the user insights they already had better understand the current pain points before we began generating solution ideas. I invited various designers, product managers, engineers, and members from the customer support and strategy teams.

Planning the kickoff and design session with cross-team members.

Generating an affinity diagram
During the design session, I set up large sheets of paper to represent each of the steps a user takes during the contribution checkout experience. Participants spent 10-15 minutes writing down all known pain points on orange sticky notes. Although our focus was not to jump into solutions ideas just yet, if there were any ideas that came up, we captured those using blue colored sticky notes.

After each person generated pain points, I facilitated a group discussion and an activity where we collectively mapped the pain points onto the sheets of paper representing the various UI touch points of the checkout flow. The higher or more severe the pain point, the higher up we would place the sticky note. This process of assessing the impact of pain points helped us in determining which areas to tackle as we began to define the scope of our first MVP release.

Whiteboard and instructions to session participants.
Indiegogo team members generating known pain points of the checkout experience.
Affinity diagram capturing known pain points across the UI touchpoints.

Ideation and solution design
We used our shared understanding of the current pain points to inform our decision making and process as we moved into the solution design phase. I guided the initial exploration, then supported and mentored the junior product designer on my team to independently develop concepts to address those pain points.

Whiteboard to initiate the solution design phase.

Measuring impact vs. implementation difficulty
As we explored different patterns for the checkout experience, I began synthesizing a list of features to shape the future product roadmap. Part of my role was to partner with product managers and engineering leads, to define a product strategy. I mapped each feature by the impact or value to users vs. the level of difficulty to implement. This served as a tool to gain team alignment and helped us categorize product features into the following buckets:

  1. Minimum Viable Product (MVP) Features

  2. A/B Testing Candidates

  3. User Research Candidates

  4. Post-MVP Features

Initial sketch of product features mapped across impact and difficulty.

MVP scope
Our goal with the MVP solution was to introduce high impact features that were relatively easy to implement, allowing us to validate our assumptions and iterate accordingly. This MVP specifically focused on:

  1. Introducing a responsive pattern across desktop and mobile.

  2. Reducing the number of input fields required for user to complete a contribution.

  3. Improving the contribution order summary information shown to backers.

Differentiating between the MVP and other product features.

A/B testing candidates
Smaller product enhancements and tweaks that were considered high impact and very easy to implement were ideal candidates for A/B testing post-MVP.

User research candidates
Any features where we were not 100% sure of the value and were fairly expensive or difficult to design and develop, were categorized as concepts that required further research with users before proceeding with designs and incorporating them into our product roadmap.

Post-MVP features
Other high impact features that we were confident about where prioritize and sequenced in the product roadmap taking into account feature dependencies, implementation difficulties, and resource team resources.

Final impact vs. implementation matrix and categorization of features and scope.

THE RESULT

This new responsive checkout experience resulted in a 14% increase in contribution conversion, and is now the baseline metric to measure and build future features.

I mentored the junior designer on my team throughout the interaction and visual design phases of the project and oversaw the rollout to production. I was happy to see the junior designer rise to the challenge. The skillset used and learned in this project was helpful to her overall growth, and in subsequent projects this designer was able to implement the design process again with much success.

Newly designed contribution checkout experience across multiple devices.