TCM - Dashboard

Category -

UI / UX - Branding

Introduction

As a lone UI Designer on the team when I joined Netweb India as a Freelance Designer, I contributed to the company’s growth in terms of software redesign. In this case study, I will discuss one of the challenging projects I worked on alongside my mentors, Sneha Rao & Mr Sandeep Lodha. I worked solo on this project in terms of designing and user experience, but received input from several team members: Marketing Director: To comprehend the requirements and determine the scope of the project. Higher Management: Received timely input on the design from them. Developers: Ensure that the final product matches the design specifications.

Project Goals

After login in, the user needs to have the ability to check on the status of the hardware. After that, the system should display all of the essential hardware statistics.

Research

To comprehend the difficulties, I gathered information about the users who use this type of hardware. Examined what it takes to maintain a user’s ability to effortlessly accomplish and track all tasks.

Script

Problem

I had to create the product from scratch because it was brand-new, therefore there weren’t many issues. Though I had previously worked on a smooth onboarding experience for users, it was a struggle to create a dashboard so clear and seamless that users of any age could execute the necessary tasks. Hence, I chose to give the dashboard a contemporary appearance and a smooth user experience. Let’s get started! 🚀

Solution

1. User Flow


This stage was important to the design as there was a lot of information to convey and a number of activities to execute. Keeping a clutter-free interface in mind, I designed the dashboard’s structure as follows:

2. Pages Layout


This part wasn’t too tough because I had already talked to users and figured out what the most important features were. I decided to split the dashboard into two main vertical sections:

i) Primary Section: This section would be a dynamic section with daily-use/go-to features that let users keep track of their Nodes and clusters and do other important things like managing their Nodes, watching how their Nodes are performing, viewing task details, etc.

ii) Secondary Section: This section would be static and include things like Node Details, etc.

3. Creating Cards


To eliminate confusion and unnecessary clicks, I wanted the cards to be as helpful and clear as possible. The cards should let the user comprehend them just by glancing at them.

To minimise user misunderstanding, the first card on the homepage includes a symbol associated with each group as well as limited content.

4. Compiling everything

This was the last stage of the redesign process. By this point, I had established a system, and the pieces needed to be fitted together.

What did I learn?

After doing this assignment, I realised the following:

i) It is always important to first map out a user flow before beginning work on a complicated screen with a lot of material and actions to be done.

ii) It’s possible that a decent user flow isn’t always adequate. Especially if you’re building something that caters to a large user base, there will always be new difficulties to tackle at each phase of the process, and there will also be a lot of revisions.

iii) Customization is usually a good idea when designing a screen that users will see every time they use a product.

iv) To improve your designs, it’s better to receive criticism objectively.