C-Store is Cbord's web-based inventory management solution for retail operations. Integrating point-of-sale (POS) and automated inventory data, C-Store is the solution that empowers retail managers to effectively manage real-time inventories, improve efficiency, customer satisfaction, and boost profits.
C-Store is undergoing a complete UI overhaul as there was no styling. There is no design member assigned to C-Store, so it's patch-worked together by designers who pick up side projects and developers. The C-Store Team approached us looking for a new UI for the pricing rules, purchase order flow and a log in.
TLDR; This was a 2 week project that needed to be done ASAP. No research, no personas, no testing. There was a few short meetings explaining enterprise products and user goals. No one was assign to C-store so it's pieced together by some designers and developers using multiple design systems or non at all. Quick and dirty.
CBORD C-Store is a scalable, easy-to-use retail solution that provides real-time information to help managers run their operations efficiently and cost effectively. C-Store is a truly unique solution, tailored for retail environments in the healthcare and education communities.
For the first couple days of the design sprint, we went over features that were needed in order to execute the ask.
In working with C-Store, there are 2 common types of persona we have identified:
Having never experienced enterprise software or anything even remotely related, grasping the concepts were difficult to follow. New terms, rules, lack of product team, and users created a perfect storm for ultimate confusion.
There was a struggle with getting a design system off the ground. There were talks about starting from scratch, using one available online, or both. At the time of creating the C-Store UI, there was a mix of old design systems from scratch and different design systems we found online to piece together a temporary design system. Many of the components were broken and did not look well together There was a lot of fixing and creating new components that were not approved for the design system that C-store needed.
I paired up with the Director for this project since he had an understanding of the product and enterprise in general. The challenge came from his tight time schedule and figure out what design direction he was going. We had to find time to go over designs quickly so the design felt the same.
When we agreed on a design direction, we would file share through Sketch Teams and Sketch Cloud. These products were still in beta and did not function how they were supposed to. Files would be lost, text would turn to default, and items would be scattered around the artboards. There were several hours lost to fixing the broken files. We figured that merging files resulted in mini-catastrophes. We had to work in 2 separate documents to achieve the designs.
The main addition to this flow is the progress bar. There are a few different flows and many of the screens look similar so it's important for users to be able to know where they are in the process.
The screenshots we got of C-Store before we started were bland. There were rows and rows of data that blended together; there was no spacing between items or text. The update included lots of more space between text and white space to give information room to breathe.
Utilizing color, we are able to draw the eye to call-to-action buttons and important information
Most enterprise software is extremely robust, but ugly. Since C-Store had no styling and they came to the design team, we hooked them up. Using what we could from the design system, Will and I were able to come together to create a seamless UI even though we worked on different pieces.