<aside> 💡 For the best experience, view this on a desktop device due to detailed case.

</aside>

In this case study

Icons

Illustrations

UI examples

Discovery and Research

**Responsive design

Design Patterns

Learnings**

Product designer at Templafy

Initially hired as a product designer, my role later expanded to encompass cross-platform design responsibilities. As a result, I undertook the task of establishing the foundational elements of Templafy's design system, which can be viewed in greater detail in the provided case study.

I was responsible for delivering product design solutions that had a consistent user experience across all of Templafy's services, including but not limited to product color schemes, illustrations, icons, onboarding users, translations, a11y research and user actions patterns such as editing, deleting, adding, auto-save etc.

Design methods I worked with:

• User interviews based on storytelling rather than yes/no questions
• Opportunity solution trees - a visual tool used to help product teams organize and prioritize product ideas based on customer needs and business goals
• Rapid Prototyping - creating quick and low-fidelity prototypes to test and validate ideas before investing significant time and resources (A/B testing with usabilityhub.com)
• "Jobs-to-be-done" (JTBD) for ideation

Templafy's product development used Teresa Torres' continuous discovery approach, prioritizing customer needs and feedback throughout the cyclical development process.

https://www.youtube.com/watch?v=s8MN8usnBtc&ab_channel=Templafy

Icons

Based on my previous experiences as a visual designer, I have developed the skills and knowledge necessary to design UI icons. I undertook this task too at Templafy.

Why?

We had two sets of icons: one for marketing and one for the product UI. The ones used on the website and in company presentations were too complex and detailed to be used in Templafy user interface. Additionally, when working on a cross-platform product, we needed a framework to create icons that would display properly on all screen sizes and resolutions. This is where my experience came in handy.

Creating a icon framework for Templafy product design allowed designers to easily create new icons for each purpose we needed, rather than relying on a common icon library as they were doing it before.

Example of Templafy UI icons from Figma

Guidelines

Icon design is a specialized skill for product designers and developers. Sometimes icons may appear well-aligned in Figma, but bounding boxes can disrupt the desired pixel precision in production. In addition, developers may randomly select icons for their projects.

To address these issues, I created a Icon manual for designers and developers.

Learnings:

Designing product UI icons is a challenging task, demanding consistency and functional aesthetics within the overall design language. Choosing between predefined icon libraries and custom icons depends on the product's needs and resources. Having a dedicated visual designer specializing in icons and illustrations can ensure high-quality and cohesive visual elements.

Design guidelines for UI icons ensures consistent, brand-aligned interfaces, enhancing usability and collaboration while streamlining development. When time and place allows me I like to design them. If not I like relaying on Google icon set.

Illustrations

As my role expanded to cross-platform design, I took on the challenge of incorporating illustrations. With exposure to all Templafy products, I became the go-to person for ensuring consistent use of illustrations and icons.

I developed a streamlined style for product illustrations, used in empty states, error messages, and user guidance. You can see some examples below.

https://www.youtube.com/watch?v=qyzIoyd5BI0&ab_channel=Templafy