Product Designer
Landing-Page-SHOWCASE.jpg

Brewer's Network

I was tasked with redesigning and relaunching a landing page for the PicoBrew Brewer’s Network (PBN) platform and creating a back-end business process that would support the program. The PBN platform is used by large to mid-sized commercial breweries as well as new homebrewers to sell their beer recipes on the PicoBrew website, manage their digital storefront, and track sales and marketing metrics.

The Problem

The Problem

The PBN platform was underperforming due to a disconnect in the way we were addressing our target audience. This disconnect was reflected in the front end design and site behavior, as well as in our back end business processes.


Discovery

Discovery

Internal stakeholder interviews revealed that all but a handful of PicoBrew’s commercial partnerships were made through direct recruiting efforts. This meant that the existing landing page and on-boarding process was not being used by this segment of our audience.

In fact, 93% of traffic to landing page were either existing customers or self-identified homebrewers. While the overall goal of the landing page was to offer information and on-boarding for all, I realized that the content needed to be heavily biased toward homebrewers.


Solution

Solution

First, I would re-orient the design and content of the landing page toward the audience most likely to use it: homebrewers!

Second, I would create an on-boarding and business communication process for homebrewers that would allow them to publish their recipes in the form of PicoPaks on our marketplace.

Third, I would ensure that there was a useful on-boarding path for commercial brewers that addressed their unique concerns. This path would also provide our partnership reps a better point of reference for their recruitment efforts.

Wireframes

Wireframes

After some white boarding exercises with my team, I laid out some initial wireframes using Sketch.


Visual design

Visual design

I worked closely with our lead designer to refine the visual design of the landing page, select and edit photography, design iconography, and dial in the flow. Our goal was to emphasize the simplicity of the sign up process and reinforce our commitment to quality in the sourcing of ingredients and recipe conversion.

Addressing All Users

Addressing All Users

I biased the design and user journey of the PBN landing page toward homebrewers, our primary audience. But we also needed a case handler for the small number of commercial partners who might make initial contact through the site. In the page below, we offer a de-emphasized ‘off ramp’ for commercial brewers.

PBN-gateway-page.png
Homebrewer journey

Homebrewer journey

The goal for homebrewers was to move them into the creation of their online storefront as quickly as possible. The flow below represents the step of ‘brewery creation.’ This moment serves as the transition point from sign up into recipe crafting.

Dev Handoff

Dev Handoff

With the landing page in a fully re-designed state, I coordinated with our dev team to hand off assets and redlines. I used Simply for design and layout hand off.

Business Process

Business Process

Phase II of this project involved the creation of a back-end business process and customer communication plan that would support a front-end recipe creation tool. The design of this process required extensive collaboration with our supply chain and logistics team, accounting, and software engineers.

I used one of my favorite web apps, RealTimeBoard, to layout the process diagram below. This diagram illustrates the entire PicoPak creation process, from user sign up to publishing on BrewMarketplace.

Homebrewer-Onboarding-Process.jpg