Icon Set — UI

Upon joining Crestron, I began my Co-op by working on the company's iconography for various applications. My role involved creating new icons while also updating outdated ones that had been in use for the past 5–10 years. It was crucial to complete this work promptly to ensure the development team had all files ready for implementation and, more importantly, to provide users with the most up-to-date products that adhered to modern design trends.

At the outset of my Co-op, I met with my UX Lead and mentor to discuss my initial questions, gaining valuable insights that helped shape my approach. I received the following response:

"The icons need to be in SVG format, sized 50 x 50. Make sure all of the icons and logos are up-to-date, and I will let you know if certain icons need to be kept the same."

I. Adobe Illustrator (Ai)

At the time, I was still learning to navigate various Adobe applications while enrolled at university. Fortunately, I could apply the knowledge gained from my Design Fundamentals course at Rutgers to better understand how to convert .png files to .svg files effectively. I leveraged the "Image Trace" feature and its numerous options to enhance my workflow and achieve cleaner results.

II. Figma

While Adobe Illustrator proved useful, Figma significantly lightened my workload. Familiarity with Figma allowed me to quickly utilize the color picker and pen tool to recreate several icons sent to me. Additionally, its multi-select feature made it easy to export multiple icons simultaneously into my designated file folders.

III. "Why not just use an online image vectorizer?"

Although many online image vectorizers exist, they often do not yield satisfactory results. I initially attempted to convert simple icon images to .svg format as requested, but each generated conversion typically exhibited one or more issues: (1) blurriness, (2) uneven icon edges, and (3) failure to match the original icon's paths.

I'll admit that when I first received the icon files, I thought the task would be a breeze — however, the reality turned out to be quite different. It took me hours to convert the icons into .svg format while juggling my schoolwork, which led to working across different time zones. I also discovered that many of the icons were blurry, and some instructions in our email and Teams communications were unclear. Despite my busy schedule, I was expected to complete hundreds of icons within just a few hours to keep the development process on track.

Despite these challenges, I managed my workload as best as I could and took the opportunity to communicate a more realistic turnaround time, especially since many icons needed to be recreated from scratch. I understood the urgency of the project, given that most of the engineering team was nearly 10 hours ahead of my team's time zone (EST). Ultimately, this experience was a valuable learning opportunity, revealing that what may seem like a straightforward task can present significant complexities when examined more closely.

1. What is the recommended icon size for the intended operating system(s)?
2. What format should the icons be in, such as SVG or PNG?
3. Which logos should be updated, and which should remain the same?

If I could go back in time to enhance the user experience of my assigned icons project, I would consider the following improvements:

1. Work on communication for further clarification.
2. Request documents or detailed instructions for exporting.
3. Give realistic timeframes for my workload, given my schedule at the time.