Building DesignOps from the ground up

Before Mo was onboarded, Convatec did not have a formal design practice for digital health products. Mo inherited an ad hoc work-in-progress and from it built the company's first DesignOps function, governance, a shared component library, and the process discipline behind it. These systems were used by three contract teams to build and launch two products serving patients and providers directly.

Key milestones establishing the formal design system

Standing up the practice wasn't one big move but a series of concrete fixes: an accessibility audit to catch issues early, a rigid ID taxonomy to keep hundreds of screens traceable, a copy tool to manage translation at scale, and a formal governance document leadership could stand behind in a regulated industry.

1. Accessibility audit

Executed accessibility audit of Orion design to course-correct before the project was too far down the track to address key issues.

2. Taxonomy

Mo established a rigid ID structure so every designed screen has a unique ID reducing rework due to unclear states and flows. 

3. Copy management

To manage the ~6,000 text fields in the Orion design, Mo onboarded DittoWords to make copy review and translation more efficient.

4. Formal Governance

Mo published a formal governance document which leadership eagerly supported  in such a highly regulated product environment.

True old-school wireframing

One secret to his success: Mo insists that the UX is right before the UI work begins. Drawing from his experience in hardware technology and traditional Information Architecture, he designs the workflow before wireframing (often by hand). When the flow makes sense, lo-fi grey-box wireframes are created before any time is spend on a high-fidelity, polished UI.

Research at scale

Mo was the designer and a lead investigator for many of the moderated and unmoderated user testing programs that included open-ended interviews, surveys, task, first impression, and in-person usability tests. 

Hi fidelity flow diagrams created for the interviewers to reference for the moderated tests.

Maze with Figma prototypes was used for task, first impression, and open answer surveys.

We conducted four rounds of live moderated user tests with Figma prototypes and one in-person study to learn how patients would use a device while manipulating their appliance.

The UX and UI were iterated in response to each of the six test programs administered. Some feedback was instituted immediately while the rest went into our backlogs.

Component library  and design tokens

Mo led the creation of a token-based color and semantic system which underpins primitives, components, and full page templates shared across Project Epione and Project Orion, so the same button, card, and alert components render correctly in both light and dark mode, and stay consistent as new screens get assembled.

Wound Hygiene™

The component library, tokens, and governance made the design of a second app very efficient. We built and launched the second app in 1/5th the time of the first app. Granted, it has half the features, but the real efficiency gain was a streamlined process and clear design guidelines for the contract designers to follow.

Two mobile aps: me+Ostomy Companion & Wound Hygiene™

Mo led the end-to-end research and design to launch for the patient facing me+ Ostomy Companion, and the provider facing WoundHygiene™ apps. The clearest expression of the shared component library: reminders, tracking, recommendations, and education, timed to where a patient or clinician actually is in their routine. An important consideration for Mo was how each app would reflect the brand, while also reflecting the different tones of our persona brands: patients vs health care providers. This was achieved this through a common palette, but a difference in copy tone, as well as a slight "friendliness" for the patient-facing app and more "clinical" style for the provider-facing experience.

Patient

Provider

Related work at Convatec

Dashboards - Power BI

Mo created a lot of dashboard designs in mhis career, but never before did he have to design the analytic models and pipe-in the backend data. Shown is a creative way of showing real-time user activity on the me+ Ostomy Companion home screen through a heat map overlayed on each button.

Dashboards - HTML

Mo created these dashboards to visualize Firebase data. What excited leadership was his idea around combining datapoints to gain insights relative to Convatec's market that data analysts hadn't conceived of.

Award - Lead Like A Founder

The group launched a competition styled after Google's "Kill your Company" contest. The point: to create a faux business that would knock the existing company out of a market. Drawing from his experience building winning hackathon teams, Mo put another winning team together for this competition.