驱动器图标删除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 ...
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.
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.
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.
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?
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.
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.
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.
我在整个素描过程中意识到的一件事是，我的某些想法过于复杂，我必须记住，我只有一个32 x 32像素的网格可以使用(下面的示例)。 这使我重新思考了我的方法，并进一步简化了图标设计。
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.
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.
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.
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:
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.
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.
I hope you enjoyed reading this as much as I enjoyed working on this project! Thank you for time. Please feel free to get in touch with me to discuss the project or anything else via the email address below: email@example.com / or on LinkedIn. If you would like to learn more about Perlego and their product you can visit their website www.perlego.com.