BinWise Product Design series
I started work at BinWise in October 2014 as the Lead Designer. BinWise is a SaaS system for restaurants to manage all aspects of their beverage program – inventory, purchasing, sales, wine lists – in one central place. The team did not have a designer prior to my joining the company, nor any design processes in place. After a few years of developing the product this way, they ended up with a site full of convoluted user flows, confusing and cluttered UI, and inconsistent interactions and visuals.
I instituted changes to move to a human-centered design process.
- Talk to our users through interviews and surveys, so that we can understand how our customers use the product and what they need it to do to make their lives easier.
- Develop a design system and implement it in the form of a pattern library.
- How the first 2 points influenced feature overhauls, in the following parts of this series.
User Research and Building Personas
A large part of my job is to identify UX or design problems with the current product and work towards creating a more usable and efficient product for our customers. To do that I needed to talk to our customers to understand what workflow problems they currently have, not just with the site, but with their job in general, and determine what we can do to make their lives easier. This also helps me to build a network of users who we can contact later for user testing, and get them involved in the development for something they use every day.
From that research I created a set of design personas to focus the direction of the product. There are 3 personas that reflect the different groupings of roles encountered in the research. I also created restaurant archetypes that reflect the typical restaurants we serve and contextualize the personas’ work environments.
Some key points we learned from this research include…
- No one gets in the wine and food business because they love administration or accounting! The product should enable our customers to get the mundane work out of the way quickly, so that they can get back to what they really love – being on the floor, interfacing with customers, and sharing their love and knowledge of wine.
- The current product makes tasks a lot more time-consuming than they should be due to convoluted user flows and confusing instructions/visuals/interactions. Many processes are overly complex and need to be simplified (I’ll talk about this more below in the Inventory redesign). Restaurant employees work 12-14 hour days regularly – this product should decrease their work time, but due to poor UX it sometimes increases it.
These findings helped me establish design principles for future development:
- The system exists to help the user manage their information; therefore, guide the user through all activities and provide helpful tools and instructions. All components of the design should be clear and easy to understand.
- Establish and reuse visual and interaction patterns. Consistency in the look and interactions will unite the product, present a unified experience, and will decrease pattern learning, confusion, and frustration among our users. This will create a trustworthy product.
- The product should enable our customers to get mundane work out of the way quickly, so that they can get back to what they really love – being on the floor, interfacing with customers, and sharing their love and knowledge of wine. Activities should therefore take as few steps or as little amount of time as possible. For example, do not block tasks with “are you sure?” pop-ups – this is disruptive and adds time to tasks; provide an “undo” instead.
- Be Accessible
- Use semantic markup so content can be read by screen readers; all functionality you can do with the mouse should also be available by keyboard; make sure text is readable – not too small, not styled poorly so that it makes it murky, make sure it passes a contrast check against its background color; use color to support information, not as the only means of conveying it.
- Be Forgiving
- Everybody makes mistakes – enable users to fix theirs.
I distilled the user research into 3 personas that we use as a starting point for new projects. These were iterated on from an original 6, which proved confusing because each one did not have enough distinction.
- Claire focuses on running the day-to-day activities of her program smoothly.
- Jenn balances efficiently running the operations of her three beverage programs, with understanding the higher level snapshot of her product activity and budget.
- Alisa oversees her restaurant and needs to understand the big picture: the financials, operations, and
Visual Design overhaul & the Pattern Library
UX flows aren’t everything – the visual design of the current product also negatively impacts the usability. For example, this collage shows 14 table examples that occur throughout the app.
Each table looks and behaves differently from the others. Some interactive elements are not obvious. On the tables and reports in general, text is scrunched together, there are too many columns of numbers, it’s very difficult to parse through to make any sense of what you’re looking at.
Evaluating areas like these helped me to establish goals for the visual design going forward. The main goal is to define a new visual language that supports the function of the app. As we found in the interviews, our customers don’t really care about aesthetics or how shiny a gradient is. All that matters to them is that the product works and enables them do what they need to do.
To that end, the redesigned visuals must…
- Present information clearly and in an organized way
- Create a visual hierarchy to help guide the user through the screens and their tasks
- Should unite the product to make a consistent system that looks and functions as one experience
These visuals are assembled in a live pattern library as a place for the UI patterns to live and the code to be documented. The pattern library also creates a shared vocabulary among the team, and reduces tech and design time with its system of reusable styles and components.
Some progress shots on the visual development, done in Illustrator:
Live Pattern Library
The examples above show some early pattern development in Illustrator. Once I got the general ideas down, I refined and polished them in the browser. I’ve found success in working this way because software like Illustrator or Photoshop never gives you a realistic example of how a web design will look and function in, well, web browsers.
Unfortunately the Pattern Library is not public, so… behold! Screenshots!
(Some of this work is in-progress.)
Through testing new projects that use the pattern library styles, we’ve gotten comments on the new design as being “very clear” and “easy to understand.”
In Part 2 of this series, I’ll talk about how the user research, UX work, and pattern library helped a redesign of the Inventory system, a core area of the app that gives us some of the most trouble and support tickets.