J&J's supply chain team was looking to re-vamp their internal Supply Chain Dashboard. Since Supply Chain itself comes with complex analytics, they wanted a Dashboard that was easy to digest, present, and export information.

👩‍💻 My Role: Lead UI/UX Designer

🔨 Tools: Figma

Background

The existing supply chain dashboard was not meeting the needs of its users due to it's overwhelming, bloated, and non-user-friendly design. Users are experiencing challenges in accessing and processing the vast amount of data and information presented on the dashboard, leading to increased frustration and inefficiency. The current design does not consider the users' goals or workflows, resulting in difficulty in performing essential tasks and identifying critical information quickly. Therefore, there is a need for a redesign that simplifies the dashboard's interface, reduces its complexity, and makes it more intuitive, user-friendly, and accessible to meet the needs of users, improve their experience, and increase their efficiency.

Objectives & Goals

1. Optimize the analytics to be easily digestible, manipulated, and understood. Design the user experience to be catered to user work flows

2. Design the new dashboard to be interactive, simple, and aesthetically pleasing

Design Process

Business Challenges

1. We had a very short timeline to get this done (2 months)

2. The developers were overseas and due to the time difference, there was a lag in passing design off to dev

3. The users weren’t exactly sure WHAT they wanted, they just knew what they DIDN’T want

4. Since J&J is such a large company, stakeholders were often busy which made it difficult to get face time with them for feedback

Research

I conducted plenty of research on the existing Dashboard so I could make informed design decisions for the users going forward.

Desk Research

I first spent some time exploring the current Dashboard that users were using on a daily basis. I walked through it and observed some of the “clunkiness” and “bloat” that stakeholders mentioned in our original discovery call.

Competitive Analysis

The two platforms that I compared were Tableau (what J&J was already using), and Google’s Looker (since stakeholders brought this up multiple times in the discovery calls). They wanted this new dashboard to be a seamless combination of the two platforms and to compensate for where the other two were lacking.

User Interviews

I conducted face-to-face user interviews via Zoom to watch how users’ interacted with the existing dashboard. I asked them to perform their daily tasks and to call out any pain points while they were moving throughout the flow.

Questions asked during the recordings:

1. What are the main goals or tasks that you perform on the dashboard?

2. What are the pain points or challenges you experience while using the current dashboard?

3. Which features or data on the current dashboard are most important for you to access quickly and easily?

4. How does the current dashboard fit into your workflow, and are there any gaps or inconsistencies in the process?

5. Are there any particular user groups or roles that have unique needs or preferences when it comes to the supply chain dashboard?

6. Are there any particular trends or changes in the supply chain industry that may impact the design and functionality of the dashboard in the future?

User Insights

User Persona

Information Architecture

The information architecture of this product was incredibly complex and changed very often throughout the design process. The stakeholders changed their requirements many times over, so it was definitely a challenge maintaining the structure of the information architecture when some of the existing requirements were no longer necessary, or some were added that weren’t originally mentioned.

That being said, I am only including the final IA diagram as the rest are trivial and not relevant to the final deliverable of this product.

User Flows

High-Fidelity Mockups

Due to time constraints on this project, the stakeholders wanted to begin with high-fidelity mockups so we could get testing with users as soon as possible. Therefore, all of our iteration was done via high-fidelity mockups, which was definitely unusual but proved to be successful in this specific case.

First round iterations

Second round iterations

Filter Test

One of the most important parts to this Dashboard was users being able to filter the data so that they could get access to the exact information they were looking for. I decided to test whether users preferred the filters in a sidebar on the left side of the page vs. on the top of the page.

*Note: during the last two rounds of testing, there was no indication that the users were confused by the filters as this is a common user behavior, so I did not think it was necessary to test. However, stakeholders urged that they wanted to test it, so I created a version of the screens with the filters on top.

Final round of iterations/final screens

Project Takeaways

1. Users need access to real-time data: Users want access to real-time data to make informed decisions and take corrective actions when necessary. This means that the dashboard needs to be updated frequently to reflect the most recent data.

2. Users prefer a simple and intuitive interface: Users want a dashboard that is easy to use and navigate, with a clear and organized layout. They prefer a simple and intuitive interface that presents essential data in a user-friendly manner.

3. Customizable views and dashboards are essential: Users want the ability to customize views and dashboards to focus on the most important data and tasks. This allows them to tailor the dashboard to their specific needs and workflows.

4. Mobile accessibility is critical: Users need to access the dashboard on-the-go, which means that it needs to be mobile-responsive and accessible on both desktop and mobile devices. (*Since this project was focused on creating the MVP, mobile design wasn’t incorporated. However, it came up frequently in our user interviews & tests, so I urged Johnson & Johnson to follow-up on the mobile functionality).

5. User testing and feedback are essential: User testing and feedback are critical in identifying issues and opportunities for improvement. It is essential to involve users throughout the design process to ensure that their needs and preferences are taken into account.

6. Data visualization is key: Users need data presented in a clear and visual manner to enable easy analysis and decision-making. Charts, graphs, and other visual elements can help users quickly identify trends and patterns.

Thanks for viewing 🤙🏽

Interested in working together?

Let's hop on a call and chat! You can email me at [email protected] or book some time with me here.