Redesigning an Entire Icon System
OutSystems released a new version of our integrated development environment (IDE), Service Studio, at the end of July 2021. Before the release, we’ve shared a month of content on how our UX/UI Team tackled this project while building and implementing their very own Product Design System to create a delightful experience for all users.
We started this series by explaining how we grew our UX practice. Since then, we have described the work of a UX Engineer and how they can help Design System Teams, we presented you with data on why illustrations add value to the interfaces of software products and showed why writing the words that matter is vital to establishing a UX writing practice.
We are wrapping up the series with an article on how we redesigned our product’s icons. Thank you for joining us on this journey to the world of user experience!
What Is an Icon?
Look around. Chances are that you are surrounded by icons. They are everywhere. Icons are truly a universal language; we’ve been using symbols to communicate ideas since antiquity. Hieroglyphs, anyone?
When it comes to user experience, icons pave the way for a smooth and delightful interaction with a product. An icon (correctly done) will communicate concepts at a glance. They lower the cognitive load and make better use of space in interfaces. They also serve as visual anchors, improving findability and remembering details in a user journey.
Why Are We Talking About Icons?
We set out a goal for the future look and feel of the product. A complete modernization took place and we achieved “Product Visual Sophistication.” (We actually wrote the full story behind this initiative and how we got there in this article.)
OutSystems is a visual programming language and icons are a key ingredient. They are the visual representation of the OutSystems language concepts.
As we upgraded our product, we had the opportunity to completely redesign our icons from the ground up, reinforcing our commitment to the modernization of the platform.
We didn’t jump right away on redesigning the whole icon system. There was a need to understand what we really had in our hands.
We reached out to different teams that helped us put together a list with all icons and, more importantly, understand the context and metaphors that were being used.
Our product -Service Studio — has almost 20 years of development with a lot of new features added along the way. We found icons with inconsistent metaphors. For example, for the action visibility (hide/show something), in some parts of the UI it appeared with an eye icon, and in others with a magnifying glass. Overall they needed to be visually uplifted.
Fast forward, we ended up redesigning close to 2,000 icons and counting.
The Goal Was Designing for Everyone
Service Studio is getting a fresher look. We aimed to reduce complexity and cognitive load, by giving the user a more focused and accessible experience.
Our iconography principles:
- Designed to be simple, modern, and intuitive.
- Maximize comprehension and reduce cognitive load.
- All icons in the user interface should be consistent in style.
While we were updating to the new icon system, we didn’t want to completely move away from the already established iconography. This was another goal: to modernize the system and keep familiarity, or what our users are used to seeing.
The Birth of the Product Design System
With the Product Visual Sophistication initiative, we had a major breakthrough in our product; the creation of a product design system, aiming for a high quality, consistent, and cohesive experience.
Redesigning all icons would require a thoughtful approach. We needed a system within the product design system for our icons. What? A system within a system? Yes. We can say we defined spacing, colors, sizing, and components specifically for icons.
A foundation and clear guidelines were created to construct these new icons in a more efficient way, ensuring consistency across the product.
Our basic guidelines:
1. Size Matters
Our icons are designed on a base layout grid of 16×16 pixels and scaled up to provide additional sizes: Small (16px), Medium (24px), Large (32px).
When designing a new icon we set out with the 16×16 layout to ensure readability at smaller sizes.
2. Consistent Icon Grid
With the icon grid and clear guidelines, we can achieve efficiency and consistency in the icon system. In a product with such a large number of icons (2,000 and counting) and designers spread across different teams, an icon grid ensures that everyone gets on the same starting point when it comes to design icons.
3. Use Keyline Shapes
Keyline shapes set the foundations for the icon grid. Using these shapes as guidelines, strips out the guesswork from the designers’ work, using them to keep proportions and placement consistent throughout the icon system.
4. Live Area and Padding
In the 16×16 base, icons have a 14px live area and 1px reserved for padding and additional optical adjustments if needed.
5. Style and Forms
After deciding the icon’s goals and principles, we redesigned its shapes to be consistent with the Product Design System styles.
We changed gradients and the 3D looking icons into flat colors and straight lines for better readability, and less visual clutter.
We found a mix of line weights in the previous icons. For the new design version we used a 1px line across all icons, creating a cohesive experience and familiarity between different icon groups.
Figma tip:
When designing icons in Figma, your best friends in settings to get pixel perfect icons will be:
6. Colors (Accessibility, Light and Dark Theme)
Color also needs to be systematic, helping the user to understand meaning and relation between actions.
We were already using color to convey meaning inside OutSystems’ visual language; with this redesign we just simplified the system, reducing the amount of options to the essential.
Orange: logic
Blue: data, operators, screens, widgets
Green: positive feedback, start actions, structures
Red: negative feedback, primary keys
Yellow: warning feedback, misc actions
Grey: default color for system icons
Color was one of the biggest challenges we faced in redesigning the iconography. On top of all the work and effort that went on the creation of icon grids, keyline shapes, making sure every 1px line was aligned to the pixel grid, we were also introducing a brand new feature in Service Studio: dark theme.
That’s right, dark theme! One of the most requested features by our community.
Challenges Along the Way and Good Color Contrast
Designing accessible color for such a wide spectrum of new color backgrounds proved to be a design challenge, but achievable.
Good color contrast makes the product easier to work with for people with visual impairments and helps in different lighting conditions, making color contrast an important part of achieving that accessibility goal.
We made use of some accessibility, contrast check plugins, and made tests with Service Studio users with different visual impairments to help us choose the final color palette. After several rounds of iterations and tests with real users and interfaces, we got to the final palette of colors that achieved the balance between accessible and vibrant, in both light and dark interfaces.
Getting there was really an iterative process; changing to the new icons, removing the gradients and unnecessary complexity. We also gave the colors more vibrancy and contrast, which can work on light themes, but was a new challenge with dark themes. Contrast and vibrancy gained a whole new meaning, and we would learn more on that with our user tests.
User Tests and Tips
We presented Service Studio with new icons to users that had heavy daily use of the tool. We were looking for the impact and overall perception of the new iconography and to understand how different colors can impact daily usage.
Colors that can seem to work while you are designing, that tick all the accessibility boxes, can be seen completely differently from a user that has to be productive and focus on several tasks and actions. Iteration was needed after the test results. Some colors were just too bright and called for unnecessary attention in the developer’s workspace.
Two tips on testing color on light and dark themes
- Try not to test light and dark themes in the same session or with the same user. While conducting the tests, a sudden change of themes can be too harsh for the eyes. In a real context the users would need some time to adapt to the new light conditions of the screen.
- Take note of all the variables that come to play, including ambient light of the room and luminosity of the screen.
On top of the user testing we always made use of the Sim Daltonism tool. It simulates the perspective of a color blind (parachromatic) person, and lets you visualize colors as they are perceived with various types of color blindness.
In the end, we got positive feedback from users that perceived Service Studio being more modern with the icons. We toned down the vibrancy of the colors, maintaining the contrast and keeping the icons accessible.
Our iconography will always be evolving. Being part of a world of constant change, the evolution of our icon system will continue to grow and adapt with our product.
Originally published at https://www.outsystems.com.
