This week we launched the Lab of Things [LoT]. Watch the overview video to learn what LoT is; it’s easier than me trying to explain it in words here. http://www.lab-of-things.com/
I designed scenarios and UX for LoT; built with HTML5/CSS3/JS as the [loose] framework for all the core pages and apps.
The goal was to make the system web friendly, to render well in browsers ranging from large monitors to smartphones; regardless of operating system. In some cases this was straightforward to accomplish because the elements that needed to be displayed on a web page flowed well in a row/column layout [these are the basis for a responsive design, along with breakpoints for different viewports]. But, there were other cases where a form didn’t fit well into the page flow and had to be adjusted into unnatural dimensions.
The screenshot to your left is the Home Dashboard rendering in Windows Phone 8 Internet Explorer 10.
There was also authentication workflow to account for; which meant redirects to pages where I didn’t have any control of the layout but had to make sure users could get back to a previous page in the desired layout [say for smartphone browsers]. This worked better than I expected because the authentication pages at least honored viewport settings to stay true to the browser’s width and height.
Finally there was integration of real-time media to design for, live camera feeds as an example. The viewing experience has to be good to benefit from having a live feed in the first place. Care was taken to maximize the camera ‘window’ while not overloading the browser with too many elements to render in a small viewport [for example].
In the end it was a fun project to work on especially because of the collaborative energy of the team. Kudos to Microsoft researchers A.J. Brush and Ratul Majahan for creating this team culture and leading it like a startup.
Check http://www.lab-of-things/ for updates on the project. I’ll post more screenshots here as we bring new apps and experiences online.