VendCo. Redesign
Creating a visual design system
Our client, VendCo., has been a leading innovator within the vending machine solutions industry for more than 80 years, working with businesses around the United States to optimize and enhance their vending operations. While still strong within the market, our client was concerned with how their legacy software could stay competitive within the growing market of vending management systems using cloud based technology.
With a user-centered approach, the goal of the project was to discover, create, and document a new design system that can be implemented across multiple applications.
In a team of four designers, I specifically worked on the conceptual mapping, rapid prototyping, and creation of the style guide / visual design system. I will speak to the design system specific to this case study.
Opportunity and Solution
Our goal was not just to create an aesthetic re-skin of the current UI, but to improve the overall user experience. During the initial 1.5-week guerrilla research & discovery sprint, we dug deeper to try to understand why exactly our client's users were leaving for other vending solutions.
Our client's software package consisted of 2000s era applications acquired from different companies. Using different applications with different interfaces only adds cognitive load and a gap to interrupt work. Additionally the software's current architecture and flow did not match the natural flow of work, resulting in the company spending more time and resources on training users on how to maneuver the software.
Our solution lets users operate within a flexible dashboard that that helps them manage their day to day operations.
Moving forward with the Design
We used low-fidelity wireframes to test and validate our assumptions in regards to the framework, navigation, and basic structure of the new dashboard.
Advanced function; simple experience
The client's vending software is data-heavy and web-based, so we needed our design to be lightweight, readable, and responsive for mobile & tablet use. We understood early that the new system needed to be clear, clean, and flexible.
Our redesign couldn't just be pretty looking. The new system we designed needed to work with any content, be filled with varying amounts of data, and used by different types of parties. The system needed to be understood by business owners, warehouse managers, field technicians, and anyone else involved in the logistical operations.
Iterating and moving forward, we solidified pages and templates, while testing out more granular components and functionality.
As the first stages of the design started to wrap up, I led a color preference test with the client. This provided an opportunity to directly include our clients in the design process, while also asking these important questions:
- Which design do users prefer?
- Which colors look most trustworthy?
- Which colors make information clear to understand?
- Which colors make information hard to see?
Keeping on brand with colors
A unanimous vote in favor with color option 3 (with a few adjustments). Working with the client's brand guidelines, the system is predominantly ice-white, shades of blue, and black. Blue is used for primary actions as it is one of the client's core brand colors.
The Design System
The style guide is made up of foundational elements like icons, typography, buttons, and templates. The system is organized in an atomic design-esque structure, utilizing pages, templates, components to help communicate implementation.
icons
buttons
The Conclusion
The plan was to help them design a new system, that scales for different product applications. We handed off the style guide using Zeplin and used inVision for the mockup. Our client's development team implemented the new system while our in-house engineers assisted.
What's next?
I would like to perform on-going usability tests to identify usability painpoints and solutions.
- Which parts of the redesign work well? Which are still problematic?
- How will the design hold out when adding more complex features and information?
- A/B testing of new or potential designs (think aloud)
Separately from this specific project, I am currently studying other design systems like IBM’s Carbon, Zendesks Garden, and Workday’s Canvas. Alongside that, I am slowly chipping away at learning React, so I can work with developers to properly document code with a design system.
