B2B Product | Data Visualization
Redesigning PepsiCo's Waste Management Tool to provide stakeholders with prioritized, efficient insights
Project Type
Contract
Duration
4 months
Team
4 UX Designers
2 UX Researchers
My Role
UX Designer + Visual Designer
PROJECT OVERVIEW
THE CHALLENGE
Inefficient Retrieval of Important Insights
PepsiCo's E2E Waste Diagnostic Tool offers crucial insights into waste management performance across the value chain, addressing varied departmental needs and KPIs. However, users face obstacles in accessing key insights due to issues like information overload, inconsistent hierarchy, and insufficient interactivity.
THE SOLUTION
Enhancing the Efficiency and Usability
We focused on redesigning 4 key data tabs to optimize the efficiency and usability of the tool by streamlining the user flow, creating diversified data visualizations, and implementing intuitive interaction designs.
Brand Detail
*The data used in the prototypes does not represent actual data and is for illustrative purposes only
THE RESULTS
65% ⬆
Improved in data extraction efficiency
Before
After
Benchmarking View
Before
After
Value Chain Detail
Before
Value Chain Summary
After
Before
After
30% ⬇
Reduced in unnecessary user actions
95% ❤
Achieved in user satisfaction rate
THE PROCESS
Let's dive into the process! ⬇
BACKGROUND
Why do we need to redesign?
What are the high-level goals?
*current design (Important data was hidden for confidentiality)
PepsiCo's E2E Waste Diagnostic Tool is currently being used by multiple departments to gain valuable insights into waste performance throughout the entire value chain.
However, users are experiencing inefficiencies due to excessive time spent navigating and drilling down to access relevant insights.
🎯 Enhance the efficiency of the insights retrieval process
🎯 Improve the overall visual design and user experience
🎯 Foster increased user engagement and satisfaction
RESEARCH
THE METHODS
Given the limited access to the platform and database, how do we choose research methods to help us better understand the functionalities and identify any potential issues?
RESEARCH PROCESS
01. Heuristic Evaluation
What are the issues in the current interface design?
✦ Insights: Based on the heuristic evaluation, we found that the current design was overwhelmed by a large amount of data and lacked visual consistency.
02. User Interviews
What are the users’ opinions?
Research Goal: Obtain valuable insights into users' opinions regarding the tool, identify their specific needs, and uncover any pain points they may have encountered
Participants: 10 Business owners from different sectors/divisions in PBNA
03. Walkthrough Observations
How do users interact with the platform?
✦ Observations:
01. Repeated steps and excessive clicks to accomplish their tasks
02. Large amount of irrelevant data often distracts users
RESEARCH SYNTHESIS
Summarize research findings with persona and user journey map
◈ CHALLENGE #01
With the platform being used by multiple departments, how can we identify the primary users?
Despite being utilized by multiple departments, we finally identified two primary user types based on their distinct needs, goals, and interactions with the tool.
✦ Key Insights from Research
Persona #01
Focusing on general waste performance
These users are interested in the overall waste performance, trends on a monthly/yearly basis, and comparisons between markets, brands, and divisions.
Persona #02
Focusing on detailed waste information
This user group utilizes the tool on a weekly basis and requires access to detailed waste metrics across the value chain.
◈ CHALLENGE #02
While the user KPIs may vary, what is the typical user journey when interacting with the platform?
Based on the findings from interviews and walkthrough observations, we created a user journey map to help us synthesize the collected information and gain a comprehensive understanding of the steps and actions required to extract key insights, allowing us to identify potential opportunities for redesign.
Insight #2
Confusing Hierarchy and User Flow
Users expressed dissatisfaction with the tool's unclear information hierarchy and user flow, resulting in a time-consuming navigation process and difficulties in locating specific data.
Insight #1
Information Overload
Users frequently encountered a significant amount of irrelevant data while using the tool. The overwhelming data on the interface often diverted their attention and hindered their ability to focus on their intended directions and goals.
Insight #3
Limited Visualizations and Interaction
Users expressed frustration with the limited visualizations and interaction options within the tool. This limitation made it challenging for them to grasp the scale of waste and actively engage with the interface.
DEFINE
THE PROBLEMS
Problem #1
Information overload makes it difficult for users to focus on their intended directions and goals
DESIGN OBJECTIVES
Problem #2
Confusing hierarchy and user flow lead to excessive time navigating and locating data
Problem #3
Limited visualizations and interaction prevent users from gaining an intuitive understanding
We identified 3 major problems based on the user research insights and established clear design objectives & HMW Questions for each problem to provide guidance for the redesign process.
PROJECT SCOPE
Define the project scope by considering the constraints and priority
Evaluation of Urgency: To determine the urgency of the redesign, we assessed the user research findings, focusing on factors such as the frequency of usage and the severity of problems.
Evaluation of Feasibility: We also considered the feasibility based on constraints, including time limitations and our estimated capabilities.
◈ CHALLENGE #03
Faced with all these constraints, how can we determine which part of the platform should be prioritized for redesign?
Priority Analysis: Feasibility vs. Urgency
IDEATE
IDEA GENERATION
Visualize potential redesign solutions with sketches
With 3 major problems in our minds, we conducted brainstorming sessions to generate redesign ideas. We also sketched some data visualization ideas to illustrate our concepts for further exploration.
INFORMATION ARCHITECTURE
Revamp information architecture to ensure an organized layout
We created an information architecture to determine the inclusion of information in each tab and employed low-fi wireframes to visualize the overall structure, ensuring a clear and organized interface
USER FLOW
Redesign the user flow to streamline user experience
We revamped the user flow for each tab, reimagining how users will interact with the interface to efficiently retrieve insights in a streamlined manner
DESIGN & TEST
MID-FI EXPLORATIONS
3 rounds of design explorations and weekly feedback sessions
We spent 4 weeks exploring various layouts, visualizations, and styles based on the information architecture and user flow. To ensure we were on the right track, we engaged in weekly feedback sessions with our users to gather their valuable input. We then proceeded with three rounds of iterations based on their feedback to refine our design.
USABILITY TESTING
Evaluate the prototype with users and gather suggestions for further refinements
Before designing the Hi-fi prototype, we conducted usability testing with 3 primary users to evaluate the prototype and identify any usability issues that require further improvements
Methodology: Task Completion, Think-Aloud, Interviews
Metrics: Task Completion Time, Number of Clicks, Satisfaction Rate
KEY ITERATIONS
Improve the design based on the feedback from usability testing
DESIGN SYSTEM
Establish a design system to ensure visual consistency across all pages
To ensure a consistent visual style and improve the efficiency of designing hi-fi prototypes, I have developed a design system for my team. In creating this system, I have taken into account PepsiCo's brand identity and visual accessibility guidelines.
HI-FI PROTOTYPE
Finalize the design solutions and the interactions
To simulate real user scenarios, we have designed hi-fi prototypes that incorporate intuitive interaction designs (The data used in the hi-fi prototypes is not actual data and is for illustrative purposes only).
Brand Detail
Before
Problems
01. Lack of descriptive and insightful comparison across brands
02. Similar bar charts take up spaces; require vertical scrolling
03. Too many columns and numerical data
After
Key Improvements
✨ 01. Streamlined User Flow
Reorganized the order of information presentation to enhance efficiency and clarity, ensuring a smoother user experience.
✨ 02. Diversified Visualizations
Used various visualizations to illustrate the brand performance and enable direct brand comparisons, ensuring comprehensive data understanding. Color highlighting emphasizes important information and notable changes, facilitating efficient insights extraction.
✨ 03. Reduced Data Display
Minimized information overload by reducing data on the interface. Instead, we implemented interactive designs for users to access detailed information directly from the graphs, resulting in a focused and interactive experience.
Benchmarking View
Before
Problems
01. Difficult to find important data in the spreadsheet
02. Difficult to make comparisons and understand the waste scale
After
Key Improvements
✨ 01. Intuitive Visualization
Designed visualizations that represent the scale of waste in different divisions, enabling intuitive comparisons.
✨ 02. Interactive Pie Chart
Implemented interactive functionality in the pie chart, allowing users to click on each division to access detailed data.
✨ 03. Collapsible Forms
Incorporated collapsible forms to reduce distractions by hiding unnecessary data, enhancing the overall user experience.
Value Chain Detail
Before
Problems
01. Similar visualizations take up spaces
02. Visualizations are crowded and too small to read
03. Too much data without highlighting the important ones
After
Key Improvements
✨ 01. Consolidated Interface
Merged similar visualizations and added a toggle feature for waste sectors, reducing information overload on the screen.
✨ 02. Intuitive Visualization
Employed intuitive visualizations to compare waste across the value chain between the previous year and the current year.
✨ 03. Enhanced Interaction
Integrated the bar chart and form, allowing for seamless interaction, and incorporated hover effects for quick access to detailed data.
Value Chain Summary
Before
Problems
01. The Information hierarchy is chaotic
02. Difficult to understand how significant they are & compare to other markets
03. Does not show how each market contribute to the waste
After
Key Improvements
✨ 01. Reorganized Information Architecture
Redesigned the information layout, grouping relevant sections together to improve the interface's scannability and overall user experience.
✨ 02. Diversified Visualizations
Incorporated a wide range of visualizations, including bar charts, line charts, and waterfall charts, to effectively showcase the scale of waste changes.
✨ 03. Intuitive Interaction
Implemented intuitive interaction designs that allow users to gain a comprehensive understanding of each market's contribution to waste in the entire value chain.
IMPACT
How do we measure the success of our design?
After completing the hi-fi prototype, we conducted a second round of user testing to evaluate our final solution using multiple success metrics.
Improved data extraction efficiency by 65%
By measuring task completion time, we discovered that users spent 65% less time retrieving important insights.
Reduced total user clicks by 30%
By analyzing the number of clicks, we observed a 30% reduction in user clicks while navigating through the tool.
Achieved a 95% user satisfaction rate
Users expressed high levels of satisfaction with the diversified data visualizations and intuitive interaction design.
NEXT STEPS
What are our plans for future improvements?
We have also developed plans to further improve the tool, focusing on exploring the capabilities of Power BI, enabling customization for each department, revising educational content for effective onboarding, and highlighting the tool's capabilities to attract a wider user base.
REFLECTION
01. Designing a Data-Heavy Platform
To address the complexities of the data-heavy platform and our team's limited experience with business intelligence systems, we adopted a proactive approach. We engaged in frequent communication with clients and users to gain a clear understanding of the tool's functionality, capabilities, and specific needs and use cases.
02. Addressing Diversified User Needs
To accommodate diverse user needs across multiple departments, we condensed them into two personas to gain a comprehensive understanding of their goals, motivations, and behaviors. Through user journey mapping techniques, we simulated their interactions with the platform, identifying pain points and redesign opportunities.
03. Working with Limited Time and Resources
Despite limited access to the database, we employed alternative methods to understand the tool's functionality. This included heuristic analysis, user interviews, walkthroughs, and testing. Considering time constraints, we conducted feasibility analysis and prioritized the redesign scope to ensure timely delivery of a high-resolution design.