Contact me

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Contact Me
Product Design

C-Store

Convenience Store Inventory Management

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.

Client
CBORD
TIMELINE
2 weeks
Tools Used
Sketch, Abstract, Sketch Cloud
TEAM
Morgan Breier - Designer Will Ryan - Designer ART Product & Development Team
Year
2019

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.

Discovery

For the first couple days of the design sprint, we went over features that were needed in order to execute the ask.

Persona

In working with C-Store, there are 2 common types of persona we have identified:

  • Chris the Admin, Markets Administrator who performs functions for all of the Market Location
        ◦ Markets Administrator who performs functions for all of the Market Locations
         ◦ Most likely located in an office with a laptop
         ◦ Interactions: Adding new items to C-Store and the Micros systems. Monitoring prices, so when the vendor has a price increase the sell price is still profitable, by using the manage prices. Sets new sell prices, and produces shelf tags with the new price. Monitors the sales to be able to determine the top and bottom selling items. If an item is selling well he may modify the par and reorder points. If an item is selling poorly he may determine to discount the price and then discontinue that item.
         ◦ Issue: Increasing profitability of each unit while keeping labor hours at a minimum. Serving the needs of the current student
  • Carol the Manager, Unit Manager who oversees 1 Market location
         ◦ Unit Manager who oversees 1 Market location
         ◦ Most likely located in the unit and using a mobile device
        ◦ Interactions: Uses C-Store to generate orders function to get the recommended order quantities for the vendor orders that need to be placed. Verifies the on-hand item amounts. Places orders through the C-Store system. In the C-Store system she receives the orders noting any shortages or changes. Stocks shelves from storage or deliveries that are made that day. Reviews the Manage Product, Store Performance Sales Engineering report to see the top and bottom sellers. If an item is selling more rapidly she may choose to change the Par and the reorder of that item in the C-Store system.
         ◦ Issue: Keeping shelves full, and the store staffed. Increasing my unit’s sales over the same week last year. Serving the needs of the current student population.

Challenges:

Lack of Enterprise Knowledge

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.

Frankensteined Temporary Design System

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.

Team Syncups & Sketch Cloud

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.

Design

C-Store before styling
Progress Bar

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.

White Space & Color

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

Design Direction

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.

Screens from the Purchase Order flow - C-Store after styling

Prototype

...

Latest works