Resources
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.
Books
Object Modeling
Communicating Design
Tom Greever
Austin Kleon
The original Qualio eQMS in 2021 (8 years old at this time)
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 Qualio.com. 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.
Using our navigation links are doors into departments (features) where only people assigned to such tasks can enter.
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.
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.
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.
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.
Result
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.
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 Qualio.com. 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.
Using our navigation links are doors into departments (features) where only people assigned to such tasks can enter.
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.
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.
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.
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.
Result
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.
