When you look at the image below, what do you see? Most people see two triangles – one pointing down and the other pointing up. The real secret here is that the two triangles don’t exist. There are three semi-circles and three angles; none of the shapes actually connect to form a triangle. More interestingly, if you didn’t see the triangle or the individual shapes while viewing the image before, you can clearly see them now after reading this paragraph.
Figure 1- https://en.wikipedia.org/wiki/Illusory_contours#/media/File:Kanizsa_triangle.svg
With this example, I want to introduce a role in the product development process that sits between information architecture disciplines and front-end development: the visual designer. Visual designers work in tandem with user experience designers, using the elements and principles of design, along with a knowledge of cognitive psychology to enhance the usability of applications and websites, influence user perception of quality, and enhance user engagement with NantHealth applications. This blog will explore visual design concepts and the value they can bring to users and healthcare technology.
Figure 2: Example of a visual design mockup revealing base UX wireframe
The power of good visual design is hard to ignore once understood. A widely known usability response referred to as the “aesthetic-usability effect” happens when users are asked to test prototypes that have been carefully designed to maximize aesthetic appeal. If users see the testing artifacts as aesthetically pleasing, they are more forgiving of usability issues. The perception of quality and aesthetics tend to go hand-in-hand. Users tend to have a positive bias towards products that appear as though they’ve been carefully designed.
One of the most significant benefits of visual design is the consistency it brings to the user experience. Visual designers often work from a carefully crafted style guide that provides the blueprint for the look and feel of the information presented to the user. These style guides reflect rules established to define colors, fonts, typography, and layout, among other visual fundamentals. Style guides ensure that informational and interactive elements align to a consistent visual hierarchy, allowing users to build a “mental model” of the hierarchy, which can make the process of navigating the experience or learning new information and experiences more seamless and intuitive. Style guides can also use the user’s existing mental model through the use of styles and interaction patterns or controls that are commonly used on popular modern websites and applications.
Building on the style guide concept, modern visual design teams have started working with user experience (UX) designers and developers to build design systems. These systems take consistency in the user experience to the extreme by allowing product design teams to draw from a library of common components. Components are functional collections of elements like text, icons, and shapes that provide a base level of functionality. Components can be assembled like building blocks to create anything from a web pages to entire applications. NantHealth utilizes the “Atomic Design” model, drawing inspiration from the physical world to provide structure to our design system. Just like gravity and electromagnetism in matter, our styles are ubiquitous across the design system, so they serve as the base layer. The components are created from simple design elements such as shapes and text labels. Components may be layered on top of one another or nested within each other to provide increasing levels of user interface (UI) intelligence to serve the needs of our users and realize the vision of the UX team.
Design systems can be powerful tools allowing developers to rapidly assemble experiences that meet product team and UX design requirements while maintaining the high visual fidelity and style consistency specified by the visual design team. Design systems help ensure that development teams don’t have to build components from scratch for every application or product update. These systems can be built so that the components inherit styles like color and font dynamically, which maximizes flexibility – allowing visual designers to tweak stylistic attributes after the system has been built and deployed without affecting the core functionality of the components and adding unnecessary development burden to development teams.
Figure 3: NantHealth Atomic Design
The NantHealth product team has been steadily building a unique design system to address the specific problems and complexities present in the healthcare industry. The system, dubbed “Feather,” was built around three guiding principles: consistency, simplicity, and accessibility. These principles keep the design system focused on solving the needs of our users in payer, provider, and patient roles. The system’s design also ensures the flexibility to scale and adapt as our user base might grow and expand into other markets with additional requirements and needs.
The Feather design system was built to provide a consistent experience across application screens, platforms, devices, and industries. A customizable color palette was developed, allowing each product to use the same visual hierarchy regardless of the product brand identity. This allows the UX and development teams to build and implement complex workflows with confidence, knowing that the components and styles have been optimized and streamlined and ensuring that the brand elements will always appear as intended.
Due to the complexity of the data sets and workflows across the health care space, the visual design team stresses simplicity to elevate and clarify the information – making it easy for users to identify and interpret. Data visualization is a great example of an area where visual design pushes for simplicity. For example, users will have an easier time spotting a trend when looking at a line graph if it’s not covered in data values and plot lines. Tables are much easier to read when the structural elements like borders are diminished or even removed in some instances. The information is always a top priority, and care is taken to provide the user clarity and understanding.
Accessibility is the last, but certainly not the least, of the three Feather principles. The design team is particularly focused on providing the best possible experience to the widest gamut of users. Colors have all been optimized to meet strict contrast requirements to provide an optimal experience for users who may be color blind or have trouble resolving small details. Every component in the design system is carefully tested and reviewed to ensure that they may be used with keyboard navigation and screen readers. Components are also evaluated and considered for responsive design, whether users enable browser zoom or switch to platforms with less screen density or real estate.
The advantages of building and deploying a design system are numerous. At NantHealth, we see the benefits and leverage our visual design team, a key partner with other user experience designers, developers, and technology, to deliver the best modern visual experiences possible. Building our products to deliver on our foundation of consistency, simplicity, and accessibility positions us to grow as markets change, evolve, and provide our customers and users effective solutions.
