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.
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.
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.:
The date range selection control consists of three main areas:
- Calendar header
- 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.