Education x Microsoft

Education at Microsoft is a faceted and facinating endeavor, actively and passionately exploring the future of technology in education, while at the same time pragmatically neutralizing competative offerings.

I was a hands on interaction and motion designer that helped lead efforts across Teams for Education, MS Forms, OneNote Class Notebook, and other suite wide IA and incubation projects.

  • Role Senior Product Designer
  • For Microsoft
Mental models I'd like to start by "showing my work." Specifically, what follows is a quick walk through of the three mental models we explored for the Teams in Education experience. Below that you'll find some wireframe explores and gray box iterations, an interaction/motion prototype, and lastly some additional education and interaction experiments.

Mental model explorations. Time (in weeks) on the X axis, scrollable content on Y and “Add/Edit” and “Details” on Z.

v1 Motion based on Z axis mental model and full bleed canvas area. (visual x paula moody)

v2 removes the “peek” content to the right on the “Details” layer and adds a “Review” layer on Z.

v2 Motion based on Z axis mental model. (visual x paula moody)

After fully exploring the Z axis in our mental model, I took a step back and asked, “why?” Does Z help the user organizationally? Will this model be in concert or conflict with other models on the Teams platform? After a little user feedback the answer was clear. No, Z wasn’t helping the user (outside of some user delight and/or cool factor). So, I simplified to an X/Y model as expressed here, v1 above and v2 refinement in the motion study below.

NOTE: These are not literal UI animations. They are meant to express the model. Actual UI animations are lighter and more suggestive of the model rather than full page/screen moves. As in the motion study below.

v3 Motion based on X/Y mental model. (visual x paula moody)

v3 Motion based on X/Y mental model. (visual x paula moody)

v3 Motion in mobile. (visual x paula moody)


Wires, in a mobile context.

More drawing and conversation about what is and isn’t important for the user.

Prototyping Try creating an assignment with my prototype here:

Moving from a mobile to modal/desktop context, I iterated with the goal of distilling the creation of an assignment down to its basic parts, all on the first screen.

Then I made other, user requested and valuable options tucked away in moving panels, but easily accessible.

Immersive thinking An exploration to engage students in choosing their own path through learning. It asks the question, “Will letting students set their own course build life long learners?” This experiment yeilded good data about what attracts students to technology and what keeps them coming back. (co-creator/dev x kevin wiggen) Interaction Experiment
"Content as Navigation"
Can we use the content itself to replace scrollbars and other navigation elements? In the example below, I'm suggesting the larger, detailed elements in the center column are connected/related to the medium sized, summary elements in the left column and the smaller, category level elements on the right. This experiment has inspired a ton of fantastic conversations and resulted in my first "solo patent."