Screen capture of an interaction design prototype for a sidebar in the Finance app, which used SCXML (Statechart XML) to specify the exact interaction tactics. My role: interaction designer, prototyper.

Apps with ubiquity

At Microsoft my first role was prototyper for the AMP team. We designed and built the first-party apps that came with Windows 8 (and later also Windows 10), which were many users’ first real experiences with the new Windows OSes and touch-enabled devices.

The prototypes I built for AMP had to run on a specific version of IE which implemented Pointer Events for touch and stylus devices. To this day, Pointer Events is still my favorite API for this type of interactivity, since it elegantly surfaces input from any combination of mouse, stylus, and touch through one consistent interface.

Statecharts for interaction design

As prototyper, I established the first interaction design specification workflow. This meant defining interaction designs using statecharts and rendering those statecharts into SCXML, which was then used directly in the prototype using the SCION statechart interpreter for JavaScript. You can see an example of this in action at the top of this page.

Using statecharts this way clarified communication with product owners and engineers, and it also enabled us to iterate on interaction designs more clearly and see those iterations more readily in the prototypes.

Worlds of stories for any canvas

Several of the AMP apps hosted news experiences with current stories relevant to the app, such as business news in the Finance app. Our challenge there was to maintain user engagement by breaking up what would otherwise be a very monotonous experience in a way that still drew users in and showcased the apps’ diverse content.

Screen capture of the Flexible Content Display prototype on a Surface using the arrow keys to move between stories. (In one build we did truncate the abstract with an ellipsis, but ultimately this was deemed too computationally expensive.) My role: prototyper.

While building the stories collection component, we wanted a way to arrange a large collection of stories of varying content; some had images not all of which needed to be displayed, all had headlines and bylines, and we wanted to support a varying amount of text from the story’s abstract, if available.

I led the engineering effort to build this algorithm for calculating the layout, which leveraged the new Flexbox CSS spec and ultimately resulted in our patent application for “Flexible Content Display”, which essentially weighs the content available and the space it would occupy against the canvas space available and the need for variety.

Back to Portfolio