Design Challenge — Redesigning UX of an S.Q.C.D.P. dashboard for a Transport Company

As the title suggests, this was a design assignment for a popular transport company and I‘m writing this particular article to show how I solved the problem statement. Also, this might help any designer who might come across a similar design assignment for the first time.

The Challenge 🎯

The Product Manager at this company provided me with the problem statement:

**The SQCDP is an interactive web-based dashboard that captures team-wide concerns and incidents in the areas of Safety, Quality, Cost, Delivery & People. The tool offers the following capabilities:

1. Login module — lets the user access the application using their email and password using different forms of authentication methods.
2. Dashboard — provides a high-level view of the overall status of concerns in the month. Each day is assigned a colour based on the number of days concern has been remained unresolved.
3. Users can be assigned as focal for different categories and have the capability of Notifying the assigned users.
4. Raise Concerns — Screen where users can raise concerns in the related categories. They should be able to provide detail of the problem, department, severity, possible solutions of the concern. They should be able to upload attachments in a concern. Focal should be allowed to change the status of the concerns and reassign it to other users.
5. View Concerns: The users should be able to see all the past and current concerns which have been logged into the system.
6. Reports: Reports screen consists of multiple KPIs which can be used by the leadership team to understand how & when they can improve team experience and observe the other trends.**

Choosing what to redesign 🤔

The statement didn’t specify which third party digital product or service was already enabled with such data visualization method. I had to hunt and do the research of diving deep into what was the reason behind users using the SQCDP view in terms of data vis. first & had to make this happen even before starting off with the competitors' analysis or brainstorming.

The deadline ⌛

This project had to be performed in under super short deadline of 2 Days as my role of UX Designer, I was to collaborate with a product manager who was leading this task & my wingman who was a full-stack developer. This Product was built in under a weeks time with the inspirational process of Design Sprint (Quoting the book: Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days — Book by Jake Knapp)

Brief on Finding the Solution 📖

Research is where it all started, seeking competitors’ references for digital designs, what worked & what did not — worked on the website as well as the reference images provided (Can’t display these previous images as per Non-Disclosure Agreement). The ideation phase took place with colour testing and pages designs refresh. Prototypes validation wouldn’t take place with users and stakeholders as the assessment suggested that the designer was free to assume in certain scenarios & the deadline was super short, according to our limited user inputs & assumption this portal was meant for the employees of this Brand to view and manage performance metrics according to the S.Q.C.D.P. form of data visualization.

Goals Decided ⚽

Brand Refresh: In this design challenge, an upgrade was made based on the refreshed experience & visuals of this Automotive Brand which recently had an upgrade, bringing about a change in the way the user experiences the brand. I believe this refresh was needed based upon the reference screens provided were of the previous guideline & SQCDP Web portal.

Rethink UX: As per my first glance at the references provided, I believe it was an analytical dashboard, providing the users with at-a-glance information used for analysis and decision making. They are less time-sensitive and not focused on immediate action. A primary goal of this kind of dashboard is to help users make the best sense of the data, analyze trends and drive decision making.

Revamping Design Consistency: Using Figma I have designed the portal with an understanding of the refreshed brand guidelines.

Finalized Objective for the Pitch - To strategise UX & redesign the following pages:

1. Login page
2. Dashboard
3. Raise/Edit Concern
4. View/Search Concerns
5. Reports Page

The Design Process ✏️

Understanding the Problem Statement ➡️ Competitive Analysis ➡️ User Interview — Short telephonic Interviews ➡️ User journey & Wireframing ➡️ Design.

Finalized user journey based upon the research outcomes. Red Marks High priority, Grey Marks Low priority. Designed on Invision Freehand

The design was kick-started on Figma post finalizing the user journey, achieving a new look and feel using hints and shades of blues, approaching a bold use of their refreshed brand, showing how they pioneered the digital environment.

Final Design ✏️

So coming to the design changes and I have justified every major upgrade that was done during this project. Since we had a short timeline as a designer, I concentrated on the UX and UI perspective of the portal.

Colours — I chose to completely change the brand colour & experiment with it changed it to the refreshed blue as per their new guidelines, added slight gradients of the colour which were relevant to representing the significance of SQCDP cards & visualization with each colour having their own significance, making it easier for users to recognize and Recall the purpose behind each card. These colours were preferred by the team and I ended up using them in my final design.

Notification & Search in the Navbar

Notification window & Search Box

I added the search & notifications features within the top navbar making it much simpler as it never existed in the previous version of the design. I found the previous way of creating a notification a bit disorganized, so I converted that part into a simple Notification button next to the search box. These buttons would prompt the user to search or check for notifications on the concerns raised when they click on it which would open up a popup form.

S.Q.C.D.P. Cards

Toggle Cards on the Dashboard classified into different categories of the concern.

The reason I wanted to completely redesign the SQCDP (Safety, Quality, Cost, Delivery & people) cards was the way it was displayed on the previous site was still in web 2.0 style and the hierarchy and the visualization was quite a mess (verticle placement, scroll to search for a category, etc) users complained about this! one cannot open a concern category card in a separate page. Instead, one can toggle between different cards.

Filters

Stream specific filters & view toggle buttons

I only used filters that were of importance to the users and discarded the rest. Based upon the user-specific feedback the Calendar view of the concerns had to be the default view as the users log in.

Calendar view of the dashboard

Calendar component of the dashboard — The default view

As per the process of the redesign phase, one of the major feature & functionality of the project was to design a calendar view for the leadership team to view the number of tickets or concerns logged for each day with a colour language signifying the priority of the tickets raised. The users should be able to raise a new ticket/concern or even edit the specific just by a click of a button located on each cell of the calendar.

Conclusion 💥

This was actually my first time redesigning such a complex dashboard in a sprint mode. The reason we finalized this particular design style was based actual data on how users use this portal, it was difficult to design it in this short timeline and in certain scenarios we also had to take a call based on own assumptions. I hoped to achieve a much cleaner and minimalist look which I believe I have succeeded in when compared to the previous version of this product.

Thanks for reading through it and clap if you liked the read of this case study! You can reach out to me on ***Linkedin*** in case you have any questions/feedback or even want to talk about design, I am up for it!