Posted on October 20, 2018

InEvent Design System, Part 1 — Iconography

How we developed the design system for the InEvent platform redesign

Graphic elements (such as iconography) are a fundamental part of an interface. They aid in identification, organization, and hierarchy, as well as being important in helping to understand the texts of an interface, reducing the user’s efforts to interpret the layout. This reduction provides a better experience with less time spent interpreting the interface and more time invested in using the platform.

The problem

We offer a B2B platform that needs to meet different demands, needs, contexts, users, requirements, and that ends up involving a great diversity of tools and configurations. Our solution covers an app for Android and iOS, websites, forms, and web management tool, as well as other features. Therefore, we needed a pack of icons presenting the necessary consistency among those icons themselves spread out across different devices, applications, and resolutions while maintaining the recognition of functionalities despite all variables.

A new proposal

It was clear that we needed to create a package that, in addition to solving the interface problems we identified, could help the design and marketing team produce graphic pieces. We took into account the following criteria during the project elaboration:

• Organization: Creating an accessible package that could be quickly updated and stored by all design team members.
• Pixel-perfect: We need the SVG versatility to be able to meet all the requirements and icons versions.
• Identity: Defining a unique spelling that well represents our platform, maintaining consistency among graphic pieces, illustrations and interfaces.
• Compatibility: Creating a library capable of meeting different requirements of platform, resolution, language and software is essential.
• Flexibility: Spelling needs to easily adapt to the diverse identities of our user because it would be used to not only grant them access with our systems but also with white label applications generated by our customers.
• Meaning: First, the icons need to clearly represent the action or information they symbolize. Secondly, one should pay attention to the spelling not to generate any negative interpretation or to refer to something rude or offensive.
• Aesthetics: Attending to the basic expectations of both the interface aesthetic harmony and users.
• Consistency: Icons with the same aesthetic concept of the proposed family and the layout where it will be applied.

Development:

After mapping all the icons we needed to create, we then started working on groups based on the system, starting with the mobile application because it needed a smaller amount of icons. So we could run tests and validate new packages before we start working on the web interface. We divided the icons by mobile, web and graphic utilities. We also created subgroups by style, application, and function.

Challenges:

We need solid icons compatible with our visual identity, and also having a sense of modernity and a timeless style. During the development process, we faced several challenges, as:

• Maintain a low variation in trace density;
• Flexible graphics to attend the resolution variations and required devices;
• Representation and differentiation of complex or similar actions;
• Maintain the visual elements level within the proposed grid;
• Intercultural relevance

Conclusion:

A well-designed iconography adds value not only to the interface organization but also to interpretation and readability, reducing interaction time and facilitating memorization. The practices cited in this text can be applied to the vast majority of iconography projects. Still, always seek to take into consideration the specificity of the interface where they will be applied.

With this new iconography strategy, we have been able to present a more consistent system between devices and features. Our pack is still in development and in constant evolution. We maintain a close relationship with our development team, which constantly contributes to optimization and application.

Did you like the project? Soon we will have other texts on the InEvent design system.

Leave your comment below!

About InEvent: InEvent solutions have already helped companies around the world manage thousands of corporate events and conventions. Click here to access our website and learn more.

You can also read: How We Designed InEvent Self-Service Accreditation and Check-In System