Design of a Clothing Management Dashboard

Voyant Dashboard App
UI Design

Clothing store managers spend most of their time on the store floor. To help them manage a store, Voyant provides an intuitive dashboard focussed on simple analytics and clear organisation.

unplugged case study mockup

Project Overview

As part of brief, I collaborated with a small team of designers to design the user interface of a business management dashboard for clothing store managers. We were provided a low-fidelity wireframes which set out the main idea that the client wanted. The goal of this project was to design the user interface and interactions of an analytical dashboard.
Role
  • ✓ UI Design
  • ✓ Prototyping
  • ✓ Component Design
Tools
  • ✓ FigJam
  • ✓ Figma
  • ✓ Loom
Project
  • ✓ Rapid Design & Prototyping
  • ✓ Teamwork

The Brief

Design a user interface for Voyant, a business management dashboard for clothing store managers. Clothing store managers spend most of their time on the store floor but need to verify how the business is doing daily versus the targets they have set. On top of that, they want to ensure that they have enough stock of clothing items, and run a variety of recurring small operational tasks to move their business forward.

Hypothesis

We believe that [by making it easier for users to verify how the business is doing daily versus targets, ensure that they have enough stock of clothing items and run small operational tasks, it would increase their productivity.

The Solution

Taking into account our research on dashboards, we took the low-fi design and designed a high-fidelity interactive prototype. The main components that we focussed on was the navbar component, the daily versus target infographic component and the current stock tracker component.

unplugged case study mockup banner

The Outcome

After creating the hi-fi prototype, we received feedback from users on the search experience. We validated that it was clear to the users that they can have a unique view on their profile to see their own to-do list but also company information at a glance.

The Design Process

Planning

Based on the low-fi wireframes, we focussed on breaking down the design of the dashboard into sections. This step was important so that we could have clear structure and hierarchy of the information on the design.

unplugged case study observations

UI High Level Tasks

After considering the structure the dashboard will have, we set out the high level tasks to design the UI which included building a style library, creating consistent components and building a hi-fi prototype.

unplugged case study info architecture

Design Principles

When creating the dashboard, we followed certain design principles to ensure that it is effective and user friendly.

unplugged case study journey map

Styles & Components

To create the high fidelity prototype we inspected the products style and followed the 4px rule to effectively and easily create a prototype that was consistent with the product styling. Before creating the prototype we defined styles and components to easily and quickly help us design consistently.

unplugged case study journey map

Design Analysis

We followed a systematic process by developing a clear and hierarchical design that included all the components that the user would need on the dashboard.

unplugged case study accessibility

High Fidelity Prototype

Below is a video of the prototype that we created. We included interactions and transitions from Figma to match the products flow.

Outcome

Designing this dashboard was a great experience as there were many things to consider for the UI. We reflected on how we approached the project, where we could improve next time and what the highlights were.

unplugged case study accessibility