During mentoring sessions I often come back to a few influential books or resources that had a huge impact on my thinking. If I could do it all over again, I would have started by reading these!

Though making purchases through these links does benefit me, I feel this is a fair way to offset the time I give for free.

The Qualio 1.0 interface I inherited on day 1.

The original Qualio eQMS in 2021 (8 years old at this time)

An example of an early ideation for the Qualio app UI. An example of an early ideation for the Qualio app UI. An example of the UI style for the new Qualio app.

Setting the UI vision

Qualio's UI was a frankenstein of frontend technologies loosely branded 'blue' (seen above) from previous phases of the company. Our exceedingly aged UI appeared to be less usable than competitors by our customers when we probed them regarding 'perceived ux'. Beyond just looks, the main navigation could not fit anymore product silos teams wanted to add, and tested poorly with users. Now was the time to merge layer our new brand over a fresh UI.

Nearly everything on screen was limited by an over-arching legacy frontend which housed more modern micro-frontends that current teams were building on. The inevitable goal was to have a single React app which brought forth a stellar experience for the user.

Envisioning what could be

My task was to bring a fresh, brand ready UI to show what the future of Qualio could look like for our customers. The challenge was to marry an incoming and unknown brand into a solid product that customers trusted with their highly sensitive data.

Early UI. Not knowing where the brand would go - I started playing with componentry in a safe 'blue' world as I onboarded and learned the company and industry.

Meeting our brand

Soon enough, the brand team settled on what you see today on 5 colors (16 stops), 2 less than friendly interface fonts, and in my opinion, an overly friendly tone - was more than enough to get me started. While this was eye catching for web design and LinkedIn posts, it was friendlier than our customers expected so I took the chance to tighten up the UI and apply more structure.

Our brand. Extensive color, gradients, funky fonts, wiggly hand drawings. This work was done by 1 brand designer and a few contract web devs.

Styling our UI

Now that we had a brand - I took a 'style-tile' approach to bring this amorphous look into a more structured UI that was appropriate for the daily work of a Life Sciences Quality Professional.

Balancing a day-to-day UI with the one-time (or never) use marketing pages was a fun challenge. Our users come software like Word, Excel, and lab workers are often using clipboards and paper checklists. My goal was to communicate that Qualio is the digital representation of those same functions. To make this connection I took the liberty to bring in slightly skeuomorphic concepts - things like dotted lines, empty boxes for empty states.

Structure with style. The style-tile that brought our brand into a modern interface, focused on clarity over cleverness or cuteness. (This is all my work minus the icons)

Anchoring our design in a metaphor

Communicating a vision is best done through a story. The chasm of a new design language compared to the incumbent is always a challenge. To sell the new lighter, cleaner UI style to our VP and Product team, I shared a metaphor along with some silly visuals at an offsite in Boston.

What is Qualio and how should it behave? I used the metaphor of a clean room, something our team and customers could grasp. This metaphor would be the solid rock our design language and principles could sit atop.

Any excuse to talk about Arrival.

Navigation items are doorways

Using our navigation links are doors into departments (features) where only people assigned to such tasks can enter.

Trusted tracking with our audit trail

Just as scientists, workers, and teammates are tracked as they 'clock in/out' or check out tools for their daily work, they should expect that every action is tracked and trusted within our propietary audit trail feature.

Appropriate tone

The same way that we wouldn't joke around inside of a clean room, our UI language should be clear and free from distraction. We also can extend this to visuals like a no-confetti rule, and no gradients.

Permission Model

The same way that only trained professionals are allowed to perform duties in the real world - Only authorized personnel allowed in certain zones of our app, and our permission model should reflect that.

Color and style

In a professionally controlled clean room, one wouldn't use sharpie on some drawers, and printed labels on others - so we should maintain a strict palette and minimize distraction to the user.


Qualio is a places where  highly-trained, particular Quality professionals are working on a shared goal. Collaboration can be messy but our users should feel they leave each session with solid outcomes.

Bringing the vision to life

With the style tile and the application understood, I designed the future Qualio for to set the vision of what our app could be. A few features in the navigation are insinuated based on customer pain, namely 'search' and 'tasks'. At it's core, Qualio is a workflow app where companies are storing their approved SOPs and other documentation, while users are passing approvals back and forth to each other. These two features do most of the heavy lifting for the customer base.

The visionary UI known as 'Elixir' was designed to be responsive enough that users who took iPads onto the floor for their duties could input data immediately.

From vision to reality

Our exceptional UI designer out of Poland lead the effort of restyling a React library in Figma while his 2 willing developer partners began building out the design system. This team chose Chakra UI as it supported both Figma and developer workflows.


By the end of Summer 2022, we had an established vision, a shared metaphor, and teams were beginning to convert and each of their products to be replaced with Chakra components.

The difficulty with this project was the conflicting high speed of the brand and marketing compared to the slow transitions within product technologies. I learned a lot about how loose to set a vision compared to how surgical to get with execution of reality, and doing so quarter by quarter.