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.
After collecting feedback from stakeholders, and plenty of my own testing, I sketched some ideas for a new UI design on paper.
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.
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.
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.
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.
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.
The mobile version of the crafter had to be dramatically streamlined. Some elements, e.g. widgets, are hidden on certain screen sizes.