Shutterfly Icons System
Role & Credits:
Support: UX Team (Kristin Sardina, Sarah Capello, Leo Calderon)
Intro & Goal
When I started working on Shutterfly's creation path for the mobile app, user actions were very limited; they could only add a single photo to a few number of products, and that's it. We wanted to imitate several features from the desktop platform that were text-based (like radio buttons), which wasn't adequate for the platform I was working on - not just because of the design language, but also because of the limited real-estate.
My challenge on this project was to create a system that would successfully translate the same options from the desktop website to the native app.
Examples from the desktop website:radio buttons don't fit the mobile interface.
Process & Experience
My initial process was mainly about finding the right visual language to design the icons. I tried a few different options and, with the helpful feedback from the UX team, set up on the final style. Once that was established, the work on it was quite ongoing.
These icons were fun to create and required me to understand each product, identify its main characteristics, and represent it in a way that was clear and illustrative, but simple. I created a spreadsheet that helped me calculate the proportions of each icon in comparison to its size in real life.
In the beginning, we had an icon committee that would approve each icon I worked on, but eventually, the team felt there was no need for that, so I worked on them on my own.
Some of the many versions of icons I worked on
Icon size convertor spreadsheetto calculate the proportions of each icon in comparison to its size in real life.
Some of the product icons were tested for clarity to make sure they were intelligible enough, even though they had text below them. At some point, the web team decided to imitate what the app was doing and started to use the library of icons I created for their mobile website.
The organization was very pleased about the outcome. Eventually, I started to support the design of other types of icons for all of Shutterfly's platforms.