IBM Project Monarch

In late 2012, an executive in my business unit tasked a small number of designers and developers with creating a proof-of-concept/design exploration reimagining IBM Connections as a social reader. This project was known as IBM Project Monarch.

As one of two designers on the IBM Project Monarch team, I was primarily responsible for the visual design of the application.

Project Monarch was unlike any other mobile product produced by IBM Collaboration Solutions. As a result, I approached the visual design differently from other products. I began my process by concentrating on the structure of the page – the baseline grid and the page grid, basing both of these off of 𝜑, the basis of the golden section. From there, I constructed a typographic scale based off of two Fibonacci sequences. Using IBM branding guidelines, I also developed a color scheme and font set to use in the product.

To ensure the visual design would work when real data was displayed, I took four days worth of posts from my Connections stream and applied the visual design to this content. This exercise helped to identify weaknesses that I was able to fix before development began.

To ensure that the visual design worked as expected, I applied it to multiple days of real Connections data.


Once I finalized the visual design, I created a visual design specification. This specification not only showed the visual design but also explained the motivations behind the design. This specification was used to get everyone on board with the design.

IBM Project Monarch visual design specification. Click to see full spec (34 MB).