DESKTOP+MOCKUP.jpg

Crafter

PicoBrew’s online recipe crafter is one of the company’s oldest digital tools and was in need of a visual refresh and a service design overhaul. As the project’s UX Lead, I was tasked with revising and updating the crafter’s information architecture and user interface.

The original crafter

The original crafter

Authored back in 2012, the recipe crafter UI was dated and the functionality of many of it’s data entry and selection elements was either unintuitive or broken. I started this project by reviewing problem areas with brewers, customer service reps, and other designers.

Initial sketches

Initial sketches

After collecting feedback from stakeholders, and plenty of my own testing, I sketched some ideas for a new UI design on paper.

Modernization opportunities

Modernization opportunities

The old crafter did not have the benefit of modern JS libraries and other data visualization techniques, and yet I saw at least a couple of key moments that could benefit from using graphical data representation to give users better insight into the composition of their recipes. The sketches below are my first ideas about how to represent vital beer stats to users.

First wireframes

First wireframes

A major aspect of this project was re-evaluating the information architecture of the the service. Features of the old crafter were located in disparate areas of PicoBrew’s website. I used card sorting exercises with internal brewers to group like features into a modern SPA framework.

File view wireframe.png
Data visualization

Data visualization

As the general layout and interface started to come together, I took some time to refine the approach to the data visualization elements. These consisted of vital stat ranges and grain and hop bill widgets.

vital stats.jpg
UI development

UI development

It took several iterations and a lot of feedback from internal and external stakeholders to move the UI in a direction that everyone was happy with. These wireframes represent a refactoring of the design.

Final UI

Final UI

The spec below is currently being implemented as a beta version of the new crafter. We will begin broader testing with customers in early Q1 2019.

Mobile version

Mobile version

The mobile version of the crafter had to be dramatically streamlined. Some elements, e.g. widgets, are hidden on certain screen sizes.

MOBILE MOCKUP.jpg