Design system
Design System, Icon Design, Color Application, UI Design
I took the lead on the UI design for the SaaS communication platform – maaiiconnect. I have created a completely new and customized icon system with a round style that pairs well with the curved logo and circular elements to bring uniqueness to the product and express our style. I also ensured all the icons were consistent regarding the style guide, dimension, and proportion.
Color Application
Solving complex problems
One of the challenges when designing the icons for the core features within the application – call and messaging. The icon designs could become subtle and complex due to the wide variety of offerings.
Call Features
The product can offer call/end calls, incoming/outgoing calls, call broadcast, call transfer, 3-way call, toll-free, IDD, and virtual numbers. When I designed the icons for all the call types, I had to ensure each of the icons was expressive, intuitive, yet easy to distinguish.
Spacing – global
Color – global
Typography – web
Typography – web, iOS & Android
Buttons – web
Dialogue & Date Picker – web
Dropdown Menu – web
Input Field – web
Email Input Field & Status – web
Chat Bubble – web
The design system is shared with UX researchers and designers in 🇭🇰 Hong Kong & 🇹🇼 Taipei.
The customized iconography was part of the design system and saved on Sketch Cloud for sharing with designers overseas under a seamless process. My responsibility was to ensure consistency across the teams using the latest version of icons and UI components in their deliverables and developer collaboration. I also created documentation on record regarding the change of the icon designs, handling version controls, clear instructions for color use per status, and making announcements for major updates.
Team Feedback
"There's no more confusion and endless attachments!" – Norah
"It's satisfying when you see those symbols nicely organized." – Joseph
"It made any style changes easy peasy within the team!" – Natalie
"It also came in handy when I was working on the wireframes." – Jason
