The Idea
The project was born because of a situation where when the Design Team updates the icon library, the Development Team has a hard time to follow the changes. And in order to change the SVGs in the codebase, developers need the code snippet. So by using the library, we can keep designers and developers on the same page because all the information they need is right in the Moongoose. 
After communicating with the Design Leader and Dev Leader, we decided to build this tool that was going to benefit both designers and developers. 
The Research
There are many great icon libraries out there, such as Ionicons, Noun Project, Flaticon, Material Design, Font Awesome, Bootstrap Icons, etc. They all serve different purposes, so the features are vary. I asked myself that what are the most important features that we need to be just enough for this project. 
I explored those icon sites and collected all the features that might fit in our icon library. 
I finally narrowed down to 14 features as showing in the list. My decision was based on the original purpose of the project, which is to serve designers and developers to be able to view the updated icons and access those assets for development. 
I didn't include the features like "save for later", "add to cart", or "sort by popularity" because we are not building an eCommerce icon site to sell or promote any icon. It just doesn't make sense to the purpose of the project. 
The Wireframes
Once I decided on the features, I started grouping the features by using color codes. For example, "search", "category", "size scale", "icons", "icon names", and "select" features can go in one section, so I color coded them in red color. 
After grouping all the features, I started to have a good view of the layout. There are three sections: identity, main panel, and side panel. On the main panel, there are a search bar, category selection, scale slide, all the available icons, and icon names on hover. On the top of the right panel, it's an icon preview sub-section including the currently selected icon and the name of the icon. The rest features will go under the preview section. 
The Details
1. Search Bar
The search bar is on the top of the icon collection, so when the user scrolls, the search bar will go out of the screen. Thus, the search bar has to stick to the top as the user scrolls. 
2. Size Scaler
The scaler will provide the ability to size up and down the icon collection for different looking and spacing. However, instead of unlimited levels of scaling, I wanted to only provide 8 levels of size: 0.25 rem, 0.5 rem, 0.75 rem, 1 rem, 1.25 rem, 1.5 rem, 1.75 rem, and 2 rem. 
3. Icons and Names
Many icon libraries display the name of the icon right underneath the icon, but I find that it can get messy if the name of the icon is too long or too short. To be visually consistent and clean, I decided to display the name when hovering over the icon. And when the user clicks on an icon, it adds a 3px width border on it. 
4. Dynamic Preview
The icon preview is designed to be dynamic, meaning when a user selects an icon in the icon collection, it displays that icon with the icon's name. With the option of black and white color and resolution, a user is also able to download an svg or png version of the icon. 
5. Similar Icons
This function comes handy when designer and developers want to look up similar icons of the selected icon. 
The Prototype
The Review
After creating the first prototype, I decided to interview a developer, ask his opinion on it, and have him perform a task. 
I asked him to try to use a down arrow in his current project with the Moongoose icon library. I also asked him to use think-out-and-loud method since this is not an interactive prototype. He basically found himself doing it correctly: 
"I would search for the keyword: 'arrow'. Then I will click on the icon that I want. I would next move my cursor on to the HTML code snippet, then double click on the snippet and user keyboard shortcut Command + C and V to paste into my editor. " 
After he played around the icon library, he said that it's good to have all those functions like download in SVG and PNG format, view in different colors, and have it available in javascript and PHP. However, I come here is just grab an icon and continue back working in my code editor. If I want to modify the icon in a way, I would just add attributes to the code snippet instead of clicking and choose on the icon library interface because most developers work with code. I don't really spend time in the library. 
The Iteration
He was right, this icon library should be designed for developers to be used easily and quickly as a tool not an application that team spend time on. Any extra features should be added per requests or for a reason. Otherwise it serves no purpose and wastes resource to develop and maintain. Therefore, I iterated the design. I removed the extra features (icon preview, download, share, color, and javascript and php code snippet) for now. Also, in order to make the tool seamless to use, I decided to shorten the steps of copying a code snippet. It used to require users to select an icon, then select on the code snippet, then copy. Now if users select an icon, it will pop up a success message "copied" in the code block, which is just one click to copy. 
The Development
With the help of the Development team, we were able to use Vue components to build the project, which makes the library easy to scale, update, and maintain. Here are some examples of the components that are working in progress. 
The Next
This is a work in progress project. We've finished two iterations of design, and now we are in the stage of development. After development, we will test the site and make it available for the Design and Development Team internally. Then, we will start collecting feedback again from the team and iterating the design over time. 

Other Works

Back to Top