Simplifying Simulink Icons

This project focuses on the redesign of 150+ Simulink's toolstrip icons, making them cleaner and more versatile. Now they adapt seamlessly to dark themes, enhancing user experience.

Introduction & Problem

Simulink is a software program used to design and simulate models of physical systems. Within Simulink, users rely heavily on intuitive icons within the toolbar (toolstrip) for quick access to various functionalities. These icons become ingrained in a user's workflow, allowing for recognition at a glance.

However, the existing icons presented challenges.

Inconsistent Design

Simulink's icons lacked a unified design approach, resulting in a cluttered look.

Scalability Issues

The existing PNG icons became blurry on high-resolution screens due to poor scalability.

Dark Theme Roadblock

A planned dark theme wouldn't work with the current icons, requiring a redesign for proper contrast.

Maintainability Concerns

Modifying the PNG icons was a tedious task, as each change meant updating thousands of files.

Show me Results

Project Scope

MathWorks, the company behind Simulink, embarked on a company-wide icon redesign. This project aimed to update thousands of icons across MATLAB and Simulink, transitioning from skeuomorphic styles to a modern, flat design. Vector graphics replaced pixel-based icons, ensuring scalability, dark theme adaptability (code-controlled colors), and easier maintenance.

My Focused Efforts: I spearheaded the initial icon redesign for Simulink, prioritizing the user experience by focusing on 150 critical icons across five key toolstrip tabs. This targeted approach not only addressed usability and consistency but also laid the groundwork for Simulink's overall icon modernization, ultimately enhancing user interaction with the software.

My Process

Organized Workflow with Feedback Loop

Utilizing Figma artboards, I tracked icon versions and feedback, fostering collaboration with Subject Matter Experts (SMEs) and design leads to ensure usability, accuracy, and design system consistency.

Prioritization and Efficiency

An Excel spreadsheet categorized icons by design stencils, allowing for focused efforts on similar icon types, streamlining the redesign process.

Strategic Decision Making

My process balanced efficiency with user experience by:

Searching the existing icon catalog for potential icon reuse.
Consulting SMEs to vet potentially repurposable icons.
Only creating new icons from scratch when necessary.

Using Stencils for Consistency

Standardization was crucial for maintaining design consistency across the icon set. The visual design team provided a set of 19 stencils to act as templates for creating new icons.

Overcoming Challenges

This section details these challenges and the solutions I implemented to achieve an optimal outcome.

Balancing Detail with Pixel Perfection

One key challenge involved redesigning intricate icons for small sizes (24x24 and 16x16 pixels). These icons often represented a complex functionality, and maintaining a high level of detail would have resulted in pixelation and a loss of usability on smaller screens.

To address this, we focused on creating clear and concise icons that prioritized functionality over intricate details. This ensured optimal readability and usability on all screen sizes. User testing was done on all the icons to make sure changes are acceptable by the customers.

The Stencil Gap

There were 25+ icons representing signal types lacked a dedicated stencil.

This stencil would've helped other designers design consistent icons in the future. After working with SMEs, I took the initiative to create a new stencil specifically designed for these signal icons. This new stencil offered the flexibility to accommodate various signal types while maintaining consistency with existing icons.

This new stencil was recognized and appreciated by the design team.

Preserving Legacy in a Modern Icon Set

A challenge arose with a few existing icons. Deeply ingrained with user and company history, their intricate details hampered readability at smaller sizes (16x16 pixels).

To address this, I collaborated with SMEs, product owners, and user researchers. We explored simplified variations while prioritizing user recognition and usability, especially on smaller icons. This collaborative effort ensured even legacy icons were optimized for the redesigned Simulink toolstrip.

Results

The redesigned icon set for the Simulink toolstrip delivers a clear and modern aesthetic. These icons, a departure from the previous skeuomorphic style, prioritize user experience through:

Simplified Visuals: Clear and concise icons ensure readability across all screen sizes.
Scalability: Vector graphics enable seamless adaptation to various resolutions.
Dark Theme Compatibility: The redesign facilitates effortless transition between light and dark themes.