Microsoft user experience designer assessment

Although I was not selected for the User Experience Designer position at Microsoft Dublin – they explained they were going with a local candidate who did not require a work permit (what happened to globalization?), I still have the greatest respect for the company and stand very firmly behind my design solution to their exercise, which I absolutely LOVED doing (big challenge + time crunch + competition = an EngSci/rower’s dream).

WARNING: DO NOT read if you’re doing the same assessment.

The Task:

Design a ‘date range selection control,’ which allows a user to select the start and end dates of a range. Design look and function. Must be simple and intuitive enough to be understood and used without training, in a variety of given user scenarios.

The User:

CEO of a small business


3 hrs (sounds like a lot, but just try it)

Review & Ideation:

Mostly paper sketching for problem review, brainstorming, competitive analysis/environment scan, e.g.:

initial review/analysis

initial review/analysis (sample draft page)



Proposed Solution:

wireframe for soCal date range control

concept for date range control (sample wireframe)

The date range selection control consists of three main areas:

  1. Headline
  2. Calendar header
  3. Calendar body


1. The headline area contains a main element that indicates the current selection (e.g., “August 2009” or “June 24, 2006 – May 3, 2008”). This updates dynamically to match the selection. To the left and right of this element are two clickable buttons (previous and next) to shift this range back or forward, respectively. These update dynamically to match the selection and are only clickable (not greyed-out) when the range is a D, W, M or Y.

2. The calendar header displays the four date-based variables in the control: Year, Month, Day and Week. The calendar is organized in columns according to these variables, 1 variable/column. Above these text headers are buttons to select the current D/W/M/Y. Active buttons are highlighted in blue/other highlight colour. To the left of this area are brief instructions for the user on how this header works, e.g., “To select the current D/W/M/Y, or Year-to-Date, click the button in the area to the right.”

3. The calendar body is organized as shown by the calendar header (i.e. Y leftmost column, then M, etc.). The user can click any element within this control (e.g. Y/M/W as suggested by the boxing, or an individual D, or a range of days). Selections are highlighted in blue (or other highlight colour) in all the appropriate columns (from the lowest level to the highest applicable level). To the left of this area are brief instructions on how the calendar body works.


  • Faster selection of date ranges across multiple scenarios (I would expect; untested)
  • Unique, fresh look and structure: most calendar-type interfaces have months arranged horizontally (like a physical calendar), not vertically all in one column
  • Intuitive interface that aligns with user’s existing mental model of calendars (main artefact for dates)
  • Simple to use


  • Maximum of 2 clicks to achieve any of the given user scenarios
  • 1-click buttons for commonly used scenarios (YTD; current D/M/W/Y; prev/next)
  • Excellent spatial segregation of data variables (D/W/M/Y) into columns/dimensions, better than traditional calendars
  • Reasonable screen space
  • Fully clickable calendar body

Comparing with, e.g., Google Analytics, occupies more screen space but offers more intuitive organization in the 4-column/variable layout.



Looking to introduce some storyboards at work. Some interesting examples from Bing/Google image search:

Star Wars boards - great scene.

Star Wars boards - great scene.


one more for good measure

board for web

board for web

use of avatars

use of avatars

higher fidelity

higher fidelity

web with less story, more screen

web with less story, more screen

Randy Pausch

While in SD picked up a copy of “The Last Lecture” by Prof. Randy Pausch.


The Last Lecture by Randy Pausch

Amazing man and life (and book). I hadn’t heard anything about the book or actual lecture beforehand (surprising, I think it was because I was in Japan during the time). I purchased it based on the cover text and especially because it was by an HCI prof. Coincidentally it was also on top of my friend’s speaker system in his house, where I was staying. Weird.

Anyway I haven’t yet watched the lecture, as waiting for the awkward book-to-film-adaptation-like feeling to pass (even though the video/actual lecture came first), but will and I’m sure it will be as inspiring as the book.

Numbers Don’t Lie

Several years ago I saw Al Gore’s An Inconvenient Truth with my father, an environmental scientist, and my mother, an accounts receivable. Before our very eyes Gore – with his film-worthy charisma and spotless suit – transformed our view of a topic previously brushed off as hippie into a genuine, critical and imminent threat. Even my father, who is well educated in the field despite not working specifically on climate change – was surprised by much of Gore’s claims.

Among the uses of a portable lift

Among the uses of a portable lift

Gore didn’t do it by himself. For one, he had his cinematic slide deck, with pictures so stunning and animations so sexy they made PowerPoint look like grandma in a rocking chair (sorry grandma). More than that, he had numbers on his side, numbers that were hard, solid facts; numbers that were indisputable.

Or were they?

A year ago after having taken a course on Knowledge Media Design at university and going through some of Tufte’s (brilliant) work, the more I thought about the presentation the more I was struck by the hand-waviness of the data. First, half his charts had no axes – or if they did, they gave no idea of the scale, had barely legible numbers, or were zoomed in or animated so quickly that you had no idea whether the distance from the bottom of the graph to the top was 1 unit, 100 units or 10 000 units (and if there were any skews). That makes a difference. Every graph when zoomed in enough will look like there are enormous rises and falls. It’s like a microscope – take a surface you think is flat, like a piece of paper, then zoom in enough and it looks like there are huge peaks and valleys.

The adage is that numbers don’t lie. Scientists, politicians, doctors, writers, artists use them all the time to convince people of things. Well maybe, but they sure as hell can do some serious fibbing.

Once in statistics class we did some critical analysis of the statistics in scientific papers and found very surprising assumptions, overlookings and even errors – like using the wrong type of statistical test for the type of experiment conducted. More than that, the professor discussed how the entire paradigm of statistical testing is flawed – and how you can obtain a “statistical significance” (the holy grail of stats, what every grad student prays they get in their experiment) simply by taking more samples. (Okay, not flawed per se, more like “limited”.)

On news we see it all the time – stats about everything from internet use to how to have hot sex. But at least in newspapers there’s some context or source given, and (rarely) things like number of subjects, background of subjects and actual details of the study. With today’s headline/140-char economy, it’s tough to get even that. twitter is infamous for giving people the bare headlines – it’s quick and convenient but has no depth, and with depth comes credibility. I suppose the argument there is that it’s real-time, and has links to details from reputable sources. Fair enough. twitter definitely has its uses. Still every once in a while I have an intense desire to pick up a copy of the New York Times to make me feel smart again.