As part of the Design Systems team, I created foundational guidelines for illustrations and iconography for the Flipp app. After conducting a qualitative research, we discovered that the users preferred a straightforward and simple illustration style as it matches our brand and purpose, which is a practical app used to find the latest savings and deals. Many of our illustrations are also animated using Adobe After Effects & Lottie in order to add personality and improve the app’s usability.
The illustration style focuses on clean lines and blue tones that are associated with trust and practicality. Our brand colour is used to emphasize important elements and connect the imagery with our consumer brand. The rest of the colour schemes were chosen around those blue colours to ensure that they work well together.
We also use hand gestures in many of our illustrations. This is because including human imagery had polarizing effect to our users. On the other hand, using hand gestures was favourable to our users as it clearly emphasized features and helped educate the users on how to use them, while staying neutral and relatable. After several rounds of qualitative research and iterations, we landed with a style that both fit our brand and the rest of the app’s design systems.
I also created two sets of icons for the app: the System icons and the Items icons. The system icons are a simple and minimal set of icons that are usually actionable or act as a visual guide accompanied by text. With this, each icon was designed to fit the style of the app’s typography.
Iconography is also used in the app to represent grocery items in our List feature. The old style used in the app was more playful, with happy faces in each item. But after conducting research, both within the creative team and our users, the style was updated to fit our brand and the rest of the app’s design. Unlike the illustrations that used a limited palette, thin strokes and abstract shape, the Item Icons used thick, solid lines, recognizable yet simple shapes and a wide range of colors in order to make them recognizable to the users. This is because the purpose of these icons is to help users distinguish each item in the list.