Overview
Spot illustrations are the simplest and most literal expression of a concept. They are often used in the product as an empty state, or in a composition with other spot illustrations. They should be universally relatable and set a friendly tone when communicating complex topics.
With this redesign process, we wanted to focus on cohesion, enhancing the user interface, and creating a set of illustrations that better fit the Fisher Scientific brand. Our goal with UX illustrations was to enhance the visual storytelling of our digital products and improve user engagement through compelling and user-friendly illustrations.
The Problem
The existing spot illustrations on fishersci.com lacked cohesion and appeared disjointed and inconsistent, failing to convey a unified visual language that aligns with Fisher Scientific's brand identity. Additionally, some illustrations were overly simplistic, compromising their ability to effectively communicate complex scientific concepts and guide users through product features. Addressing this problem required a redesign process that aimed to strike the right balance between visual appeal, clarity, and relevance, ultimately elevating the website's overall UI design and enhancing user engagement.
Exploration
During the exploration phase, I delved into a creative journey, exploring different illustration styles and color combinations that could best represent Fisher Scientific's products and services. I experimented with visual elements, color palettes, and compositions to find the most compelling solution.
By studying various scientific and e-commerce websites, I gained valuable insights into industry trends, design approaches, and successful visual communication strategies.
The combination of creative exploration and competitive analysis informed the direction of the redesign, ensuring that the new web illustrations would offer a unique and captivating experience.
Take One
My first stab at illustrations was close to what we were looking for in the styling and coloring. I used organic background shapes to visually level out the weight of the different illustrations.
Zero state illustrations were introduced to guide users during moments when there is no content or data to display, ensuring a more informative and friendly experience. I used a lighter color palette for inactive or zero-state illustrations or areas where we might not want a big, bold illustration, like a “no-results” page.
The Result
After meeting with the brand team, we collectively agreed that the background shape seemed a little too playful for our scientific brand, and the brand team didn’t like the purple pastel palette for the softer illustrations.
We decided to go with a circular background to better match the tone of the brand, and use a single color palette for the illustrations, with a more limited color scale being used for the “softer”, more subtle illustrations.
Recognizing the website's scientific focus, I incorporated specialized scientific illustrations that effectively communicate complex concepts in a visually appealing manner. These scientific illustrations were meticulously crafted to portray intricate scientific processes, equipment usage, and experimental setups. By incorporating these visuals, Fisher Scientific's website now serves as an informative and valuable resource for researchers and scientists, strengthening the brand's authority in the scientific community.
We also created principles and documentation to accompany the spot illustrations, so that anyone using or creating new illustrations could align with the existing illustrations, keeping that cohesion across the site.
Principles
Always be useful
Illustrations add information. They provide context, add clarity, or lead to the next step. They may give users a deeper understanding of what they’re working on or trying to access.
Keep it in the family
Illustrations are all part of the same visual family. Inconsistencies lower the overall quality of the experience, and can distract users or make them feel like they’re in the wrong place.
Be considerate
Illustrations should understand and support the user’s experience. Each illustration needs to feel appropriate and follow the context of whatever situation it shows up in.
Stay focused
Each illustration conveys one thing (Account) or a group of related things (Account & Settings). The story is easy to understand, so users intuitively know how to accomplish whatever they came here to do.
Clear
Illustration should never work too hard or be burdened with too many ideas. Only essential, non-decorative, elements should be used to communicate the main idea. Keeping an illustration simple and straightforward adds clarity. This simplicity helps guide viewers through complex concepts, stories or scenarios, but should never be reliant on the illustration to provide clarity (the illustration is supportive).
Elements of style
Color
Illustrations use a limited, monochromatic blue scale, to not only match the Fisher Scientific brand, but also to provide a more neutral feedback color. We use darker shades to represent shadows and lighter tints to represent highlights and give the illustrations depth.
The bolder illustration can use the full range of the blue scale, using mid-tones and tints to differentiate components. The more subtle style illustration should user fewer colors, pulled from the lighter side of the color scale (not past “blue/25”, or #3EAFFF).
Shape
Simple geometric shapes build images that are clear and approachable. Representations of people use more organic shapes. To contrast the sharp edges of our other design elements, we use illustrations with mostly rounded elements. Some sharp edges are allowed to be used throughout certain elements in the illustrations to help illustrate the concept better.
Size
Illustrations should use similar sizes across flows/pages with multiple illustrations, with the background circle being the element of measurement. For pages with a single illustration, there should be a max height of 300px. Illustrations should get no smaller than 80px high on any screen to prevent the image details from making the image incomprehensible.
Space
The perspective is mostly flat and two-dimensional so the entire area of the illustration is of equal importance. Drop shadows and use of lighter and darker highlights/lowlights give things subtle depth when necessary. An additional side of an object can be added if things aren’t easily recognizable from a single side.
Each illustration is supported by a circular background, to allow for more negative space around it so it feels balanced in the place it lives, and so its visual weight is the same as other illustrations that live in the same places.
Composition
All illustrations should have relative sizing when more than one object is included. Illustrations should appear neutral but stylized.
Do not scale-up or collage icons for use in illustrations or in place of illustrations.
Illustrations should be compositionally balanced with related headers and text. Reduce “floating” by bleeding illustrations off the edges of the graphic. Make use of layering and subtle, vector-based details to help ground the illustration. Shadows help subtly lift the illustration off the background. Do not use negative space to define outlines.
Although the bulk and focus of your illustration should sit within the inner circle, it is likely that some elements will protrude outside the inner circle. It is a good idea to limit these elements to no more than roughly 10% of the illustration. This will need to be determined on a case-by-case basis, but the 10% rule should provide a good visual rule to follow.
Shading and highlights
Objects should be lit from the (upper) left-hand side to add a layer of consistency across illustrations. The overall placement of highlights and shading should be carefully decided by the designer and consistent throughout the project.
Shading should be achieved using subtle, solid tints of blue shades, not gradients, textures, multiply or blurs. Opacity can be utilized in some instances to help show reflections when needed.
There are two types of highlights for illustrational. Curved, more organic highlights (which are used for more rounded elements), and sharp graphic highlights (like on the paper illustrations where they look cut in half by a lighter color). They are also used to show reflections.
Line
All illustrations have smooth lines without texture. Smaller objects have straighter lines, while larger objects can have more detailed, curved lines. Intersecting and continuous lines are a key element of the illustration style, but they aren’t forced. They make a simple illustration feel elegant and visually interesting without being distracting. Line weights should be visually consistent across illustrations.
Detail
Illustrations need some detail to make sense, but too much can be noisy. They have the minimum amount of detail necessary to make them feel realistic but still simple. Use of a variety of blue shades help to add detail and depth.
Variety
We have two different “weights” of illustration. We use color to differentiate between the zero-state or more subtle version and the bolder, louder, “active” illustration. You will see the lighter-colored illustration being used for more zero-states, error pages and situations where the image is meant to be more subtle.
Where Illustrations Live
There are places where illustrations always appear, and places where they’re used only sometimes.
Empty States
Users see an empty state illustration the first time they access a new part of the experience, before they’ve had the chance to do anything there yet. It introduces what they can do here, and sets expectations for what’s ahead.
Onboarding
Onboarding tasks help new merchants set up their store. Illustrations frame what each task is for. And by changing in appearance, they reinforce when a task is complete.
Announcements & error pages
Illustrations are supportive elements that complement text and help let users know about access levels, errors, problems, or communicate something new that the user should know. They are meant to be complementary only. If an illustration is removed, the user should still be able to understand information, directions or errors.
Spot illustrations
In some rare instances, unique spot illustrations can be used to achieve a specific goal, like to draw attention to something important on a busy page, or to help explain a technical concept, in addition to the copy.
Accessibility
Include text alternatives
For any content that is not text-based (images, audio, animations, graphs, etc) provide an alt version that is text-based.
Use the ‘alt’ and ‘title’ attributes on images and other graphical elements.
Use the <title> and <desc> elements in SVG drawings.
Include descriptive text near images.