Our iconography design process for digital products
Designing lovable digital products goes beyond creating something functional. The details, down to the smallest elements on a page or screen need to be cohesive for that product to properly represent a brand. That includes iconography.
Our design team recently completed an internal project to revamp our ArcTouch iconography. This post shares the iconography design process we used to create a library of assets that perfectly reflected our company and brand values. It’s a similar process to how we design lovable digital experiences for our clients: research, create, review, and refine.
The iconography design process: Step by step
The goal of our iconography design project was to create icons that represent the company with a modern, playful, and cohesive look. Ultimately, we wanted to make it easy for anyone in the company to use these icons for their specific work. Whether for our website, internal documents, or external presentations, our visual language would be more consistent with our new iconography.
Step 1: Research and analysis
Our first step involved doing some research. We mapped competitors in the industry and also other brands that we admired. After analyzing a wide range of iconography examples, we organized them across a spectrum of two opposites: modern and minimalist vs. more playful and quirky. This clearly showed both extremes so we could better understand how they communicate visually.
A visual spectrum of the design references for the iconography project.
Step 2: Create mood boards and abstract concepts
The next step was to create mood boards for the endpoints of the previous spectrum. We wanted to better understand those concepts by answering these questions:
- What makes something modern or playful?
- What would a physical place look like with these attributes?
- How would a person dress to fit with the iconography styles?
- What products align with these examples?
The mood boards and the spectrum helped us define a target for ArcTouch: balancing a modern aesthetic that’s objective and functional, but also playfully human and dynamic.
Conceptual mood boards: minimal & modern above; playful & bold below.
Step 3: Explore iconography directions
Based on the mood boards and the references collected, I drew early sketches of the icons in my sketchbook. On paper, I can quickly turn raw ideas into early visuals without worrying too much about the final output. After a few minutes, I had a bunch of sketches. I shared these with my manager. She helped me hone in on a few favorites, and offered new ideas for experimentation.
My early sketches of abstract icon concepts.
With a solid starting point, it was time to get back to the computer. I used the principle of the “Magic Triangle,” a creative framework we often use (including on this ArcTouch T-shirt design project) to limit the overwhelming possibilities when designing something new. I drafted two triangles, one for each side of the spectrum, to guide my visual refinement from raw sketches to digital design.
“Magic Triangles” helped guide the styling of the icons.
This method is very effective. The rules, instead of just limiting options, actually create guides to follow. And with the previous research as support, the refinement was fairly smooth. I created more options than I initially imagined, but all of them looked consistent with each other and aligned with the target concepts.
On left, visual references for the icon design. On right, icons are refined from sketches.
Step 4: Gather feedback
Like we do on our client projects, it was time to pause and gather feedback from the design team. We set up a design critique for my colleagues to share their thoughts and ideas. It was a chance to gather feedback in areas I could improve — or things I hadn’t even thought of. The main focus, of course, was choosing a solid option from each of eight different icon categories to move forward with.
Instructions for the design critique participants.
We presented the mood boards and the Magic Triangle rules and asked people what icon options they liked and what could be improved. My peers provided new ideas with visual references. The critique session was very productive.
Feedback provided by my team during the design critique.
Step 5: Refine iconography designs for final review
After the critique, we gathered all feedback and determined how to implement any changes on the final version of the icons. For the final review we prepared two slide presentations in the styles of the new brand iconography. One had a clean, modern aesthetic, and a second was more playful and dynamic. It was helpful to see the iconography in the context of other brand assets (like a slide template) to help determine our final direction.
Slides with a modern aesthetic for the final iconography presentation.
We ultimately chose the style that was more dynamic and playful:
Slides showing a dynamic and playful style.
Step 6: Finalize and publish icons for internal use
The final deliverable for this project was a set of 100 variations of our custom-made icons that visually represent ArcTouch’s values and identity. They are ready for use on internal employee-facing and external client-facing materials — including a new slide presentation template.
Here are some of the final icons we created:
This project was fun and rewarding. And like most great design projects, it was a complete team effort. Special thanks to my team members, especially Lari Didoné, Pedro Pazitto, Arthur Avila, and João Brizzi.
Need help with your design project?
ArcTouch’s app designers and developers build lovable apps and digital experiences for Fortune 500 companies and leading brands. Contact us for a free consultation.