<aside> đź’ˇ For the best experience, view this on a desktop device due to detailed case.
</aside>
**Responsive design
Design Patterns
Learnings**
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:
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
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.
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.
I redesigned several user flows, shortening the user journey from “many to less clicks”. Below are just some UI samples with no particular order. That focused in me updating some older user experiences with some components I designed within the design system team.
The projects I worked always aimed to increase adoption rate of Templafy as a product. Increasing adoption rates was a key metric in Templafy initiative to increase licensing revenue. I liked working on “low-hanging fruits” projects and tasks rather than large user features, due to the fact I had to maintain the design system as well and work with engineers.
As a designer working on the design system same time, I aimed to unify the scattered user flows in the app for a consistent user experience. This occasionally encouraged strict structure over creative thinking.
Tasks included also adopting legacy UI and flows to what we were building anew. With small improvements in UX on the way but mostly just applying our new design system components and design tokens. Creating a dark theme was a fun project I liked.
