During my time as a UX/UI Designer at Perlego (the world’s online textbook library), I had already created an icon library that was user-driven, brand-focused and utilised a set of guidelines that will allow consistent design for each new icon and iteration to come (you can view the article by clicking here).

The platform has hundreds of thousands of books and to retain organisation of these books, they require to be split into multiple relevant categories that are easily accessible by our users.

These categories are called — “Topics”. Similarly to a physical library, Mathematics books are grouped together as are History or Geography for example.

My Role

At the time prior to the brief, the company had 16 different Topics, which meant 16 different icons. Each icon meticulously colour coded to allow easier grouping, representation and identifiability.

With icon design guidelines in place, the next logical step was to expand the icon library to include new Topic icon designs and so I was given my brief…but with a minor plot twist!

Due to the change in the structure of the library we were reassigning existing books to new topics. The task therefore was to redesign and replace the the Topic icons for web and mobile.

Additionally, this was the prime opportunity to also rethink our colours for categorisation and so part of the task included taking this into consideration.

The process

Initial research

Prior to my brief, we utilised a library from thenounproject.com in order to do this. Each icon represents a Topic. A briefcase for Business, a computer chip for Computer Science, an abacus for Mathematics, and so on.

A briefcase for Business, a computer chip for Computer Science, an abacus for Mathematics.

I wanted to understand what users thought of when they think of a particular word. I need to ensure the icons designs are easily recognisable by any user at an immediate glance without without additional supporting text. A user should be able to identify the Topic by looking at the icon alone.

So my starting point was to send out a quick survey. This survey simply listed all 24 Topics and asked for each Topic name — what image is the first thing to come to mind?

Example of the survey I sent out to identify initial immediate responses.

I received 29 responses and they starting providing clarity to the direction I need to initially move in. A couple of examples of the results of the survey are shown below.

Architecture — users related closes to buildings and structures. Business — had a strong correlation with briefcases and money.

But to ensure I had the strongest starting point I took all the responses and put them in an excel. I grouped each response by colour coding them to how strongly they correlate to other responses and then applied a formula to the results to show my what percentage of users fell into either a strong or weak correlation.

Dark blue — same response word for word. Light blue — Similar word or close relation. Green — Related term. Pink — Loosely related term. Purple — Weak and individualistic response. Yellow — Completely unrelated to any other response.

Sketching ideas

At this point, I had a good idea and a strong starting point to ideate some icons. I decided for each Topic I would sketch out some variations as I came to realise, whilst users will have a visual idea when presented with a word, will they make the same connection when shown an image?

One thing I realised throughout the sketching process is that some of the ideas I had were too complicated and I had to remember I only have a 32 x 32px grid to work with (examples below). This made me rethink my approach and simplify the icon design even further.

Examples of sketches I did for each topic that could potentially be used as an icon.

I further tested some of these icon sketches by approaching individuals on a one to one basis and creating an open dialogue about their thoughts on the icons, which they gravitated to per Topic and why this was.

I used this information to guide a few other sketches and refine the ones that seemed to work well visually.

Moving from sketches to digital

My next step was to take the ideas that were received positively and start designing them following the icon guidelines on Sketch.

During this process, I still came across the challenge that some of my designs encapsulated too much detail or were too complex for a 32px grid and I had to either find a way to strip back the detail or come up with a whole new idea altogether. An example of this was with the Topic “Architecture”.

As it’s a Topic that is quite open to interpretation and subjective visually, I had to go through a couple of iterations until I found one that was not easily recognised but worked well with or without the word “Architecture” being present.

Architecture — iteration 1 (top left), iteration 2 (top middle), iteration 3 (top right), iteration 4 (bottom left), iteration 5 (bottom middle), final iteration (bottom left).

Once I had gone through this process a number of times for different icons, I had 24 pixel-perfect icons, tested and tried. Now I needed to find a colour system that worked to help categorise the books and give these black and white icons a pop of colour.

Completed Topic icon set.

Applying colour

We predominantly utilised a white background in the mobile app and on the web and aims to retain a minimal look and feel. The previous icon colours worked well, but this was the opportunity to really make these icons stand out.

Because I had 24 icons, I had to find 24 individual colours. This part of the project I decided to share with a colleague of mine as colours can be quite subjective and it was beneficial to get someone with a strong UI background involved who can assist in guiding the visual direction.

We had a whole spectrum of colours to choose from. So with some advice from the design team we decided to create a level above the Topics named “Subjects”. We split the subjects into 5 areas which each hold it’s own shade of colour from the spectrum:

The final product

Picking colours for each icon was an iterative process in itself where my colleague and I constantly gathered visual feedback from not only my design team but also other individuals both internally and externally. But this process made the end result better than I had initially planned.

By the end, I had created 24 icons which were completely feedback driven throughout the whole process and they not only followed the icon guidelines, but they visually represented the Topics they are meant to represent, all whilst having an overhaul on the colour the defines them.

They also continue to add to the platform’s growing personality and they stand out fantastically on both the mobile app and web platform. Below you can see the icons used in situ on the platform.

Topic icons being used on web (bottom left) and on the mobile app (bottom right).

I thoroughly enjoyed this project as it brought about some interesting and complex challenges that truly got me thinking about how something as simple as icons and colours can have such a large impact on the platform’s usability and visual appeal.

Beyond that, it allowed me to think outside the box and approach iconography with a more structured format.