Navio was founded by an individual with brain cancer. He recognized how few options patients have and how overwhelming the cancer journey can be.
I joined Navio as the Head of Design and fourth member of the team to create an identity and design system to help patients navigate the cancer journey.
Before I joined Navio, an agency created a logo and one-page site. The design had a scientific look and feel, which was not inviting for the patient audience.
I wanted to explore designs that would include illustration and human imagery, as well as colors that are familiar within the healthcare context.
In the early days, we were learning from patients and prototyping our treatment support app.
I was exploring imagery that we could use to communicate concepts like the patient journey, diagnosis, treatment options, guidance and support from others.
Jon (my product partner in crime) and I had been discussing if patients will relate to our imagery. An image of a specific person may not relate to everyone and the generalized representations of people had less humanity.
I sketched this balloon to represent an individual on their journey. We agreed that this image works and feels uplifting. It would encourage patients to see things from a different perspective.
We were on the right track with our visual metaphors, and needed to refine our illustration style. I did some lightning demos and felt that a flat style would be familiar and appropriate for our audience. I worked on refining concepts in Illustrator.
After exploring color options, I chose a blue and green for primary brand colors—Aligning with familiar colors often seen in the healthcare world. Pairing familiar colors with bespoke illustrations creates a delightful and trustworthy aesthetic.
Secondary colors were added for illustrations, data visualization, and our app UI.
All colors were tested to ensure they pass the WCAG accessibility guidelines for contrast.
I had a few basic requirements for our typography:
We chose Noto Serif for display and Noto Sans for text, setting the logo in Noto Sans with all lower case letters.
As Navio matured, we created content for a broader range of contexts. Characters were helpful to visualize concepts like community, communication, and other various experiences.
I built a set of character illustrations and worked with other designers to create more as needed.
We decided early on to start with web apps for patients and providers. This would allow us to develop quickly and make Navio available to anyone regardless of their device.
Having previous experience with accessibility guidelines, I made sure that our UI components followed best practices for accessibility.
I also have many years of experience with responsive design, so it was easy to ensure that our app would work well across different screen sizes.
We organized our components in a Figma library that enabled us to quickly prototype with consistency and work with our awesome front end engineers.
Navio had interest from organizations who wanted to use our app to collect data from clinical trial participants. They asked us to brand the app to match their own look and feel. However, since our app was created as our own product, we didn't have the ability to reskin it.
I worked with our lead designer, Alex, to research how we might fulfill this request. We learned that design tokens could enable us to map our styles to our UI components and create themes for different brands.
We did some tinkering and led discussions with engineering to figure out how to implement the tokens and understand the effort to use them.
Together, we were able to quickly reskin our entire application and demo to a potential partner within just a couple of hours.
Navio’s design system is comprehensive and imbued with character and personality. It enables the team to create a rich and engaging experience within its product, sales, and marketing materials.
Below are some examples of how it all comes together in a complete user experience...
Navio sponsored an American Brain Tumor Association meeting where we had the opportunity to offer our treatment support to patients. I created this video to highlight the benefits of our app.
Navio ran a study to pilot our data collection features. Through this experience, we generated rich content about Nivolumab, which I later assembled into this guide.
View the Guide
I was responsible for designing Navio’s website and learned Webflow through the experience. The copy was written by myself and Jon (Head of Product) with contribution and input from other team members.
Visit the WebsiteNavio’s design was a key factor in capturing the attention of potential partners and landing our first commercial contract with the University College of London to support their clinical trial (the HoT Trial).
Having a consistent and delightful experience has helped our partners and Navio successfully engage patients over extended periods of time to complete clinical trial surveys and adhere to their treatment plans.
