Mogo Inc. is a finance tech company that offers a wide range of products for its consumers. Both the website and app reflect a clean, minimalistic, and contemporary design system. Prior to joining, it did not have much personality due to the lack of cohesive illustrations and icons. My task was to establish a strong illustration system that embodies the brand, and work in both the marketing and product design eco-system.

The process involved putting together multiple moodboards of illustration styles that would emulate Mogo's image, as well as examples of companies using illustrative styles.

The first of many explorations included textures, facial expressions, and unconventional body shapes.

At the time, Mogo Inc. had various product colours. Early illustration explorations included muted tones of the product colours, adding sophistication and ease on the eyes. It also better complemented both marketing and product platforms.

Solid shapes and lines were used to create a sense of playfulness and flow.

We wanted to convey to our viewers that managing money shouldn’t be a daunting task, rather a seamless integration into their lives.  By illustrating familiar objects and living spaces, viewers are able to better associate with the illustrations, which in turn builds on the brand image.

The illustrations are created balance of grey tones with spot colours. Subtle hints of branding are incorporated, where appropriate (ie. Mogo pillow).

While developing the library, I felt it was important to be inclusive and to have representation of our customers, especially for a Canadian company. Because of the introduction of various colours, it was important that it scaled across platforms: light background, dark background, level of detail for app/ web experience vs. marketing platforms.

Here are samples of Lottie animations that were created for the walkthrough.

Illustration Library 2.0

A rebrand was put into motion shortly after the first illustration system was implemented. Key words that represented the rebrand: powerful, strong, bold, empowering. These were elements that drove the new illustration style. In addition, the product colours were reduced to a limited colour palette, which became a challenge for developing the new illustration style.

Some of the early explorations of the rebrand included facial expressions, additional accessories, solid vs. patterned shadows, and prominent action lines to evoke motion.

The illustrations were created to be adaptive (in different colourways) to the product red, dark, dark grey background, and with the occasional light background). The animation style also played an important role in the rebrand.

The selected shadow style (halftone) elevated the flat vector style in sophistication. It was also an interesting challenge to determine how it adapted to the illustrations/animations as they scale in size.

The introduction of illustrations to Mogo Inc. was challenging, yet fun. As the product needs change, the illustration style will continually evolve. It also created a positive impact on the look and feel of the brand as a whole, and gave it an approachable personality that customers can relate to.