I created a new mobile user experience for the BT Virtual Showcase to coninside with a new desktop version. The existing mobile experience suffered greatly, the overall size was to great, not optimised for mobile in addition to a complex information architecture.
The Wireframes
Wireframes were created to support major changes to the content stucture. However, I iterated past these into protype very quickly.
The Prototypes
As I had already created the mobile design guidelines, I was able to jump straight into a rapid prototoype, observe and learn cycle using Axure to produce the interactive prototypes.
The ability to quickly navigate and find video content was critical. The old site took up to 4 "taps". I was able to reduce this to 3 "taps". Above are some of the navigational options which were tested.
Alot of testing was performed around how to open and close menus. Many variants were created and tested before coming up with a winning navigational design.
Using interactive prototypes meant I could get an "as-real" application into the hands of users quicker, getting feedback faster, reducing the feedback loop.
The final design
I coded up the final solution using HTML5 templates which were given to a development team to integrate into their existing CMS backend. I delivered the style guide, wireframes, semantic code design and the final HTML5 templates.
Links and Resources
1. The live website - http://www.virtualshowcase.bt.com
2. The HTML5 coded template - http://gsmobile.tiddlyspace.com/layout-virtualshowcase
3. The Axure Wireframes - http://virtualshowcase.ux.osmosoft.com
4. The Axure Prototype - http://virtualshowcase.ux.osmosoft.com/prototype.html
