case study: Native Extensions for Microsoft Silverlight
Wireframing
Once the requirements have been specified, low-fidelity wireframes are made to demonstrate and refine the user journey throughout the applications.
Graphic Design
Graphic artwork and illustrations are produced by UI Centric’s graphic design team. Animations and interactions for the Children’s Story book were then made in Microsoft Expression Blend.
Development
Using an Agile methodology, UI Centric’s developers engineer the applications based on the agreed wireframes and graphics.
UI Centric was engaged by Microsoft to help produce a series of APIs and demo applications to enhance and showcase the already brilliant Silverlight web platform.
The NESL (Native Extensions for Microsoft Silverlight) brief covered 5 extensions to the existing Silverlight framework; local video encoding, portable device integration, speech recognition, text-to-speech, taskbar integration and sensor input. As well as the APIs, UI Centric were tasked to design and develop showcase Silverlight applications incorporating these new features.
Beginning the Process
During the initial stages of the project we worked closely with Microsoft to develop initial ideas and concepts that would best demonstrate and showcase the APIs. UI Centric proposed numerous scenarios and ideas that were eventually shortlisted to two separate applications. Proof of concepts were created to ensure key functionality was possible on the hardware available before design and development began.
Design and Development Process
Having detailed the specification and requirements, the design and development of both applications followed the same path. User journey and flows were story-boarded and worked up into low fidelity wireframes.
Highly polished production graphics and illustrations were then produced and married with the custom code which was concurrently in development. Always being mind-full of the often limited end user system hardware, UI Centric's developers optimised the end product to run well on even the most minimally specified setups.
Throughout the design and development process, UI Centric held weekly Livemeeting video conferences with Microsoft to ensure the project was constantly being steered in the right direction and weekly progress target were being met or exceeded.
Adopting an Agile development methodology meant the project could adjust and change direction mid-stream with minimal impact on the timeframe available.
Video Travel Journal
The Video Travel Journal was designed and developed to showcase, amongst other functionality, the local video encoding, Windows Portable Devices and taskbar integration, seamlessly in one browser based or desktop application
The premise was to allow users to record their travels as a ‘video diary’ on any device equipped with a webcam, while saving the video in real-time to the local disc. Additional features such as on-screen pen annotations, ability to add titles and text to the video and Bing maps integration, all rendered in real-time, meant each video can be truly customised to be unique to the user. Finished videos can be uploaded to any Facebook account directly from the application. Window Portable Devices integration means photos stored on external cameras and other portable devices can be inserted onto the webcam footage.
The user interface was optimised to work on tablet devices, where screen space is at a premium and easy to use and navigate touch control is essential.
Where’s Teddy
The richly interactive children’s book ‘Where’s Teddy’ featured text to speech, speech recognition and sensor board input to create a fun, yet technically innovative experience for children and parents, again both in-browser and as a stand-alone Silverlight application.
The story is read out aloud using the text to speech API, with voice commands registered using the speech recognition API. Combined with the sensor board integration (light sensor and accelerometer) this made for a truly immersive and interactive experience, where the path of the story is determined by the user input and can be different every time the book is “read”.
High quality illustrations and cross platform compatibility meant the end product could be enjoyed by the widest possible audience, both young and old.
More information about the Microsoft NESL project can be found on the MSDN Code Gallery