Introducing Shopee Icon Library: A Truly Iconic Experience
Project managed by Yew Chin, Senior Visual Designer
‘Words divide, images unite.’
These were the words of Otto Neurath, the inventor of the ISOTYPE method of pictorial statistics. And he was right. Over 7,000 languages are spoken today. If you don’t speak the language, you wouldn’t understand the message.
With icons, however, it doesn’t matter what language you speak. Icons are a universal language. They offer a form of visual shorthand to lower cognitive load. As web and apps aim to be more intuitive, icons have become the cornerstone of a good user experience; even more so for Shopee, as it serves as a hyper localised product in several markets.
The Problem
Shopee Icon Library was a product of a few issues we discovered:
- Inconsistency. As the team expands and new features emerge, the design of Shopee has moved from hand to hand. Over time, the icons used in-app also deviated from the original style intended, resulting in design inconsistencies.
- Inefficiency. Did you know? A designer takes up to 7 hours of research and design time, on average, to create a new icon. The same is true for non-designers who need icons for presentation purposes.
- Inaccessibility. Non-designers in need of icons often encounter one problem: editing an icon to the style they desire. Most icons sourced online are not editable without professional design software, as they often come in SVG or AI format. Even if the users manage to download them in PNG format for immediate use, they are usually in the standard black.
Though uncomfortable it may be, recognising lapses in our design and process was crucial. It became the first step to fixing our problem and propelled us towards the myriad opportunities to progress.
Process Breakdown
Once we’ve defined our problem, finding the solutions became easier. As with every design project, our first move was to understand our target users.
1. Understanding Our Users
We conducted meetings with potential users from different teams to determine their pain points when working with icons. Some users lamented the challenge of finding icons with a transparent background. What’s worse, finding icons that match was an even greater struggle, especially for non-designers with untrained eyes.
2. Conduct Icon Audit
We mapped out all our to-dos for the icon guideline and library thoroughly. Then, we gathered icons prepared by local teams and placed them side by side for comparison. That way, we were able to note the inconsistencies and set our intentions to refine them.
3. Create an Icon Guideline
Next, we held several rounds of internal discussions to talk about creating the icon guideline. We decided to draw inspiration from our Shopee logo. Hence, we examined the unique characteristics of the shopping bag to define what makes it uniquely Shopee.
From our observation, we then adapted the corners, strokes and curvatures to the icons and incorporated our brand colours. Here’s where the icon guideline starts to take shape.
4. Refine Icons
Once the icon guideline is in place, we started our redesign in full force. We gathered all existing icons used in-app, grouped them by country, and began incorporating the rules we previously laid out.
We also studied their silhouettes and what makes them recognisable. With icons, designers have lesser to work with due to their flatter and simpler designs. So the challenge was in creating an icon that accurately depicts the actual object using shapes that most people are already familiar with.
This process was an arduous endeavour. We couldn’t have done it without all the designers who contributed, including the interns.
5. Build Icon Library
Meanwhile, UX Designers Yado and Zhaoping worked on the library’s user experience, and Yew Chin worked on the user interface.
Once again, we regrouped with stakeholders and potential users to get their input on using the library and how we should structure the information.
6. Add Relevant Keywords
What’s an icon library without relevant keywords? The last step was to consider all the relevant words a user may potentially key in when searching for an icon. Here’s where we had to step into our users’ shoes and think and behave like them. For instance, what search terms would they use if they wanted an icon to signify growth?
We’d like to thank Content Designer, Denise, for her help in adding and reviewing the keywords.
The Result
Say hello to Shopee Icon Library! This library carries an extensive collection of over 500 free icons. It comes with customisable features that allow users to download the icons in any size, colour, and file format they desire.
Watch the video demo below for a quick run-through on how to use this library.
By addressing the three issues mentioned, we were able to achieve:
- Better efficiency. Shopee Icon Library eases up designers’ workload. From conceptualising and creating an entirely new icon, all they need to do now is search, select, and save.
- Greater consistency. All the icons — every corner radius, every stroke weight — comply with Shopee’s Brand Design Guidelines to ensure designs remain consistent with our communication standards. Take a closer look at the before and after shots of our icon redesign.
- Greater accessibility. We designed Shopee Icon Library for everyone, not just designers. With options to customise downloads, users don’t need to manually edit the icons using professional design software.
Whether they’re designers looking for more efficient ways to produce their designs or working on an important presentation, Shopee Icon Library has something for everyone.
One of our users, Esther, was thrilled to know she could download and use an icon instantly without needing to rummage the net for one with a transparent background.
‘Shopee Icon Library gives you the icons minus the unnecessary background! No more googling for <icons> + “transparent” anymore!’ — Esther, People Team
The Future of Icon Library: Encouraging Co-creation
So what’s next for Shopee Icon Library? We want the platform to be a collective effort, where other designers can contribute by designing and uploading new icons. But how can we ensure the quality and consistency of these icons?
All we can say for now is that new features are underway. Stay tuned for more updates!
Shopee is the leading e-commerce platform in Southeast Asia and Taiwan. Shopee connects shoppers, brands and sellers across Asia and other fast-growing markets, empowering anyone to buy and sell anywhere and at any time.
Shopee offers an easy, secure, and engaging experience that is enjoyed by millions of people daily. It offers a wide product assortment, supported by integrated payments and logistics, as well as popular entertainment features tailored for each market. Shopee is also a key contributor to the region’s digital economy with a firm commitment to helping brands and entrepreneurs succeed in e-commerce.
Stay connected with us via our Instagram!
