Flagship product of the mPACT2WO platform - mRegzTM AirCompliance app, Emissions Monitoring solution for refinery and pipeline operators to monitor and manage emissions in real-time.
Disclaimer: Due to confidentiality agreement, I cannot share information beyond what is already available in the public domain. All visuals shared on this page are from officially published mPACT2WO marketing and promotional materials.
BackgroundmPACT2WO by Molex is an IIoT (Industrial Internet of Things) platform offering sensor-based early detection solutions for emissions and corrosion monitoring in oil & gas, petrochemical and manufacturing industries. The solutions help operators of refineries, pipelines and plants identify problems early and fix them fast.
My Role & ContributionsI was the lead designer and owner of UX strategy and execution for mPACT2WO platform and all its web and mobile applications - from early pilots through market adoption. Joining the group in early 2019 as the 'UX team of one', I laid the UX groundwork, established a design system and carried out end-to-end UX/UI design from concepts to launch. Since 2022 I led a small team of exceptionally talented designers and technologists, while remaining a strong individual contributor.
I focused my work on delivering simple user experiences while supporting complex customer needs. For example, the mobile app I designed makes it easy for refinery operators to document gas leak search and repair in often hard field conditions, while following complex EPA compliance requirements. I delivered operational dashboards that equip site managers with actionable insights and save them time, systems to track compliance tasks with clarity and ease, app navigation to simplify user path to action. I designed and developed the core emissions data visualization interface that effectively translates complex scientific algorithms into actionable visual information for operators to quickly locate and fix gas leaks. It is now the product's flagship feature that earned a published patent.
Snippets of interactive data visualization interfaces for the Emissions Monitoring product that I designed, built and shipped.
Exploratory data visualization is one of my favorite areas of design. I have a deep interest in how complex data can be made accessible and meaningful through visual representation. In the mPACT2WO platform, I designed and developed interactive data visualization interfaces that help field operators quickly identify and resolve gas leaks in real-time, and allow site managers to evaluate operational status, explore historical data patterns and make informed decisions.
Tech Stack: Leaflet.js web mapping library with D3.js
A suite of data analytics web applications on the REMEDI medical device data sharing platform serving clinicians and hospital administrators.
Background REMEDI was Purdue University's evidence-based community of practice for medical device informatics aimed at patient safety and medication quality. Latest REMEDI applications were developed and launched in 2015-2018. In 2022 REMEDI platform was acquired from Purdue University by Bainbridge Health.
Short REMEDI walkthrough (video) | In-depth REMEDI walkthrough (video)
My Work Led end-to-end UX/UI design of REMEDI platform and all its data analytics applications. With the new experience design, REMEDI's customer base tripled in size in 3 years to serve over 400 hospitals across 32 US states and internationally.
Developed front-end of REMEDI applications and a supporting data visualization library based on D3.js.
Tackled ambiguity associated with an innovative product and the complexity of multi-variant, irregular customer data to design and deliver highly intuitive data analytics applications that made it easy for clinicians to uncover problem areas in their practice, compare device settings with other hospitals and benchmark against community best practices.
Drug limit library database and analysis tool, core feature of REMEDI platform, helps clinicians make decisions on smart pump settings for improved patient safety.
UsersHospital pharmacists and nurses, members of REMEDI.
User TasksView common concentrations, dosing units and dosage for a particular drug or fluid; compare hospital settings on infusion pumps to other hospitals.
My WorkEnd-to-end design of the app, from initial data mining, flows to working prototypes. Visual, interaction, informational design.
Development: HTML, CSS and JavaScript coding of the interactive prototype. D3.js coding of the chart library. React + ClojureScript templates. Technical integration with the HUBzero platform for scientific collaboration.
My WorkEnd-to-end UX/UI design from research to implementation, including the back-end development and technical integration with the HUBzero platform for scientific collaboration.
Projects - Collaborative area within HUBzero platform, where researchers and educators communicate, store and share files and data, and publish materials with a digital object identifier (DOI).
My WorkEnd-to-end UX/UI design and programming (HTML, CSS, JavaScript), including the back-end (PHP+MySQL).
HUBzero on Github https://github.com/hubzero
Here are some more examples of functional components that I contributed to the HUBzero® open source platform for scientific collaboration as a designer and developer. For all the components the work involved doing basic user research, collecting requirements, interactive prototyping, data model design, visual and interaction design, as well as complete front-end and back-end coding within HUBzero framework.
Github commits to HUBzero CMS by snowwitje
Digitalization (Digi) web app was part of mPACT2WO suite of industrial analytics products. It replaced the largely manual process of locating and referencing archived documentation on manufacturing assets for turnaround scoping and other operational decisions. The new web application I designed allowed effective search, browsing and viewing of a vast amount of digitized asset history records.
The screen flow shown was created based on insights captured during user research sessions conducted at a customer location.
Showing early concepts, ideation sketches feeding into the design of the Drug Limit Libraries tool. Learn the full story of the app design here.
My work involved analyzing available device data and user survey responses as to what questions they seek to answer with the new analytics tool; sorting out variables and breaking them into dimensions; figuring out the user flow, information layout and best interaction patterns to allow effective data analysis and comparison.
The flow chart represents the pathway of users of Alarms analytics tool from research question (known or unknown) to the answer. The chart considers different other questions that user may ask in the process of data analysis. This diagram helped me figure out navigation and UI controls arrangement during early prototyping of Alarms UI.
My Work Developed a centralized REMEDI platform design system as a single source of truth for all design elements / tokens, reusable UI components, style guidelines, and documentation that helped streamline the development process and maintain visual consistency across all REMEDI applications.
PurposeShape up UX vision for a spin-off of a long-existing technology platform, HUBzero. Align on who will use the new product and why. Bring the whole team (developers, marketers and management) on the same page about product vision, and push for user-centered design.
My WorkOrganized and ran design sprints with the cross-functional team. In the first session the team drew assumption personas and user journeys from what we knew about current users. With user interviews conducted between sessions and insights shared, the second sprint focused on ideation around content discovery feature in the new application. This was a young project. Each sprint sparked ideas to prototype and test, as well as helped identify areas where additional user research was needed.
UsersMiddle school kids and their science teachers.
User GoalsLearn and teach basic nanotechnology concepts.
Site ConceptWhen visiting the project website, children find themselves in the lobby of the Birck Nanotechnology Center at Purdue University. They explore the virtual hallways, cleanroom and labs, meet various researchers, and engage in different tasks or "missions" in which they help a researcher and learn about nanotechnology in the process. Each successful mission is rewarded with a key, which could be used to unlock other, more advanced missions.
My WorkConcept, visual and interaction design. Flash UIs and ActionScript programming of all interaction and gaming activities.
Worked closely together with an instructional designer, graduate students and subject matter experts on Purdue campus to develop content and activities for the project.
My WorkDesigned and maintained AirCanada's e-marketing materials, including webSaver and onAir e-newsletters. Created web graphics (headers, buttons, icons etc.) and HTML layouts using Photoshop and Dreamweaver. There was a lot of photo-retouching involved, so this job helped me sharpen my Photoshop skills.
My WorkCreated web graphics (headers, fonts, buttons, etc.), layouts and html+css designs for e-ads that were sent to subscribers of travel deals. Used Adobe Photoshop, Dreamweaver. ASP was used for the server side.
ProjectBooking engine design revamp of AirCanada.com and partner sites.
My WorkCreated web graphics (headers, buttons, icons etc.) and html layouts.
Landing pages for CE Network, the continuing education site (yes! online education back in 2002!) for real estate and financial professionals. Created web pages using Dreamweaver, Photoshop, and Flash.
Freelance web design project for a small architecture firm in California. Portoflio site showingcasting their residential and commercial architecture projects.