Ready to finally invest in great design? Let's get started!
Revamping a Supply Chain Dashboard
Johnson & Johnson needed a revamp of their current Supply Chain Dashboard to improve the efficiency, intuitiveness, and overall user experience
Client
Johnson & Johnson
Remote
My role
Lead Designer
Main areas of responsibility:
- UX analysis (flows and persona)
- Design (product, application)
- Hi-fi prototyping (user flow and interactions)
Tools used
Figma
Miro
Looker
Tableau
PowerBI
Project dates
August - October 2023
About this project
Johnson & Johnson'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.
Project 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
The objectives and goals for this project were seemingly straightforward. I wanted to define them as simply as I could since the overall architecture of the existing product was complex.
Optimize the analytics to be easily digestible, manipulated, and understood. Design the user experience to be catered to user work flows
Design the new dashboard to be interactive, simple, and aesthetically pleasing
Business challenges
There were quite a few challenges during the entirety of this project, however, I was able to provide a completed deliverable despite them - which goes to show that even though there are *usually* hiccups in the design process, a seasoned designer knows how to navigate them in order to present a finalized product
We had a very short timeline to get this done (2 months)
There was very little time to get this project done, so I didn't have the luxury of being able to gradually progress through all of the typical design phases. Instead, I did a lot of bouncing around between stages (ideation to research, iterating immediately after feedback, and more)
The developers were overseas and due to the time difference, there was a lag in passing design off to dev
This proved to be quite difficult when doing research prior to design. I had to talk to Devs to ask about my limitations/restraints when it came to certain platforms (Looker, Tableau).
The users weren’t exactly sure WHAT they wanted, they just knew what they DIDN’T want
The stakeholders primarily focused on what they didn't want in the new product vs. what they were looking for. Therefore, I had to strip the existing product of the pain points and then build from there.
Since J&J is such a large company, stakeholders were often busy which made it difficult to get face time with them for feedback
Getting face-time with the stakeholders was tricky during this project. Since J&J is a huge company and they had other priorities, I had to learn to make each meeting streamlined, focused, and straight-to-the-point.
Let's begin with the 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 seeing and interacting with 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:
- What are the main goals or tasks that you perform on the dashboard?
- What are the pain points or challenges you experience while using the current dashboard?
- Which features or data on the current dashboard are most important for you to access quickly and easily?
- How does the current dashboard fit into your workflow, and are there any gaps or inconsistencies in the process?
- Are there any particular user groups or roles that have unique needs or preferences when it comes to the supply chain dashboard?
- 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 insights gathered from the user interviews
Main goals
91% of people said their main goals were:
1. Evaluate the current state of a product
2. Assess any urgent risk in the supply chain
3. Export Product Overview screens to add to reports
Biggest pain point
98% of people said their biggest pain point was:
1. Not being able to quickly find what their looking for
Workflow
32% of people said the current dashboard does not fit into their current workflow
User persona
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.
After research, the information architecture was created
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.
Information architecture / user journey
Below is a high-level overview of how the ideal Supply Chain Dashboard would function. *Note: there were several different iterations of this flow, but for the sake of brevity, I'm only including the final approach.
Once the information architecture was completed, it was time to put the designs into action!
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 unusual but proved to be successful for this project.
First round of iterations
User feedback after testing / meeting with stakeholders:
- Too much data at once - users want to only a certain amount of data that is crucial for their workflow. The other data can be found using the filter system or drilling down into a product
- Different color scheme - they wanted something a bit more robust in terms of colors instead of the pastel hues
Second round of iterations
User feedback after testing / meeting with stakeholders:
- This time, users wanted to stay away from tables and remove the products. Instead, we would have a “select product” page where they could do a deep dive into individual products
Third round of iterations
User feedback after testing / meeting with stakeholders:
This wasn't really an iteration but more of a test to see if we could keep all options at the top as a clickable nav bar and eliminate filters. This didn't end up winning the vote and was later archived.
Final round of iterations/final screens
Below are some of the final screens for the Supply Chain Dashboard. *Note: real date was omitted in order to protect privacy of JJ business
Key takeways from this project
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
