Océ Product Demonstration Tool

Improved design for Océ product demonstration tool (app)

Art DirectionInteraction DesignUI/UX
The Océ product demonstration tool is designed to be used as a promotional- as well as an informative tool for customers, resellers and our own sales force. It encompasses all marketing assets created for a specific product launch. In this case, we’re showcasing the Océ ColorWave 650, part of the Océ CrystalPoint series. 

This new design approach is meant to create a more fluent experience and sheds the need for complex UI structures. The graphic design is as minimalistic as possible while keeping the Canon feel. Ensuring all Canon regions globaly can adapt and deploy easily.
The Océ product demonstration tool will be released on Apple iOS, Google Android and as stand alone Adobe Air download.
Splash screen
Level 1: Océ product with tagline, main navigation and number interface.
In the 1st level the user is able to explore the product in 3D space (360 rotate) and tab the number buttons to go to the 2nd level. The “Quick Access” button also goes to the 2nd level. “Optionals” and “Extras” go to a different level.

The number buttons correspond to Océ training material that our resellers and salesforce use to get acquainted with our products.
Level 2: Number titles
In the 2nd level the numbers and their corresponding titles are displayed on the left of the screen. The Océ product is still able to be rotated in 3D space and the number buttons highlight a title. 
When tapping a number title the interface goes to the 3rd level. When going from level 1 to level 2. The complete interface shifts from right to left hiding the main navigation and unveiling the number titles. 
Level 3: Description
In the 3rd level the description corresponding to the number title is displayed on the left with the option to play a video with the “Play Video” button. This is the last level of the interface that corresponds with the number buttons.

When going from level 2 to level 3. The complete interface shifts from right to left centring the number titles and partly hiding the Océ product focusing the user to reading the descriptive text.
The video page is the place where the user can play/pause video content associated with the number descriptions. Text on display is preferably the same as the actor/ voice-over script.
The page has a back button although this is technically the 4th level. The interface shifts from right to left and stops here. Not showing the Océ product, the number titles or descriptions anymore. The interface fully focuses on video and video controls. The controls are minimalistic. A scrubber and a full screen option. Volume controls are available in Windows or on the device itself.
This is the only level with a “Back” button that also acts as a stop button for the video content. When the user tabs “Back”, the interface shifts from left to right to level 3.
The “Optionals” page displays the various options that are available for Océ products. In this case The Océ ColorWave 650 has several folding, stacking and scanning options. Also, a footprint options shows the dimensions of the products and how much floor space they need.

The optionals can be added or subtracted by using the radio buttons. The “Extras” option in the main menu displays the various extras available in the app. Such as animations, the full video. Language settings etc. This part of the interface will most likely resemble this design.
Shifting levels
The interface works with different levels that are essentially always available through horizontal scrolling. All areas that do not have a unique interaction are able to scroll. The user is free to use the buttons (numbers and main) or simply scroll left to right. The number titles and descriptions have their own scrolable area that allows the user to scroll vertically. Unveiling more information if available. This area should be scrollable even if there is no more information available.
© 2014 Océ. Illustrations and specifications do not necessarily apply to products and services offered in each local market. 

Technical specifications are subject to change without prior notice. All other trademarks are the property of their respective owners. 

You may also like

RUIS festival 2015
Poster Project 02
Pakhuis Venlo
Digital Portfolio
Low Hangin' Fruit
Picture It
"Stronger Together"
Back to Top