Picarro Global Portal
at Picarro
I worked on designing the Picarro Global Portal (PGP), a conceptual software platform for managing gas analyzers and resolving software access issues by creating a dashboard for identifying mismatches, a flow for setting up customer profiles, and an interface for adjusting device preferences.
i.
introduction
What is Picarro?
Picarro is in the business of selling gas analyzers. The analyzers are integrated with software to manage the data—and it is later sent to the cloud to be accessible from a portal. The portal itself is capable of much more than just housing data, and also acts as a hub for account management.
The Design Problem
Without a central account management portal, customer service workers rely on scattered files, phone calls, and verbal descriptions, leading to slow response times, errors, and customer frustration.
Project Overview
Role: UI/UX Design Intern
Team:
Julie Wang, UI/UX Design Intern (me!)
Director of Software Engineering
Senior Product Manager
Timeline: 3 months (January-March 2023)
My Goal
Collaborate with the Director of Software Engineering to design the Customer Management Dashboard and create related screens for the platform.
This was my first experience working on a corporate design project! My process was a bit rocky due to inexperience, and I worked on multiple pages at once. In the beginning, I simply jumped into making designs, and after initial feedback started doing better research and reference-finding before trying again. I'll organize this case study by areas I worked on, rather than how things actually played out.
Step 1
Initial Drafts
Step 2
Feedback
Step 3
Research
Step 4
Iteration
ii.
customer management dashboard
Why a Dashboard?
I designed a dashboard to help administrators immediately spot mismatches between physical products and software.
Color-coded visual indicators and hidden non-essential details make the interface clear and problems easy to identify.
The dashboard needs to accomplish two main tasks: provide a clear list of customer profiles and highlight mismatches between physical products and their associated software. These functions are critical to keeping operations smooth and reducing admin workload.
To address these needs, I used bold, color-coded visual indicators—green for no issues and red for mismatches—so admins could quickly spot discrepancies. I also hid less-immediate relevant information, such as business addresses, to keep the interface uncluttered, making it easier to focus on the most important data.
The dashboard is essentially just a list of customers—but how could I design it so that it helps achieve the two main tasks better?
First Draft
My first draft was pretty basic—I jumped in and included features that I thought were appropriate for such a thing.
Final Draft
I honed in on what the point of this page was, most important being identifying software mismatches. Considering this, I changed the design to include bold colors that identifies whether software is properly enabled, or not. The page frame also changes based on some additional information I received from the Director.
The final design allows administrators to quickly identify and resolve mismatches while maintaining easy access to detailed customer information
, eliminating reliance on scattered files. The centralized database of customer information not only saves time during service requests but also minimizes the risk of errors caused by inconsistent or incomplete data.
iii.
profile detail
Peripheral, but Highly Relevant Flow
Building on the foundation of the dashboard, I designed the Add Profile Flow to address another critical user need.
To make creating new customer profiles easier,
I designed a linear modal flow that broke input fields into smaller, grouped sections.
This design guides users through the setup process step-by-step, reducing overwhelm and keeping the task manageable.
I didn't really have a good understanding of how the site map and user flows would look like, and it was difficult to clear up because of my lack of experience and communication dynamic with the Director. I decided to just jump in and create something, and get feedback and slowly improve it over iterations.
First Draft
Again this is an instance where I jumped into designing without much foresight and planning. The two types of entry, a "New Customer Account" and "New User under Existing Customer" are not really equivalent enough for their set-ups to be grouped together on this page.
Second Draft
I started designing with a completed profile page in mind—then, I planned that the set-up flow would simply replace the details with input boxes. I designed this layout because profiles have lots of information, so I thought to break them into relevant groups.
Third Draft
In the end, this profile detail page & flow would move into modals—the reason being, that this was an established flow pattern used in other areas of Picarro software. Using a modal here also makes some sense—it forces a user to lock into the active content.
This design improves usability by capturing all required fields in a simple and organized way.
As mentioned earlier, storing customer details in a centralized, digitized database reduces the need for manual record-keeping, which can be error-prone and time-consuming. It ensures that all relevant information is easily accessible and up-to-date. It also enhances scalability, as the system can grow with the company’s needs without becoming disorganized or difficult to manage.
iv.
preferences
What are Preferences?
Preferences are another aspect of PGP, where customer users can adjust specific settings related to their Picarro products.
I designed a tree table format interface that groups related preferences into expandable and collapsible categories,
helping users adjust settings more easily. The design incorporates options for detailed control and consideration for user misclicks, such as “Restore Default” and “Cancel” buttons.
The preferences interface needs to support a wide range of settings, including measurement thresholds, units, and permissions. A tree table format was chosen to organize these preferences into collapsible categories, as it allows users to focus on relevant sections without being overwhelmed by the full list of options. This hierarchical structure makes it easy to navigate large volumes of information by grouping related settings together while still providing quick access to specific details. Additionally, the expandable format reduces screen clutter and ensures that even as new settings are added, the interface remains clear and manageable.
Based on feedback from the Director and PM, I also added controls for individual settings, like “Restore Default” and “Cancel,” giving users more precise options for managing changes—tapping into some important UX concepts, such as being able to undo mistakes ("Error Recovery").
Because I started working on the Preferences page after the Dashboard, I decided to approach it with better planning. The Director had already insisted on a "tree table" format, where expanding categories would unveil multiple related settings that could be modified. This time I started with some references and a few sketches.
Sketch Draft
This is the sketch that I ultimately translated into higher fidelity.
Second Draft
In this draft, I was under the impression that each setting, or "preference", would only have drop-down menus with pre-set options.
Third Draft
By this draft, I had learned that preferences would have multiple kinds of inputs, not just dropdowns. Some preferences would dictate numeric thresholds, or dates. I designed custom input fields for each type possible.
The preferences interface allows users to manage a wide variety of settings via a clear and organized layout.
This design helps users customize their devices with minimal effort and reduced errors,
meaning fewer support tickets and smoother operations.
v.
conclusion
What's Next: Development
This project taught me the importance of adaptability and collaboration in ambiguous design environments. I learned to balance user needs, design constraints, and technical feedback while iterating toward solutions that aligned with stakeholders’ goals. I deepened my understanding of creating designs that align with user needs while maintaining consistency across systems. Overall, this experience reinforced my ability to deliver impactful designs, even when starting with limited context.
My goal was:
Collaborate with the Director of Software Engineering to design the Customer Management Dashboard and create related screens for the platform.
Did I achieve it?
Yes, though with some struggle!
The Director said my designs would be sent along the process to development!
Through this project, I delivered three key pieces that addressed critical administrative and operational needs for the Picarro Global Portal. The Customer Management Dashboard helps administrators quickly identify and resolve mismatches, the Add Profile Flow streamlines data entry for new customer accounts, and the Preferences Interface enables precise customization of gas analyzer settings.
When I left, the designs were on the engineering roadmap!
Impact: Higher Efficiency
PGP lays the foundation for improved efficiency and clarity! Administrators gain the ability to manage customer information and device preferences with greater confidence and speed. Operations will be significantly improved, reducing reliance on disorganized systems and enabling faster, more accurate service delivery. By creating scalable solutions, it supports Picarro's ability to grow and adapt its product ecosystem.