Background · Enhanced usability and aethetic appeal with icons
SOTI Connect uses icons as a way not only add personality and improve aesthetic
appeal to the UI, but icons also help to enhance recognition and reduces the amount of text a user has to
process.
Problem · Inconsistent icon styling increases UX confusion
Icons in the product lack cohesion, with inconsistent sizing, weight, and
detail. This reduces accessibility, weakens brand professionalism, and disrupts hierarchy by
making some icons appear more important than others.
How might we implement icon cohession within the product?
Simple and consistent icons
To improve readibility, icons are designed with simplicity in mind to account for the size that they
appear within the UI. The entire icon is now designed with the same weight across
the library and reviewed to ensure readibility.
Designing over 400 icons
Hundreds of icons have been replaced to ensure that every icon within the product now
adheres to the new standard. This process took an understanding of the icons meeaning, placement within
the product, followed by ideation, creation, and finally review.
1 to 1 replacement within the icon file for developers
SOTI Connect relies on an icon file which is plugged into development code. To ensure current code does not break, each old icon must be replaced with the
improved icon, matching by name. This will ensure the current code can reference the new icon
without any hiccups.
Results · Professional and clean
By standardizing and redesigning the icons in our library, we introduced
consistency, credibility, and clarity
Scalability
With an icon library public to all designers on the team and, following the same design language, it makes it easy for the team to create and iterate.
Automation
With reusable icon components, instead of recreating each icon and when an icon needs updating, there's once source of truth that get's applied to all it's instances.
Consistent
With a clearly documented design language docuimenting the proper standards for icons, each team member is able to design icons that align with the library. This results with consistency within the product but also across the product suite.
Credibility
With all icons aligning to a status quo, the business presents itself more professionally amongst it's competitors.
Learning opportunity
1. Iconography design
Communication within this feature was of extra importance.
Do to the system architecture, with a workflow as complex as this, configurations were
needed throughout the product to get this feature up and running. By considering how confusing this
configuration could be,
allowed me to properly think through how we would respond to the user during each setup and afterwards to
ensure that every
setup point has been configured and the user is not lost as to what to do next.
