Progress Retail - Dashboard
A responsive retail education and daily management dashboard
Responsive Dashboad Design | UI | Design System
Overview
Project Duration
May 2020 - June 2020
Employer
Carnelian Inc.
Client
Progress Retail
Responsibillities
-
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.
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.
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.
Print Ready Label Design
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.
