Can we design better health outcomes through transportation?
web
interaction
iconography
brand
growth
revenue
about
Movi is a SaaS platform for hospitals, health systems, and healthcare organizations to order, manage, track, and optimize transportation. Movi facilitates the movement of patients and medical supplies from point A to point B, at any level of care, by any transport mode, while accomodating complex health needs and logistical considerations.
why
Medical transportation is an overlooked, yet incredibly inefficient, aspect of our healthcare system. In its current state it is: technologically outdated, causes unnecessary wait times, prevents patients from being admitted and treated in a timely manner, wastes thousands of clinical staff hours, and costs health systems millions of dollars in lost throughput.
context
Movi was on the precipace of hypergrowth. The company had a stellar founding team, found product-market fit, scraped through the pandemic, arduously integrated with software encumbents, and was maturing from skilled nursing (e.g., recurring dialysis transports) into more acute care settings (e.g., patient movement and discharges). As I joined, we landed our first two major health systems, which gave us the credibility we needed to stick our foot in the door and take on the hospital market.
role
I joined Movi pre-seed as the team's first design hire. I gave love to the brand; led 0-1 design of our website; established a motion system for communicating our platform through abstracted UI; landed some hospital deals; established sales ops; designed our first iconography style; glued together sales, marketing, data, engineering, and customer service; wrote our brand architecture messaging for how we communicate our product verticals; and supported growth at the right hand of the CEO.
Iconography breaks the monotony
One layer of the work at hand was executing on iconography for purposes of both function (e.g., navigation) as well as delight (e.g., visual polish and splashes of brand personality). There was no existing look or feel for product or brand iconography, so we had the luxury/difficulty of defining a new one from scratch.
We landed on a sliding scale of complexity with variations for both simple and complex use cases. Tailoring icons directly to the sizing contraints of their resting places helped add variety and visual interest to the digital brand, but only when the medium was capable of accomodating it.
We landed on a sliding scale of complexity with variations for both simple and complex use cases. Tailoring icons directly to the sizing contraints of their resting places helped add variety and visual interest to the digital brand, but only when the medium was capable of accomodating it.
Crafting a visual product system
The depth of our product, as well as the complexity of healthcare and medical transportation as a whole, can have a steep learning curve. Highly technical terminology, complex processes, and healthcare jargon, among other things, add complexity to the space in which we operate.
To aid in the communication process, I created a visual system to graphically depict our platform and consistently articulate our complex product experience in a simplified visual way. This work allowed us to highlight product functionality through abstracted UI elements.
To aid in the communication process, I created a visual system to graphically depict our platform and consistently articulate our complex product experience in a simplified visual way. This work allowed us to highlight product functionality through abstracted UI elements.
Showing always beats telling
The depth of our product, as well as the complexity of healthcare and medical transportation as a whole, can have a steep learning curve. Highly technical terminology, complex processes, and healthcare jargon, among other things, add complexity to the space in which we operate.
To aid in the communication process, I created a visual system to graphically depict our platform and consistently articulate our complex product experience in a simplified visual way. This work allowed us to highlight product functionality through abstracted UI elements.
To aid in the communication process, I created a visual system to graphically depict our platform and consistently articulate our complex product experience in a simplified visual way. This work allowed us to highlight product functionality through abstracted UI elements.
Bringing the website to life through code
I built out the designs, interactions, and animations in Webflow. To add an extra layer of delight for users, I utilized GSAP (third-party Javascript library) to write code that controls the way each class moves between values of scale, opacity, x/y position, etc. with precision.
While most of these animations could be created natively in Webflow, I prefer to use Javascript when possible to speed up my workflow and control staggering. This also helps prevent the interactions panel from becoming cluttered with one-off animations and allows me to quickly update global values like easing curves or durations in a central location.
While most of these animations could be created natively in Webflow, I prefer to use Javascript when possible to speed up my workflow and control staggering. This also helps prevent the interactions panel from becoming cluttered with one-off animations and allows me to quickly update global values like easing curves or durations in a central location.