![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/e0bfed57-e4ae-41dd-8b6d-bda371a2e5f3_rw_1920.jpg?h=4e48bf1452019d35828c48f9b00555b1)
tl;dr
I led a small design team to develop native support for the Surface Dial, an innovative input device designed to complement a growing lineup of products set-out to abolish the boring keyboard in favour of new multi-touch input technologies.
To complement the unique workflows of CorelDRAW, our design solution was built around an innovative use of the Dial device, and a never-before-seen user customizable Dial on-screen UI.
Worked in partnership with the Microsoft’s Surface design team, in preparation for 2017 Microsoft product launch.
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/c2abe924-511f-41c8-8c30-7c423915fa5e_rw_1200.gif?h=1be329e686c69816bd81bd5fdfc275aa)
Design pillars
Assumption: CorelDRAW apps are made incredibly modular and customizable. Our users expect every aspect of our software to adapt to their unique workflows.
Solution: The Dial UI features a dynamic "tool panel" allowing the user to choose which tools they'd like to have on hand. The user can enter the Windows Tablet mode - hiding most of the app UI - and continue working using a stylus and the Dial menu alone.
Assumption:
- While using a stylus on screen, the user's non-dominant hand is largely passive and keyboard input is cumbersome.
- The Dial features a physical button and standard Dial UI relies on tap-and-turn action to dig through endless menus. We found this iPod-like behavior tedious and unintuitive.
- The Dial is large device. The screen real estate is very valuable.
- The Dial can be slippery and best used when held in hand.
Solution:
- We wanted the non-dominant hand to behave similar to an artist's palette. Once the user places the Dial on screen the UI blooms into action; no need to press any buttons. When it is not needed, the UI disappears the moment the user lifts the device.
- Most Dial interaction is handled by the dominant hand (stylus or touch) while the non-dominant hand handles the Dial itself. We found this combination to be most natural; like working with brush and palette.
Assumption: One can only make about 3/4 of a rotation while in a single fluid motion.
Solution: We reserved the scrolling motion to finite value only, where max and min values could be comfortably reached in a single spin.
The blueprint
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/5dccab06-4bd8-4cf5-a110-b540e43a485d_rw_3840.png?h=6ef98223ea77858df7a406a2f4d0cd0f)
Concepts
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/59d257be-9696-47da-a7b4-57b7376c58fe_rw_3840.png?h=e5079e7f26d94d7c60d4da9039691340)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/98cd41df-6175-4821-b67e-4785ff45b1f1_rw_3840.png?h=8b20f77a016394948b713342f25fce7d)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/90ef0c98-bcf6-4972-9bc6-0b4cfe323c35_rw_3840.png?h=3bf466123f0e82aa1cfa62348bb42027)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/d3a84df9-3535-4225-8eaa-a39e2108e87e_rw_3840.png?h=b170d06dc6b7d73ba808ba075068aa81)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/c346784c-7f1c-4138-b1e2-3225979f191b_rw_3840.png?h=d27eaee27444225653b6bc01d0d02294)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/77e627b6-3f00-4202-a479-896dbb91c088_rw_3840.png?h=e9704df36f43fca16ebba99cc76f3d3e)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/abbdfd84-d187-443d-9e3b-3f41d4e54a75_rw_3840.png?h=e16e7f77c7bcbd784cb293facc17c74a)
Mock-ups
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/140c9bb2-7331-4a88-b442-c5def540803f_rw_1920.png?h=0c1be1a0be93fab04a4674bb02543b92)
![](https://cdn.myportfolio.com/02ca7d34030e68be53bb8482e806ce3c/0a1f19a1-dea1-401a-a6a2-759a5c8c74d4_rw_1920.png?h=1752b92d59141392585bcf4b1d4256df)
Media release