Icon Library Redesign
Dates: Aug - Nov 2018
Team: Two UX Designers and a Project Manager
My Responsibilities: User Interviews, Card Sorts, Wireframes, Prototypes, Usability Tests
Overview: Categorizing the library resulted in users finding their desired icon 3x faster.
Introduction:
Pushpay works with organizations to help them build mobile apps. To better help our users, my team and I interviewed members of the Customer Success department since they are on the front lines of the business and interact with customers every day. From these interviews, we identified a major gap in the user experience: the icon library.
The icon library is a collection of over 1500 icons that thousands of our users utilize in order to design their mobile app. Icons are used throughout an app to not only help app-users with navigation but also provide affordance to the kind of actions available on a page.
Problem:
Users were spending a lot of time searching for their desired icon
Users often chose irrelevant icons, greatly reducing the usability of their apps
Before/After
Project Constraints:
Search Algorithm Difficulty:
From involving the engineering team early in the research phase, we learned that developing a search algorithm was quite difficult, so the design team had to come up with a way to make it easier for users to search without utilizing a fully functioning search bar.
Startup Woes:
Furthermore, being that Pushpay is still a growing startup, my team had to work with a tight budget for the project. Lastly, with offices in Seattle and New Zealand, our team had to collaborate remotely for the duration of the project (shoutout to Slack, Mural & Google Meet).
Understanding The Problem Space:
Our initial conversation with the customer service team helped us uncover the surface-level problem, but we wanted to find out more. What were our users thinking, feeling, and doing while interacting with the design? To answer these questions, we conducted user interviews and usability tests.
Testing The Original Design:
We asked participants to perform various tasks such as creating a new page in the app for an upcoming event, and using icons to represent actions such as “Share”, “Register” and “Add To Calendar”. After the user research sessions, we used Mural to produce an affinity map to uncover the underlying problems with the design.
Problem: Icons are all over the place and there is no organization. “This is like finding a needle in a haystack”
Next Steps: Understand a user's mental model by performing card sorting sessions. Use these insights to redesign the library's information architecture.
Problem: The old design required users to remember the names of icons in order to search for them. To make matters worse, icons weren't intuitively named.
Next Steps: Categorize and group similar icons together. This way, users don’t have to rely on just “search” to find icons, but could easily browse the library to find an icon.
Problem: Users were not aware of best practices when it comes to iconography in digital products. "I'm not a designer and don’t want to be, I just want to make an app that’s easy to use"
Next Steps: Create a shortlist of popular/recommended icons so users don't have to think too much. Also, create resources for users that want to know more about iconography.
Unorganized
High Cognitive Load
Uninformed
Open Card Sorting:
Card sorting sessions revealed how users categorized icons
To improve the design’s information architecture, we decided to do an open card sorting activity where participants could create their own names for the various groups of icons. However, one of the biggest challenges we faced was the fact that we had over 1500 uncategorized icons. Due to this massive size, we couldn’t do a card sorting activity right away.
We decided to run an internal workshop to see if there were any icons that should be obviously grouped together. For example, we pre-grouped icons dealing with clothes such as ties, shoes, shirts, etc. Doing this activity significantly brought down the number of “cards" we needed users to sort through. This was instrumental in redesigning the information architecture and understanding users’ mental models.
Ideation:
Brainstorming solutions to problems found in our research
Now that we had a more clear understanding of both the problem space and the information architecture, the other designer and I worked together to brainstorm ideas for our solutions. We also performed a competitive evaluation of other icon libraries such as The Noun Project, Font Awesome and Google’s Material library. This helped us not only get inspiration for features, but also helped us avoid implementing certain features that might not have been effective at helping our users.
Prototyping & Testing:
I converted our sketches and wireframes into digital mockups so that we could use InVision to create a prototype and test our design. We then recruited more participants from the same user group as before, and ran the first round of testing, again using the same script/tasks previously used. We wanted to see if the categorization and sidebar navigation were helping users find icons more easily. Once we completed this round of testing, we created an affinity map to synthesize our notes.
The first iteration was a good start but still had a few usability issues
1. Categorization:
Tests showed that the sidebar made it easier for users to navigate and see all categories without having to scroll.
"It's nice to see what kinds of icons exist and where they are"
2. Affordance:
We initially thought that putting icons next to categories would help users navigate, but in tests it actually confused users more. Some icon images didn't match a user's mental model of the category name.
3. Icon Size:
Tests showed that the design had low scannability because the icons were too small.
"It just all blends together...nothing stands out to me"
4. Back To Top:
We observed that users never used the "back to top" button. Instead, they just clicked on the sidebar to navigate.
Iterating & Testing Again
After analyzing the results from our find round of testing, we went back and iterated on our original design. We repeated our test again with new users and asked them to perform the same tasks as before. Our goal for this round was to see if the larger icons and expanded categories helped users find icons more easily.
The final iteration successfully tackled problems found in earlier tests
1. More Categories:
Test participants successfully found every icon assigned to them. This suggested that expanding the number of categories was a success.
2. Inspiration:
Expanding on the number of categories helped narrow the search options and inspired ideas for new icons to use.
"Let me look through the list of categories first to see where to start searching"
3. Larger Icons:
Bigger icons put more focus on the icons themselves rather than the names.
"I'd never seen that icon before!"
4. Grouping Icons:
Some icon names were not the best representation of the icon, so we decided to group icons by similarity rather than alphabetically. Our tests showed that this helped users get closer to finding their desired icon.
The Impact & Next Steps:
Increased Findability:
Users consistently found icons 3x faster using the new design as compared to the original.
Increased Discoverability:
Categorization and grouping made it easier for users to discover new icons that they wouldn’t have seen or thought to use before.
After the tests, we presented the findings to our Product Development team. Unfortunately, due to the company’s low budget and understaffed engineering team, the project’s development has been delayed.
Takeaways
Overall, this was a fascinating project to take on because I initially thought it would just be an Information Architecture (IA) problem. However, I soon realized that improving the UI elements can play a huge part in increasing a design's findability. In the end, our findings show that improving both the IA and UI of the original icon library would be an effective solution to making our product easier to use. Throughout the project, I also learned the following:
Talk to Customer Service:
An organization’s Customer Service team is a goldmine for uncovering problems with your product. They are interacting with users on a daily basis, and are often the first touch-point in a user's experience with the company/service.
Involve Engineers:
Involve the Engineering team early in the design process because it will help your team understand the technical limitations of the product, as well as get their buy-in to the idea.
Get Creative:
Don’t be discouraged to do a card sort if you have too much information for users to sort through. Get creative with ways to scale this number down to around 50 cards, because doing card sorting activities is critical to understanding a user's mental model.