top of page
Progress Retail - Dashboard

A responsive retail education and daily management dashboard

Responsive Dashboad Design | UI | Design System

Progress Retail Hero.png


Project Duration
May 2020 - June 2020

Carnelian Inc.


Progress Retail


  • Visual Design

  • Mid-Fi to Hi-Fi Wireframes

  • Design System Components

  • Documentation for Developers

The Challenge

Progress Retail specializes in retail education. The core product is a platform with hundreds of training videos covering best practices for every aspect of a retail employee's day to day. In 2020 they commissioned Carnelian Inc. to expand their platform to design management and communication tools and combine them with the training material into a comprehensive all-in-one platform for retail management and training.

My Role:

Once the user experience and wire frame work was complete, I was tasked with refining the visual design into a design system with consistent layouts and components for a clean, professional, and fresh look that can adapt to all the functions and states of the product.

UX Wireframe to Final UI

My job was to transform the medium-fidelity wireframes into high-fidelity screens ready for developers to build from. Together with the team, we developed a light, modern dashboard that uses cards with generous margins and whitespace to create a good separation between different features and to be easy on the eyes. The result is a dashboard that is informative and functional with great clarity and a soft and fresh aesthetic.

UX to UI.png

Responsive Layouts

Great care and attention was paid to make sure each card and element showed up as well on mobile and tablet as it did on the desktop. Retail employees would likely use mobile devices to access the system during a shift and the experience needed to be consistently pleasant and easy to use in all scenarios.

Responsive Design.png

Grid-Based Layouts and Components

I developed a system of proportional spacing to create a consistent modular look and to make the spacing decisions easier and more consistent for future additions. I used multiples of 10 pixels to create this cohesive look that appears highly polished and sophisticated while being easy to replicate and extrapolate.

Mobile Dims.png

Print Ready Label Design 

Desktop Dims.png

Design System Sticker Sheet

Using the modular spacing and elements of the main screens, I assembled component sheets to use as a design system for the production of all other screens as well as future screens yet to be added. All the elements use harmonious color, radii, and padding, and proportions to achieve a fresh, professional look that reinforces the helpful, unobtrusive tone of the brand.

Progress Retail Sticker Sheet.png

Up Next

Respiratory Recharge - Commerce Website and Branding

bottom of page