in Icon design

How an Ex-Lawyer Created Spectacular New Icons for a Document Management Application

In this case study we will showcase how new, custom-made icons were created to refresh the UI of Adept, an engineering document management product by Synergis Software. Adept helps to find, manage, and secure access to enterprise engineering and related documentation.

Some examples of final icons

Some examples of final icons

Client needs

By engaging with their customers, prospects and the team, Synergis Software became aware that the UI of Adept was old fashioned, slow to navigate, and required a major refresh to boost its functionality. Adept had had the same look for many years and it was time for change. The product managers and developers decided to redo the interface, starting from adding a ribbon bar, where all the commands would be placed.

After several meetings discussing the order of commands, and where exactly each command was to be placed, the team created a mockup for the new layout. At this stage, each of the command needed to be visualized with an icon that would communicate its function as clear as possible, at the same time ensuring great overall look and feel, and consistency between different interface elements.

Part of the mockup

Part of the mockup

“By moving to a ribbon interface with easily understood icons, users who had to make up to four mouse clicks to execute some commands will be able to execute the same command with a single mouse click. Having icons allowing users to quickly identify commands is critical to user acceptance of this UI change and for efficient command execution.” – Joe Gasper, Product Manager at Synergis Software

All in all, 155 icons were needed to display the commands in Adept. The black outline with a little color was the preferred style, giving a modern look to the interface, yet keeping it functional and non-distractive.

That’s when Joe, product manager at Synergis Software, contacted Iconfinder, searching for best icon designers that could do the job. He submitted a brief, including mockups of their visions for the icons, and from that point the process was fully coordinated by a personal project manager at Iconfinder.

Selected designer

Since the Synergis team had a clear picture of how the new Adept icons are supposed to look, out of the proposals from icon designers on Iconfinder, they selected the one that provided the samples closest to their vision. This was Gašper Vidovič, often informally called ‘Picons’ among the Iconfinder team due to a same name of his amazing vector icons collection.

Gašper has been Iconfinder friend for quite a while, and we’ve been curiously following his journey from being torn between career in law and doing design work in spare time, to focusing exclusively on his passion for design and icons.

“Keeping up with two diametrically opposed professions was a big pressure, as I was aiming to be the best in both. Beside some law consulting, I’m focused 100% on design now – a job I fell in love with when I was 15.” - Gašper Vidovič

Gašper was a perfect fit for the job, since his most successful icon collection was in outline style and he has recently been prototyping a new colored collection. He also surprised everyone by including 12 icon examples (instead of usual 2-4) in the initial proposal, submitted within 24 hours after the brief was placed.

Gasper’s response to the brief: prototypes of icons

The process

As Gašper explains, the first steps, after studying the brief, were to define the grid. He has chosen 24px grid, with corner rounds, stroke weights and color palette as basic elements defining the visual language of the icon set.

“Larger icon collections require not only to follow a grid, but also strict style guidelines that will define the character of a collection. When this fundament is built, creating a large icon set will be fun, as those design elements get repeated throughout the set to tie all icons together as a whole.” - Gašper Vidovič

Style guidelines and color palette of the icon set for Adept

Style guidelines and color palette of the icon set for Adept

Creating such an extensive icon set is a complex task. Besides following strict style guidelines, designer has to come up with generally understandable metaphors, explaining the meanings of each single command, to help users navigate in the application more intuitively. Taking into account that Adept is a niche product tailored for particular industries, this can become a daunting task.

“Some icons had to cover a very specific set of actions, where there was no widely recognisable and unmistakable metaphors for them. With the helpful feedback from the client, I’m positive that we overcame those hurdles and made an icon set users will feel comfortable with right from the start.” - Gašper Vidovič

An example of icons reflecting a complex set of actions

An example of icons reflecting a complex set of actions

Due to a high amount of icons, the design work was split in five batches, where the client could give feedback throughout the complete design process. The communication was handled by Morten, project manager at Iconfinder, who delivered the designs to the Synergis Software team and their feedback back to Gašper.

The communication was efficient, timely, and effective. Morten made the entire process easy and quick. – Joe Gasper, Product Manager at Synergis Software

Gasper agreed that the overall process was very smooth, with client also providing feedback that was easy to understand and made sense, allowing the project to be done in stunning time.

We were also curious which icon, out of the full set of 155, is Gašper’s favorite. He pointed us towards the ‘Generate Report’ icon.

“My favorite one is the icon for generating reports. The reason for it is simple: the icon is obvious. Using well recognised metaphor for reports (bar and line chart) and the right amount of color, the icon is recognisable for the user in seconds without labeling.“ - Gašper Vidovič

Gasper’s favorite icon

Integration in the product

Synergis Software team is very pleased with the resulting icons and has all of them already integrated in the new version of Adept, which now undergoes testing, with a target release date of August, 2016.

Some examples of new icons integrated in Adept’s toolbar (click for a larger image)

If you are also considering refreshing the UI of your product or platform, check out our custom icon design service at www.iconfinder.com/custom-icon-design.

Write a Comment

Comment