Supersmart Web Dashboard

CASE STUDY

Supersmart is a B2B2C company that develops solutions for smart shopping in retail stores, primarily in supermarkets and convenience stores. Among their products are a scanning application, a tablet-based management system for store employees, interfaces for scanning devices, a smart cart application, and more. Control over all these tools is remotely managed through a web-based dashboard accessed by managers and store administrators.

Who is Supersmart? Why do they need a dashboard?

About the Project

In this project, I contributed to designing and planning Supersmart's dashboard system, which included the dashboard interface, new user flows, content strategy, and more. I dedicated time to researching and understanding the overall user experience. My goal for this project was to rethink the user’s needs and redesign the overall user experience to empower administrators and users of retail companies, enabling them to create the most functional dashboard system for their work

✍🏼 My Role

Architecture Design, sketching, workflow, UI, prototyping, dev handoff, design reviews, and support through development.

UX Design Lead (Hands-on):

👫 Team

1 UX Design Lead

1 UX/UI Designer
1 Product Manager
1 Technical UX Writer

1 Full-stack Developer

1 Front-end Developer

🧰 Tools

Figma

Moqups

Slack

Jira

Whiteboard

Pen & Paper

Old Design

The Problems

Need to prioritize crucial information to the top of the page.

Information Hierarchy:

Desire to add more information to the main page.

Content Expansion:

Many pages lack flexibility for text adjustment in different languages.

Language Flexibility:

Icons and graphics present an outdated and messy appearance.

Outdated Icons and Graphics:

Inconsistencies in font styles and sizes.

Font and Size Alignment:

Currencies with extensive characters don't fit within info boxes.

Currency Display Challenge:

Rigidity in accommodating new features.

Limited Feature Integration:

The introduction of a new logo and branding requires emphasis.

Branding Update:

Challenges

Minimizing backend workload for developers is a priority.

Backend Efficiency:

Prioritizing visual presentation of data and information flexibly to diverse client needs.

Flexible Information Prioritization:

Undertaking a comprehensive redesign of the entire User Interface.

Complete UI Overhaul:

Providing seamless support for over 15 different languages.

Multilingual Support:

Research and user needs

The Product team conducted interviews with about 15 company clients, primarily administrators or dashboard operators. They were asked 12 key questions regarding the usability and experience of our beta version dashboard to sharpen their needs.

Each interview was summarized into customer profile cards, segregating negative and positive feedback for specific adjustments.

The data gathered played a significant role in the redesign planning of the dashboard, allowing for a more refined understanding of customer needs and experiences.

User task flow

As I identified specific user needs, the essential features became more clear. With limited time, I strategically prioritized the core user requirements, ensuring the dashboard offered crucial information, insights, and metrics without overwhelming complexity.

What are the fundamental components of the New Supersmart Dashboard?

Layout

After I studied the layout, I designed a few rectangle and square containers to fit the new dashboard's entire user interface. The different sizes of containers will contain different information. Each container design will help the pages be more responsive to fit different screen sizes.

Research to Design

Two design concepts for the main screens were developed based on this research. The product team conducted A/B testing with the clients and refined the design based on the one that garnered the most favorable reviews.