Microsoft

Interactive Timeline

Time traveling made easy.

BACKGROUND.

As Microsoft Partner Network (MPN) celebrates it’s 30 year anniversary, they wanted to create an interactive story to celebrate Microsoft’s history and that of their partners.

THE ASK.

To come up with an interactive app that would show Microsoft’s appreciation for its partners in their success over the years.

MY ROLE.

I was the Creative Director on this assignment. We were extremely short on staff so I also worked on the UX and UI Designs (storyboards, wireframes, use case scenarios) and the Visual Designs (Layered and Layer Comped PSDs). I was responsible for walking clients through our concepts, our wireframes, and our designs.

MY PROCESS.

Since this interactive app is a celebration of Microsoft Partner Network’s anniversary, the idea of an interactive timeline seemed a perfect fit. However, the challenge was weaving in different sets of timelines and showing how they tie in together. I started out by sketching a 3D timeline resembling a 3 lane highway. By using perspective, scale, and angles, I wanted to create an abstract illusion of time traveling.

I wanted the experience to be seamless without additional clicks or page loads to browse through the timeline. The experience should be as seamless and require as little effort as possible. With parallax design gaining popularity, it seemed like a good direction to take the timeline. Users would be able to browse through important events simply by scrolling on their mouse. As users scroll up or down, the events would move forwards or backwards. I added a keyframe on the bottom so that users could quickly jump through time as well.

The other challenge was weaving in the 3 timelines, making them distinctive, but also allowing users to see them all at the same time. I tackled this problem by giving each timeline it’s own lane: partners, Microsoft, and general tech history. They also had their own colors so users could quickly identify what type of event each bullet represented.

THE RESULT.

The end result is an easy to use timeline that highlights how the successes of Microsoft and its partners are woven in together. The timeline has it’s own vanity URL and was a hero banner on the Microsoft Partner Network homepage. Partners were ecstatic to see their business featured on MPN and looked forward to celebrating another decade as Microsoft Partners. Both client and partners were happy.





Project

Interactive Timeline

Client

Microsoft

Role

Creative Director, Art Director, Visual Designer, Interaction Designer

Categories

, ,