Prototyping Showcase
Samsung TV Plus
TL;DR – just watch the video above.
In my recent contract with Samsung, I was the dedicated ProtoPie prototyper for many of Samsung's TV products, including Samsung TV Plus, Tizen OS system UI, and Samsung Gaming Hub. Most of my work featured future concepts and thus are protected under NDA, however for TV Plus projects I also prodcued a baseline prototype - a representation of the in-market product included with all modern Samsung TVs.
Why prototype the in-market service?
This prototype is instrumental for user testing studies. This allows all new feature concepts to be directly compared against the service as it current exists. The advantage of using a prototype instead of the actual in-market product is that the experience can be controlled. Both the baseline and concept prototypes can feature the exact same content, and will be subject to the exact same limitations that all prototypes inevitably have, no matter how functional they are. The differences between the baseline and the concept will ONLY be the new designs to be tested, eliminating all distracting elements that might derail the test participant from the task at hand.
Furthermore, The baseline prototype serves as a basis for the concept prototype. This makes rapid prototyping on new concepts possible with a very high level of fidelity. Both the baseline and concept prototypes are very convincing and in the right environment are capable of making the test participanty believe they are interacting with the real thing.
What makes this prototype so special?
This prototype makes extensive use of ProtoPie's most advanced features, and is built modularly in much the same way the real product might be engineered.
The prototype is made up of four independent prototype files that are composed together into a single view using ProtoPie Connect and communicate with each other using ProtoPie's messaging system. Each prototype "layer" is responsible for a key aspect of the experience:
-
System Layer
Responsible for capturing user input and managing global volume control. Additionally, in the case of concept prototypes, this layer managaes any prototype configuration (e.g., to switch between alternate designs of a particular concept, manage particular user flows, etc.). -
Menu Layer
Provides interaction and state maintenance of the left-hand navigation system. -
UI Layer
This is the heart of the prototype and contains all of the app's screens. Typically this is the layer that is modified in order to explore new concepts. -
Video Layer
Responsible for playing video content underneath the UI layer. The video layer is designed such that only one video can ever be playing at a time, and no video gets embedded into the prototype files itself – very efficient for managing file size bloat.
Abstracting content
The prototype behaves very much like a real production app in that all content – imagery, video and data – is hosted by a media server and not embedded into the prototype. This makes the prototype itself a rendering engine, and its content can be adjusted WITHOUT modifying the prototype files themselves. Since no media – especially video cotent – is embedded directly into the prototype, the files don't bloat to unmanageable sizes, and the prototype performs much better as a result.
The video layer in particular benefits the most from this architecture. Only one video can be played at a time, and since the video is playing from a media server, no file size restriction exists. Meaning, the prototype is capable of playing full length content at high quality resolutions (think a 2-hour 4K HDR movie). Additionlly, since the video plays independently in its own prototype file, it is not affected by switching scenes in the UI layer. This makes transitioning, say, from the TV Plus Home screen to full-screen video with no UI perfectly seamless.
Features
The prototype is incredibly feature rich and I've built in many advanced capabilities one would expect from a TV UI:
Data-driven linear channel lineup
A single data file provides the live TV channel lineup for the experience. The prototype supports an unlimited number of channels, and could feasibly reflect the entire 700+ channel lineup of the in-market service.
Spatial navigation focus engine
When browsing around the prototype, focus moves to the nearest element in the direction of navigation. This is most easily seen in any of the grid views in the prototype. Moving up or down from one row to the next results in the focus landing on the nearest tile above or below, rather than on a fixed spot that might be contextually confusing.
Fully data-driven electronic programming guide
This is the "TV Guide" view we are all familiar with on any live TV service. The prototype is capable of generating a grouped list of channels based on the content of a JSON file.
Fully functional video player
The player features full trick-play capabilities include play/pause, restart and multi-speed fast-forward/rewind with a thumbnail preview of the playback point being scrubbed to. Additionally the player supports video bookmarking such that the video content can be resumed from the point it was previously left off.
Data driven program details screen
The program details screen is templated so that ANY content can be featured simply by providing a data file. TV show content additionally includes the capability to list episodes grouped by season.
Multi-modal on-screen keyboard
For user input, the prototype features an on-screen keyboard with multiple views. The keyboard includes a 2-stage shift function where a single tap on the shift key results in the next character being entered in uppercase, after which the view returns to lowercase. Two taps of the shift key enables shift-lock and all subsequent characters will be entered in upper case until shift-lock is cancelled. Special characters are avalable and there are two special charcater layouts to ensure all possible charcaters can be used for user input. The keyboard architecture allows for localising the keyboard in many languages.
Global volume control
The prototype has a global volume control for the entire prototype. This is particularly important for user testing studies, as sometimes the volume of the prototype is too loud and becomes a distraction, while a prototype with no volume at all seems unnatural. This prototype allows for the volume level to be adjusted to the perfect level on an individual basis.
ProtoPie's most advanced features
This prototype takes advantage of the best of what ProtoPie has to offer. It uses ProtoPie Connect to compose multiple prototype files into a single view and it employs ProtoPie's messaging sytem to facilitate communication between each "layer". It is made up almost exclusively of interaction library components. Change the design or (more importantly) the behaviour in the master component and every copy used throughout the prototype is instantly updated. Lastly, ProtoPie Connect's API Plugin is enabled in order to allow the prototype to query the media server for data in real time – making the entire prototype a fully data-driven rendering engine.
A true living room experience
By connecting the computer running the prototype to a TV via HDMI, it is possible to create a truly immersive living room experience. The prototype runs in a web browser which can be set to full-screen view, and it can be controlled with a physical remote control. Combined with the high fidelity nature of the prototype, this creates a very convincing experience, allowing the test participant to become fully immersed in the user study session.
Demo
For many techincal reasons, it's not feasible to provide direct access to the prototype on this site. However get in touch and I would be more than happy to give you a live demo.