Morningstar launched its first mobile app in 2010 to serve the individual investor. Since then, the leading financial services firm has added more to its growing roster of apps. At the time, all apps were using the same icon design that employed a closely cropped “Morningstar” word mark. But as the number of apps increased, so too did the need to think systematically about the icon designs and to provide a framework for incorporating new apps in the future.

Morningstar apps serve many audiences, perform diverse tasks, and function on different operating systems. Some apps are for mobile and tablet. Some are desktop-only. Some are companion apps to existing products. And some are used by both individual investors and advisors, while others are used by institutional professionals only.

While a common visual language brings coherence to the family of apps, it must also help users quickly identify an app’s use, audience, and its relation to other apps. The letter O from the word mark serves as the common visual thread across all app icons. This circular form reduces the word mark to its essence, the morning star. The circle is re-enclosed and its subtle gradation is suggestive of a horizon.

In this visual language, colors signal an app’s user type. The circle’s scale shift distinguishes platform apps from task apps. For companion apps and products with significant brand equity, their product-branded interface colors are preserved in their app icons.

Brand Identity
Design Systems