A design language for stories that look good anywhere.
At Tectonic, I was the senior product and UI designer on a three-month design discovery for Microsoft Sway, the Office app that turns text and media into a presentable website. We defined the structures and skins behind everything it produces.
goal
Microsoft Sway lets people turn text and media into a presentable website with very little effort. They still have to make it look like theirs. The first version had a dated look and feel, little customization, little structure and no motion, and content was hard to read.
Microsoft asked us to help define how Sway’s output could be both adaptive and personal: the rules, structures and skins behind every Sway, for business and for students, on mobile and tablet.
what we did
I was the senior product and UI designer on a three-month design discovery, working with an executive creative director, a creative director, a motion designer and a producer, and consulting with the Sway team ahead of the product’s launch.
Discovery was precedent and device-grid research, moodboarding, keyword and principle alignment, structure sketching, authoring-process mapping and wireframes. Three ideas came out of it: user delight and ease of use come first, content is king, and flexibility comes from structure, skin and content working together.
Style lives where content, structure and skin overlap. Each is designed on its own, so authors can change one without breaking the others.
structures and skins
Structures define how content is arranged and how a reader moves through it: five of them, from The Hero to The Full House, each with its own grid, image sizes and captions, and its own mobile and tablet behavior. Skins give a structure a personality through typography, color and graphic treatment.
We designed two complete skins for the same content. Kinsmen Red is refined, accessible and academic, built for the boardroom and the classroom. Full House Concrete is playful, brawny and colorful, built for photo essays and comparisons.
Full House Concrete: the energy of a summer blockbuster.
The same content in both skins, on phone and tablet.
where it landed
Sway shipped as part of the Microsoft Office family. People with a Microsoft account could combine text and media into a presentable website, pulling content from their device or from services such as Bing, Facebook, OneDrive and YouTube. An iOS app was released too, and discontinued in December 2018 because of low usage.
result
3
months of design discovery with the Sway team.
5
structures designed, each with its own grid and behavior.
2
full skins, for business and for students: Kinsmen Red and Full House Concrete.
