Making it shine: How we designed the LightSwitch Touch-Friendly Shell

 

Microsoft just announced LightSwitch, an intriguing addition to Microsoft’s Visual Studio suite of products that allows non-professional programmers to quickly create line of business applications. Microsoft asked the Infragistics User Experience Design and User Interface Implementation Services organization to develop a LightSwitch shell (an interaction and graphic design template.) As the lead user experience architect on the project, I wanted to share the process we followed to create the interaction design of this shell.

When we were asked by Microsoft to develop an innovative touch-friendly shell, we first wanted to get an understanding of who the shell users would be. It was important for us to ground our design ideas in an understanding of users and their tasks to ensure our shell provided an ideal user experience.

Note that LightSwitch shell users are different from users of LightSwitch. These users would be consumers of the applications produced from LightSwitch and cast a wider net of user types: such as administrative assistants tracking information and business executives examining reports. Because there is more variability between these users, we prioritized the business areas and worked to find commonality between the scenarios.

To this end, the User Experience Services team met to outline scenarios and used these them to develop initial concept ideas. We kept the following in mind: a touch-friendly interface that did not look like your standard database application.

I documented these concepts both using high-level wireframes capturing the concept ideas and showed some of the usage scenarios we outlined. When we showed these concepts to Microsoft, they liked the thumbnail navigation concept the best.

 

 

 

Now that an initial concept was chosen, we could move forward with the idea and outline the functionality. The usage scenarios we developed earlier supported the creation of storyboards and detailed wireframes. These storyboards helped us ensure that all interactions were accounted for and served as a good communication tool both internally and with Microsoft.

 

 

The detailed wireframes were iteratively developed with input from the people in Infragistics’ Services in addition to the development team at Microsoft. Once the detailed wireframes were stable, functional specifications were created in conjunction with the wireframes. Here is a final version of the detailed wireframes showing the final solution.

 

The final result was just presented by Microsoft at VSLive! 2010 earlier this week.