Hi, I'm Chen Edri, a UXUI designer
specializing in SaaS and mobile apps.
PI Admins Treemap
As Aperio's sole senior Product Designer, I led the design of the PI Admin product, focusing on key features like Overview Visualization with Multidimensional Representation. I explored Issue Highlighting with UX examples, perfected the Drill-Down Capability, and conceived ideas for Data Sorting, Filtering, and Navigation. Informed by user interviews, I crafted an intuitive tree map and integrated user-centric features, resulting in a comprehensive user flow that addresses crucial data quality issues.
🏙️ Company: Aperio
🗓️ Project date: 2023
đź–Ą project type: Desktop, b2b SaaS app
đź‘© Â my role: Senior Product Designer
Project summary:
Introducing the “Multidimensional Dashboard TreeMap” in the PI Admin project, Aperio’s solution for AVEVA PI System users. Addressing key challenges for engineers and IT professionals, this feature seamlessly integrates with PI, streamlining data management. Users gain real-time insights, enhancing efficiency, reducing waste, and ensuring production safety with accurate, accessible data from overall site overviews to specific sensors.
The challenge:
The primary challenge in designing the Multidimensional Dashboard TreeMap for the PI Admin product lay in balancing intricate functionalities with an intuitive user experience. we needed to address the complexities involved in providing tree map options, focusing on visual appeal and robust color coding.
Implementing features such as multidimensional representation, issue highlighting, drill-down capability, data sorting, filtering, and navigation required meticulous attention to the design system, ensuring seamless user interactions while persistently maintaining user choices across pages and sessions.
Tree map design when divided into engine groups
Additional challenges involved optimizing usability with a high number of squares, considering aggregation options, and exploring innovative solutions for customer onboarding, specifically incorporating geographical group reflections during initial user interactions.
Overcoming these challenges was crucial to delivering a comprehensive and user-centric solution for data quality analysis in industrial environments.
User tasks include tracking progress and prioritizing data quality problems across all sites.
Tree map sorted by only two variables with overview in tooltip when user hovers over sensor
user needs
Users need to streamline real-time data verification processes across multiple manufacturing facilities. Having a quick and efficient overview of data quality at various levels is one of the most important aspects.
The user seeks to implement AI-powered anomaly detection to promptly identify and resolve issues, ultimately enhancing the overall quality of the data collected. The goal is to provide the user with a comprehensive and timely understanding of the data landscape. This will enable them to report accurate progress to their managers.
AI-based anomaly detection enables informed decision-making within the manufacturing domain through AI-based anomaly detection. In addition to improving data quality, this contributes to operational optimization.
An objective of the user extends beyond resolving current issues; it involves establishing a reliable system that can be relied upon to measure production quality. The resulting insights not only support day-to-day decision-making but also lay the foundation for more efficient and dependable manufacturing.
Solution
Process: The set of steps taken to address the project goals.
RESEARCH:‍
- Competitive audit
- User interviews
- Context study
- Field research
- Formal Walkthroughs
IDEATION:‍
- Feature narrative
- Jobs To Be Done
- Design principles
- Journey map UX flow
FEEDBACK:‍
- Analyze data using Mix-panel
- user testing
- Designer critiques
- Stakeholder reviews
The role of field research and articles in empowering design
The UX/UI evolution for the Multidimensional Dashboard TreeMap Feature was shaped by a meticulous UX process, emphasizing research, ideation, and iterative feedback. Guided by the article "Treemaps: Data Visualization of Complex Hierarchies" by Page Laubheimer on September 29, 2019, I immersed myself in treemaps, analyzing both successful and unsuccessful examples.
Actively engaging with the PI user community, I conducted interviews, contextual studies, and on-site visits, learning their workflow, software interactions, and real-time alarm processes in manufacturing.
UX Research Process
Discovering Hidden Potential within Features to Enhance Product Impact
Visual and
Analysis Process
The research phase encompassed a thorough exploration of user pain points and a competitive audit. Ideation unfolded with a crafted feature narrative, defined design principles, and a mapped UX flow.
To enhance design precision, a continuous feedback loop included stakeholder reviews, field testing, and the creation of a Customer Touchpoint Map for holistic team alignment. This iterative approach ensured the TreeMap Feature seamlessly addressed the nuanced needs of PI users.
Visual Process
Considering the predominantly male and adult demographic, I conducted an accessibility analysis proactively. As men are more likely to be color blind, this approach ensures an inclusive user experience.
Methods
How did we solve the problems?
Formal Walkthroughs:
We visited in one of the site of our customers and asked from three participants, to test out high fidelity prototype. We asked each of them complete three tasks that utilizes primary features of the app and to think aloud the experience, thoughts or ideas regarding the prototype.
Interviews:
We conducted semi-structured interviews with 10 Aperio users to understand the problem space and their overall experience of tracking data issues from all site, production lines, units and sensors. This helped us to explore different problems & go deep down into a few major issues that they currently face.
Adaptable widget wireframes for the new app grid
Subscription model analysis and UX patterns for the PI admin app
Opportunities:
In shaping this project, we embraced the PLD approach, tailoring PI Admin to unique user needs and seamlessly integrating Aperio's features. Collaboration with the Deployment team brought a distinctive approach, leading to a self-serve subscription model.
Extensive research on UX patterns and B2B methods informed the custom design and flow, resulting in substantial user acquisition and immediate growth for the product.
The initial Tree map iteration before customizing library components
Crafting a visually efficient grid for swift scanning, informed by heat-map research and the Fibonacci series for optimal user engagement
Dynamic square divisions based on user preferences, seamlessly integrated with the grid utility. Users can also view color-coded DQI metrics with an accessibility toggle.
The initial Tree map iteration before customizing library components
Context study with Customer Touchpoint Map:
Engaged in an immersive context study, I immersed myself in the user environment to gain profound insights into their needs. This endeavor resulted in the development of a Customer Touchpoint Map, meticulously identifying user interactions and pain points across the entire Aperio Engagements. Functioning as a pivotal guide, the map harmonized the UX flow with the nuanced requirements of PI users, ensuring seamless integration, addressing challenges, and elevating the overall user experience.
This map, instrumental in optimizing interactions, nurtured a user-centric approach for both the TreeMap Feature and the broader pi admin product. Its visual representation played a key role in guiding strategic decision-making and refining the UX/UI design process.
The user needs a solution that integrates seamlessly with existing sensors and software, ensuring quick connectivity.
Features
To enhance satisfaction and retention, the demo scope is promptly initiated, allowing users to explore functionality, set up the app with a new scope, and fine-tune preferences.
This product aims to streamline the onboarding process for Aperio, offering users quick access without a prolonged deployment. Mirroring the approach taken with Datawise, I designed a similar experience—only with hiding complexity, providing easily digestible features, and offering a glimpse into the broader Datawise product.
This approach instills comfort and trust in Aperio, allowing users to focus on the core tree map feature initially, with the flexibility to explore more in the dynamic and often hectic environment of a factory.
A dialogue unfolds upon user interaction with unavailable features on the Scopes page, which is partially accessible, featuring a limited number of scopes and an initial demo scope for illustrative purposes.
The user experiences a seamless flow while navigating from the prefixes down to the individual sites.
%201.png)
Defaulting to two variables, and adding a third variable is accessible through the menu, facilitating data loading and cognitive load
Results
Project Success Metrics:
The impactful results of this project were evident through a substantial surge in conversions, both with the release of the update to the Datawise product and the launch of the PI Admins product. The introduction of the feature garnered significant attention at AVEVA World in San Francisco, a dynamic event within the industrial community. Â
This exposure resulted in the acquisition of valuable leads, subsequently translating into new users for both PI Admins and Datawise Aperio. The success was not only measured in increased conversions but also in the broader engagement and adoption of these products within our user community.
The use of a third variable will improve the user experience by enabling dynamic data visualization. To enhance clarity across various metrics, introduce a sortable bar chart.
Reflection
Project Hindsight:
The Tree map and PI Admin project provided valuable insights through real-world user testing, highlighting the importance of user collaboration. Despite initial concerns, users were willing to contribute during on-site visits, shedding light on specific needs and nuances that are best understood within their actual work environment.
This experience proved essential in refining the application to better meet the unique requirements of its intended users.
Two variables map when accessibility-colors is toggled off
Testimonials
How people feel about the project:
"The Tree Map debut at AVEVA's conference marked a major milestone. Positive audience reactions, lead influx, and user approval affirmed its impactful impression and fit to market needs. Moving forward, we're dedicated to maintaining high standards in our innovative solutions."
- Jonas Hellgren, Aperio CEO
Next
Case
