UNIFIED USER EXPERIENCE FORTOSHIBA PRODUCTSFlavio Fabiani – July 2010Copyright 2010 Toshiba Corporation. All rights reserved.
BACKGROUNDThe trend towards outsourcing manufacturing to remain price competitive has resulted in OEMs being increasingly reliant on ODMs to determine their final product lineup.Multiple suppliers are used across different products and categories, often with independent business interests and motivations, frequently supplying identical products to a range of competing brands.In order to create more distinctive products with stronger differentiation from competitors, Toshiba DLPS Division are looking to get greater control of product development and create an opportunity for higher user experience consistency across product categories.
PROJECT OBJECTIVESHarmonize the Toshiba user interface to deliver a unified user experience through DLPS product portfolioDesign the Toshiba experiences around a set of reference products, platforms and services that represent key touchpoints and a range of core products in the Toshiba DLPS portfolio. multimedia hard drives Tablets camcordersDevise a digital device experience framework for current and future productsCounter current constraints and quality issues related ODMs user interfaces
MILESTONES OF A RESEARCH-LED USER CENTERED UX DESIGN PROJECT 3 2 1 review existing product ranges clarify technical understand (Camileo, Stro.e TV, Journe Touch) requirements and stakeholder reasoning challenges and expectations review of review of analysis of review of the ethnographic 5 6 7 8 4 relevant significant competitive retail environment study of technologies research already landscape consumers existing delivery of delivery of UI 9 10 services prototypes concepts (products and cloud) validation, feasibility testing of prototypes 10 11 and selection of and concepts prototypes and selected concepts delivery of final design first-line support 12 13 14 UI assets implementation (UI (both on the devices implementators, ODMs, ..) and in the cloud)
VENDOR RATING scores 0= not included in the offer 1= vendor complies partially 2= vendor complies fully weights A= higher importance (weight 1) B= lower importance (weight 0,5)
UNDERSTAND STAKEHOLDER REASONING AND EXPECTATIONSThe partner company should bringing project stakeholders together to share knowledge and understanding of their needs and perspectivesThis phase allows fast-track understanding of the user, the technology, the brand and the business.Moreover is an opportunity to share early thoughts and develop a shared understanding of what success looks like for all involved. deliverable report on expectations of project stakeholders
REVIEW OF RELEVANT TECHNOLOGIESExploration of different technologies enabling engaging interactions between the product and user interface, allowing for unique experiences with the onscreen content while solving imminent issues such as text input, fast-scrolling, zooming and panning in an elegant way. deliverable report on emerging technologies relevant to the project
ETHNOGRAPHIC STUDY OF CONSUMERSUser research is a key part of the design process. Immersing in the user’s world through in-depth observational research enables companies to get the user perspective and gain insights that allows intuition.User research is a powerful tool for identifying unmet needs and innovation opportunities. deliverables 1- user study set up plan 2- multimedia documentation (photos; videos) 3- illustrated user contexts 4- report underlying project opportunities
DELIVERY OF SERVICE CONCEPTSIdeas are generated and visualised in sketch form, creating storyboards to communicate ideas easily, highlighting use-case scenarios, wireframes and look and feel concepts.Creating storyboards helps bring user behaviour to life and ensures concepts deliverables 1- storyboards of service concepts 2- wireframes highlighting use-case scenarios 3- sketches of experience journeys across multiple touch points and devices integrating the cloud and service component
DELIVERY OF UI PROTOTYPESIn this phase will be created all wireframes for each individual screen as well as detailed UI-flows for each of the included applications.Mapping out the overall functionality of the UI and exploring of the most user-friendly way to structure the system demonstrate how the interface should behave to be effectiveIn the UI flow a great focus is set on the navigation and definition of how the user interacts with the GUI. This gives the developers a clear view of the complexity of the applications describedNon-interactive demo animations of core reference task flows could be created as linear sequences to show the steps through the UI.A preferable solution will be prototype applications running smooth on device with the look and feel of a real product. These prototypes have no real connections and use dummy data. deliverables 1- final UI navigation paradigm delivered as an animation or preferably as a dummy application running on the devices on an open platform (Android) 3- wireframes of all applications 4- graphic look and feel rationale, unique expression of the Toshiba brand, considering both functional and emotional aspects of the experience across the core functions (iconography, keyboards, transitions, etc.) 5- user experience strategy video illustrating the experience taskflows across the various touch points in an animated way
VALIDATION, FEASIBILITY AND SELECTION OF PROTOTYPES AND CONCEPTSConcepts and prototypes must be validated with internal stakeholders at various levels of fidelity to give valuable feedback and gain valuable insights that assist in design decision making.Benchmarking design solutions using prototypes and simulations gives the team a valuable opportunity to test designs. deliverable report on feasibility and rationales behind selected concepts and prototypes
TESTING OF PROTOTYPES AND CONCEPTS SELECTEDAfter validating the concepts and the prototypes with internal stakeholders, sessions with end users must be heldWith final prototypes in place, the team visit the end users to test the overall product or service experience.Users feedback must be taken into consideration in the final round of design tweaks and refinements. deliverable user testing outline and summary
DELIVERY OF UI ASSETSFinal assets visual foundation for the implementation are created and organised in pixel-perfect vector bitmaps in layered Illustrator files, and in reference animation and transition files.Along with positions and margins, font sizes and colours are also described. All graphical parts are listed and where they can be located which helps the developersMoreover styleguides will be created to document all aspects of the UI design as a reference agencies and third party implementors. deliverables 1- pixel-perfect vector bitmaps in layered Illustrator files 2- reference animation, effect and transition files in core user scenarios in quicktime format 3- PDFs of styleguides
DESIGN IMPLEMENTATIONValidated and tested concepts and prototypes are coded into the device OSs and in the interconnected cloud services following the UI assets productedUser implementators and ODMs will together with the design strategists to translate the user experience strategy on all relevant user touchpoints deliverables 1- fully functional customised GUI applications working on selected devices 2- web-based distributed applications supporting the service concept around the product ecosystem
TATreference materialCopyright 2010 Toshiba Corporation. All rights reserved.
TAT COMPANY PROFILEFounded in Sweden 2002 160 employeesPresence Offices in Korea, Sweden and USA Partner in JapanProven technology Installed base >400 million devices worldwide (end Q1-10) This year >10% of all mobile phones This year in more than 20% of all touch phones Included in over 200 different device modelsLong track-record within Uis Been in the UI Business since the first color display Experience from more than 1000 UI projects, from concept to implementation of entire UI
TAT CLIENTSSamsungSony EricssonVodafoneGoogleOrangeSpotifyVolvoMotorola
TAT OFFER - PRODUCTSTAT Cascades is a UI framework for the production of advanced user interfaces. TAT Cascades makes it possible to quickly and easily create and customize unique user interfaces with unmatched graphical capabilities, giving consumers a richer and more dynamic experience. Traditional UI frameworks do not allow creation or modification of the user interface without having a major impact on the UI software. This results in long development times, limited creativity, and a lower user experience quality. TAT Cascades utilizes a design principle that separates the application logic from its appearance. Combined with a declarative programming model that reduces both the amount and the complexity of code, TAT Cascades offers a range of UI controls (such as menu, form and button) and mechanisms for creating the best possible user experience in shorter development times.TAT Motion Lab is the PC development environment and visual UI development tool for TAT Cascades that speeds up the process of crafting rich user interfaces, with export for Android is built in.
TAT OFFER - SERVICES with TAT services the company is offering complete UI design projects from start to final implementation. DesignConcept TAT invent and explore new UI concepts using different methods such as metaphors, storyboards and personas. Interaction Design All concepts that contain any sort of interaction also require Interaction Design to ensure a great user experience. Typically this evolves new navigation paradigms, usability aspects and making sure the solution is consistent and fit into its TAT offers its expertise of creating UI-flows, wireframes and guidelines which explain why and how functions and information are sorted and presented in a certain way. Graphical Design TAT can create a complete new style or base graphical designs on existing brand guidelines and take it to the next generation and level. TAT delivers mood boards, sketches, high quality illustrations as well as design screens and graphical components such as icon. Prototyping TAT deliver applications running on device with the look and feel of a real product. The prototype is built with TAT Cascades technology which is fast, flexible and reliable.
REFERENCE – ORANGE (2007)Creating a new visual style for Orange’s mobile range
REFERENCE – GOOGLE G1 (2008)Complete UI design for the G1 phone for GoogleSetting overall concept with look&feel of the UI as well as interaction design and graphical design of all applicationsDesign of new and unique UI-features giving G1 the wow-factor
REFERENCE – PROJECTO UI (2008 - CONCEPT)Projecto UI is a futuristic concept video of mobile devices that combine pico projectors and cameras to enable large UIs that can be controlled with gestures. click on pictures to launch video demo
REFERENCE – 3D EYE TRACKING UI (2009 - CONCEPT)The concept, that lets you see behind on-screen objects, gives traditionally flat interface elements a very convincing sense of depth and layering,It relies on eye tracking and TATs in-house 3D engine, which renders in real time in the video. click on pictures to launch video demo
REFERENCE – FOLDOUT PHISYCS UI (2009)This 3D demo was developed by TAT for Mobile World Congress 2009 in cooperation with Texas Instruments. Foldout UI is a Cascades implementation on the Texas Instruments OMAP3430 platform, using Open GL|ES 2.0 and hardware acceleration.The demo shows a unique utilization of 3D in combination with touch input. It challenges traditional UI paradigms with its flip-through navigation and foldout design. Realistic materials, physics, shaders and other effects give a real-life experience to the GUI. click on pictures to launch video demo
REFERENCE – FUSE UI (2009)TAT powers the Fuse UI, which pushes the limits for 3D and Open GLES 2.0 beyond what has previously been experienced in mobile.Fuse features a combination of multiple new sensor inputs, creating a very responsive UI.A collaborative concept of the next mobile device by Synaptics, The Alloy, Immersion, Texas Instruments and TAT. click on pictures to launch video demo
REFERENCE – SPINACH UI (2010)Spinach is a TAT Cascades powered demo UI, developed for ARM Mali-200 GPU based hardware with Android OSAll contacts and communication applications can be accessed from one place.It features hardware accelerated 3D geometry with seamless navigation between applications in the foreground and widgets in the background click on pictures to launch video demo
REFERENCE – HOME SCREEN REPLACEMENT FOR ANDROID OS (2010)TAT Home is a gesture-powered 3D Home screen for Android that marries advanced UI technology with astonishing design.With simple gestures the user can perform everyday tasks - such as, Contacts, Messaging, Music and Weather without leaving the Home screen.In addition to standard Android Widgets, TAT Home supports unique widgets with 3D-graphics and innovative interaction methods click on pictures to launch video demo
FJORDreference materialCopyright 2010 Toshiba Corporation. All rights reserved.
FJORD COMPANY PROFILEFjord a strategic design company therefore its main competitors are Frog, Ideo, Smart DesignFjord applies design techniques to solve complex business, service, and interface problems.Services fall into the following three broad categoriesService strategy Service concept Interface designWhen undertaking strategy work, our goals The service concept is the tangible During the interface design Fjord makes sure theare: representation of the service. The results solution is easy to use, and looks and feels elegant. from conception work are: The results from undertaking the interface design- The service proposition is clear and well work arearticulated - The driving ideas are well defined- User, market, and technology drivers are - Service interfaces and integration - The interaction and information flow is agreed anddefined points are agreed documented- Stakeholders within the client organisation - Usage drivers are defined for key - The visual design of all interfaces is agreed andare aligned with the strategy of the project stages of service use: documented- The project team understands the discovery, trial, registration, reuse, upgra - End users have validated the service concept andstrategy, the brand, and user drivers, as well de tested the usability of the interfacesas key industry and technology trends - Implementation roadmap includes key - The technical team has the information and assets service features, prioritised for releases needed to implement the solutionThe key deliverable from this work is a over timeservice strategy. The format of the deliverable The key deliverable from this phase is the detailedis usually a presentation, but the core The key deliverable from this phase is a design solution for all interfaces. The deliverablepresentation can be accompanied with a service concept. The format of the formats range from use case documentation and flowproposition poster, a movie that brings the deliverable is usually a presentation. It diagrams to interaction and visualcore promise to life, a competitive might be accompanied by a demo or specifications, graphical assets, motionbenchmarking study, etc. movie of core experiences. There can guidelines, and practical collaboration with
REFERENCE – BBC Iplayer (2008)Fjord has been closely involved with BBC iPlayer since its inception. In 2008, helped the BBC extend the concept to the mobile platform. 10% of all Internet traffic in the UK is through this service.Fjord identified the capabilities of the targeted mobile devices and after some technical experimentation created a design that is both natively mobile and recognisably a website.
REFERENCE – NOKIA OVI (ONGOING)Fjord is working closely with Nokia to innovate and shape some of the most important OVI services, notably OVI Contacts, OVI Maps and OVI MusicFjord provided visioning, conception and design as well as user interface specification services
REFERENCE – SKYPE MOBILE (2005-2007)Since 2005 Fjord has collaborated closely with Skype to innovate and bring to market new mobile solutions.Fjord has driven the concept and design since 2007 and is still involved in the end-to-end implementation
REFERENCE – Yahoo! Go 2.0 (2005-2008)Since 2005 Fjord has collaborated closely with Yahoo to innovate and bring to market new mobile solutions.Yahoo! Go 2.0, which launched in early 2007, has been widely recognized as an industry benchmark for excellent mobile user experience and Yahoo!Go 3.0, launched in early 2008, moved that benchmark again.Fjord has driven the concept and design from 2007 and is still involved in the end-to-end final implementation
NATIVEreference materialCopyright 2010 Toshiba Corporation. All rights reserved.
NATIVE’S CLIENTSHP (USA, Spain)Microsoft (USA)Audi (Germany)Bentley (UK)Orange (France, UK)Motorola (USA, UK, Israel)Samsung (South Korea)Texas Instruments (USA)TomTom (Netherlands)Japanese client experience includes brand leaders such as Panasonic, Epson and Toyota Lexus, as well as Toshiba Japan.
INTEGRATED DESIGN PROCESSNative prides itself on its ability to translate strategic design into tangible, beautifully conceived and executed solutions.Research, validation and strategy are the foundation of this integrated design process.
NATIVE’S CONCEPTTo tie the products closer together and create a unified experience, seamless access to content and services needs to be present on all the devices.The personal content and service layer provides an umbrella experience for access of content consistently applied to all the products touch points
REFERENCE– HP MediaRack (2005)Native created a series of visionary product experience concepts to help HP with to become a major player in the entertainment space through an ecosystem of seamlessly connected products.Designed in 2005 and preceding Apple’s Cover Flow, Natives concept of the MediaRack took a radical approach to interaction design, anticipating a shift to iconic, more content-centric interactions using proximity and multi-touch input for a richer and more engaging experience.
REFERENCE - HALO MULTIPOINT USER INTERFACE (2007)Interaction design and end-to-end implementation for HP and DreamWorks’ super-high-end enterprise telepresence service.The interface is designed to allow up to 16 users in up to 4 locations to conduct a meeting which looks, sounds and feels like they are all in the same room, thanks to eyeline cameras, perfectly synced video, directional audio and an extremely intuitive user interface.Native led the design program from concept to implementation, including carrying out user research, defining the brand language and look and feel, developing and refining concepts, creating interactive digital prototypes, coding the software and running user tests
REFERENCE – HP Q-CONTROL REMOTE & NAVIGATION (2008)HP commissioned Native to create a design strategy to harmonise the interaction model for their family of remote controls for TVs, Media Hubs and Digital Projectors. The result was the Q-control navigation method, a radical simplification and alignment of interactions which was later adopted as a standard across HP and rolled out over a wide range of HP product categories from TV remotes to printers and digital cameras.Native explored a wide variety of technologies, controls and interaction methods to identify the most suitable for HP’s entertainment products. International user studies gave insights that led to innovation to success. The Q-control navigation is now widely adopted across HP’s broad range of products. Applying the Q-Control interaction method consistently across its product portfolio saved HP $16M in software and hardware development.
REFERENCE – HP PhotoSmart PREMIUM PRINTER UI (2009)Native has been working with Hewlett Packard to create a user interface strategy for their connected appliance printers. We have designed the product user interface to seamlessly accommodate the integration of connected apps.In addition, Native redefined the look and feel and provided guidance on the scalability and translation of the experience into additional touchpoints such as the community-driven web portal.
REFERENCE - AUDI NEXT-GENERATION MMI.Native worked closely with the Audi interior design team in Germany to design and execute the next-generation MMI. Launched in the 2010 A8, the challenge was to create a versatile core UI framework operating on a central technology platform which would work with all modelsIn the final phases of the project, members of the Native UI team based themselves on-site, working with the Audi in-house and third party development teams to prototype and program the UI and behaviours for in-car validation and implementation.
REFERENCE - TOMTOM CROSS-PLATFORM UI DESIGNNative has recently redesigned Tomtom’s user interface experience, both improving usability and giving the UI a fresh and rebranded look and feel. In addition, we have introduced rich animation behaviours and gestural interactions.Native is working with Tomtom on their web-portal experience, integrating powerful route planning tools as well as social features, creating a truly consistent experience across product and online interactions.
BACKUP SLIDESCopyright 2010 Toshiba Corporation. All rights reserved.
VENDOR CHART weight FJORD TAT NATIVEdeliverable €222K €550K (cascades) €431K + €80K (services)review existing product ranges B 2 1 2clarify technical requirements and challenges A 1 2 2understand stakeholder reasoning and expectations A 2 1 2review of relevant technologies A 1 2 2review of significant research already existing A 2 2 1analysis of competitive landscape A 2 1 1review of the retail environment B 0 0 2ethnographic study of consumers B 2 0 1delivery of services concepts A 2 0 1delivery of UI prototypes (products and cloud) A 1 1 2 (just on device)validation, feasibility and selection of prototypes and concepts A 2 2 2testing of prototypes and concepts selected A 2 2 2delivery of final UI assets A 1 2 2design implementation (both on the devices and in the cloud) A 0 0 0first-line support of Toshiba’s contractors (UI implementators, ODMs, ..) B 0 2 0index performance 18 15,5 20,5
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.