Summer 2017

Bread Merchant Portal

PRODUCT DESIGN

UX / UI DESIGN

WEB DESIGN

INTERNSHIP

Background

During the summer of 2017, I got to work with the Bread team as a product design intern. Bread is a NY-based startup that provides e-commerce merchants with a tool that makes it easy to offer their customers financing. I contributed as a design generalist, but my major role was to improve the merchant-facing product — the merchant portal. I completed a visual refresh of the portal as well as conceptualized and designed two new features: the dashboard and customer report.

THE PROBLEM

Bread provides online merchants with a checkout integration that presents customers with the option to finance their purchase if they choose to "Pay with Bread." Merchants can then see, manage, and fulfill these orders in Bread's merchant portal. However, merchants need much more functionality if they are to rely on Bread as their e-commerce platform.

Screenshots from the original merchant portal.

In addition, Bread's merchant success team (the team that works directly with merchants through the integration process and afterwards) surfaced many usability issues that merchants were having with the portal. They also were manually compiling reports and sending them to merchants when the process could be automated and available in the merchant portal.

WHO USES THE PORTAL

The challenge of beginning to work on the merchant portal was that there was not a clear understanding of who from the merchant teams was using the portal. We already had a product roadmap in place that had been developed through prioritizing internal goals, requests from merchants, and the competitive landscape, but we did have not know who would be using this new functionality. In order to solve this problem, we conducted research by sitting in on sales calls, speaking with the merchant success team, and conducting phone interviews directly with merchants.

Merchant portal features and the teams that use them.

The existing features in the merchant portal were being utilized by the merchants' sales and finance teams. However, with the new features on the roadmap, merchants' marketing and management teams would also become regular users of the portal.

This gave us the foundation to begin to iterate on existing features and build new features with a more specific target user in mind. It also meant that as we iterate we would need to consider the impact on the users who did not use those features.

MVP (Minimal Viable Product) Mindset

As we began to brainstorm the functionality of the dashboard and customer report, there was no shortage of ideas. In order to narrow down the functionality of what to include, we developed a MVP mindset.

Graph of functionality vs resources.

I learned that the required resources to add more functionality scales greater than linear and, like most startups, Bread had limited resources. This led us to decide that new features must:
1. Provide immediate value
2. Test hypotheses
3. Nudge users towards future functionality

With these rules in place, we could now narrow down the functionality of the dashboard and customers report.

Applying the Mindset to the Dashboard

The dashboard's target user was merchants' management teams who needed to measure the success of their financing program. We designed the dashboard to make it easy to view the trends of key performance indicators.

Key performance indicator trends in the dashboard.

The analytics provided value to the management teams with the ability to measure the success of their financing program, tests our hypothesis that management teams wanted to use the portal to view analytics, and nudges them towards using the portal as a place to find insights into their financing program.

We also thought about how the dashboard would impact the other merchant teams who used the portal. Every time the other teams opened the portal they would land on the dashboard and then need to navigate to their respective workflows. We saw this as an opportunity for the dashboard to be a launchpad for these workflows, streamline multistep tasks, and direct attention to areas that need action.

Examples of launchpad insights in the dashboard.

Applying the Mindset to the Customers Report

The customers report target user was the merchants' marketing teams. We initially began working on the customers report as a marketing tool that makes it easy to segment and target customers, but when we began to test this new feature with merchants they were surprised by the level of functionality. We learned merchants' marketing teams already had their own marketing tools. This caused us to shift our perspective on the value proposition of the customer report. Rather than creating a full blown marketing tool, we decided to deliver a supplement to the existing marketing tools that merchants already were using.

Customers report.

This dramatically reduced the amount of new functionality we would have to deliver. However, still delivered an immensely useful minimal viable product. Merchant marketing teams could segment and target their Bread customers while we were able to test our hypotheses about what types of data about customers merchants want to use to target customers. It also nudges merchants towards maybe one day using the customers report as a marketing tool.

Prototyping NEW Tables

While we were conceptualizing the dashboard and customers report, we were also working on a visual refresh of the entire merchant portal, fixing usability issues, and improving the experience of the merchant sales and finance teams who were currently using the portal. Almost every screen relied on tables so making it easy to switch the data and functionality of these tables was necessary for being able to rapidly prototype changes.

An example table with various types of cells.

We invested in creating dynamic Sketch symbols that made it quick to create, change, and reorganize tables. We also invested in making large fake data sets that could be plugged into these tables.

TESTING USABILITY

As we made changes to the usability of existing functionality of the merchant portal, we conducted think aloud usability tests with the merchant success team.

Transaction detail screen (top) and transaction action modal.

We chose the merchant success team because they were actively working with merchants as they were on-boarded to the merchant portal. We felt that this provided them with the proper level of context to best reflect how a merchant would use the portal.

Area for Improvement

The merchant portal is very much in its infancy. There is so much room for future functionality as well as new ways to optimize workflows and provide insights into a merchant's financing program.

Settlements report (top) and transactions.

The majority of the changes we made relied on qualitative requests from merchants, the goal to bring the portal into a state where it could scale with future functionality, and targets on a product roadmap. However, as more and more merchants rely on the portal for their everyday tasks there is an opportunity to collect quantitative data that provides more concrete insights on where to make improvements to the portal.

Other Projects

Passenger App

Co-founded Passenger with my brother to improve the commuting experience by making the easiest to use train schedule that solves commuter pain points and provides daily delight.

See More →

Startup Shell Web

The Startup Shell website is designed to encourage student entrepreneurs to get involved with the community as well as be a source of information for potential partners, advisors, and contributors.

See More →

Slide Nearby

Slide is a mobile gift card wallet that allows you to use your gift cards on the go while leaving your physical gift cards at home. The nearby feature shows you nearby places where you can spend your gift cards.

See More →