Unified user experience for toshiba products

Copyright 2010 Toshiba Corporation. All rights reserved.

UNIFIED USER EXPERIENCE FOR TOSHIBA PRODUCTSFlavio Fabiani – July 2010

BACKGROUND

The 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 OBJECTIVES

Harmonize the Toshiba user interface to deliver a unified user experience through DLPS product portfolio

Design 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 camcorders

Devise a digital device experience framework for current and future products Counter current constraints and quality issues related ODMs user interfaces

MILESTONES OF A RESEARCH-LED USER CENTERED UX DESIGN PROJECT

1 review existing product ranges(Camileo, Stro.e TV, Journe Touch)

2 clarify technical requirements and challenges

3 understand stakeholder reasoning and expectations

4 review of relevant technologies

6 analysis of competitive landscape

5 review of significant research already existing

7 review of the retail environment

8 ethnographic study of consumers

9 delivery of services concepts

10 delivery of UI prototypes (products and cloud)

10 validation, feasibility and selection of prototypes and concepts

11 testing of prototypes and concepts selected

12 delivery of final UI assets 13 design

implementation (both on the devices and in the cloud)

14 first-line support (UI implementators, ODMs, ..)

VENDOR RATING

scores0= not included in the offer1= vendor complies partially2= vendor complies fully

weightsA= higher importance (weight 1)B= lower importance (weight 0,5)

UNDERSTAND STAKEHOLDER REASONING AND EXPECTATIONS The partner company should bringing project stakeholders together to share

knowledge and understanding of their needs and perspectives This 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.

report on expectations of project stakeholders

deliverable

REVIEW OF RELEVANT TECHNOLOGIES Exploration 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.

report on emerging technologies relevant to the project

deliverable

ETHNOGRAPHIC STUDY OF CONSUMERS User 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.

1- user study set up plan

2- multimedia documentation (photos; videos)

3- illustrated user contexts

4- report underlying project opportunities

deliverables

DELIVERY OF SERVICE CONCEPTS Ideas 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

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

deliverables

DELIVERY OF UI PROTOTYPES In 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 effective In 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 described Non-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.

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

deliverables

VALIDATION, FEASIBILITY AND SELECTION OF PROTOTYPES AND CONCEPTS Concepts 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.

report on feasibility and rationales behind selected concepts and prototypes

deliverable

TESTING OF PROTOTYPES AND CONCEPTS SELECTED After validating the concepts and the prototypes with internal stakeholders, sessions

with end users must be held With 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.

user testing outline and summary

deliverable

DELIVERY OF UI ASSETS Final 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 developers Moreover styleguides will be created to document all aspects of the UI design as a reference

agencies and third party implementors.

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

deliverables

DESIGN IMPLEMENTATION Validated and tested concepts and prototypes are coded into the device OSs and in

the interconnected cloud services following the UI assets producted User implementators and ODMs will together with the design strategists to translate

the user experience strategy on all relevant user touchpoints

1- fully functional customised GUI applications working on selected devices

2- web-based distributed applications supporting the service concept around the product ecosystem

deliverables


TATreference material

TAT COMPANY PROFILE Founded in Sweden 2002

160 employees Presence

Offices in Korea, Sweden and USA Partner in Japan

Proven 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 models

Long 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 CLIENTS Samsung Sony Ericsson Vodafone Google Orange Spotify Volvo Motorola

TAT OFFER - PRODUCTS TAT 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 Google Setting overall concept with look&feel of the UI as well as interaction design and

graphical design of all applications Design 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 TAT's in-house 3D engine, which renders in real time in

the video.


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.


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.


REFERENCE – SPINACH UI (2010) Spinach is a TAT Cascades powered demo UI, developed for ARM Mali-200 GPU

based hardware with Android OS All 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


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



FJORDreference material

FJORD COMPANY PROFILE Fjord a strategic design company therefore its main competitors are Frog, Ideo, Smart Design Fjord applies design techniques to solve complex business, service, and interface problems. Services fall into the following three broad categories

Service strategyWhen undertaking strategy work, our goals are:

- The service proposition is clear and well articulated- User, market, and technology drivers are defined- Stakeholders within the client organisation are aligned with the strategy of the project- The project team understands the strategy, the brand, and user drivers, as well as key industry and technology trends

The key deliverable from this work is a service strategy. The format of the deliverable is usually a presentation, but the core presentation can be accompanied with a proposition poster, a movie that brings the core promise to life, a competitive benchmarking study, etc.

Service concept The service concept is the tangible representation of the service. The results from conception work are:

- The driving ideas are well defined- Service interfaces and integration points are agreed- Usage drivers are defined for key stages of service use: discovery, trial, registration, reuse, upgrade- Implementation roadmap includes key service features, prioritised for releases over time

The key deliverable from this phase is a service concept. The format of the deliverable is usually a presentation. It might be accompanied by a demo or movie of core experiences. There can also be other related deliverables.

Interface designDuring the interface design Fjord makes sure the solution is easy to use, and looks and feels elegant. The results from undertaking the interface design work are

- The interaction and information flow is agreed and documented- The visual design of all interfaces is agreed and documented- End users have validated the service concept and tested the usability of the interfaces- The technical team has the information and assets needed to implement the solution

The key deliverable from this phase is the detailed design solution for all interfaces. The deliverable formats range from use case documentation and flow diagrams to interaction and visual specifications, graphical assets, motion guidelines, and practical collaboration with implementation teams.

FJORD’S CLIENTS Yahoo BBC SFR Nokia Ericsson Telefonica

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 Music

Fjord 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 material

NATIVE’S CLIENTS

HP (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 PROCESS Native 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 CONCEPT To 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 models

In 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 DESIGN Native 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 SLIDES

€1999

…

€999

…

€499

€399

€299

€199

€0

CONTENT CONSUMPTION CONTENT CREATION

Price pointInc. VAT

Screen size 20“

Weight 3kg

Battery ~ 2H

10“

10H

~1kg

Performance

Mobility

15“

3H

~2.5kg

3‘‘

100g

2 days

C-ULV

Gaming laptop

SmartphoneMID

Phone

ULV

Mainstream Laptop

eBook

7‘‘

Tablet

Netbook

smartbook

MARKET SEGMENTATION

Backup pics

VENDOR CHARTdeliverable weight FJORD

€222KTAT€550K

(cascades) + €80K (services)

NATIVE€431K

review existing product ranges B 2 1 2

clarify technical requirements and challenges A 1 2 2

understand stakeholder reasoning and expectations A 2 1 2

review of relevant technologies A 1 2 2

review of significant research already existing A 2 2 1

analysis of competitive landscape A 2 1 1

review of the retail environment B 0 0 2

ethnographic study of consumers B 2 0 1

delivery of services concepts A 2 0 1

delivery of UI prototypes (products and cloud) A 1 1 (just on device)

2

validation, feasibility and selection of prototypes and concepts A 2 2 2

testing of prototypes and concepts selected A 2 2 2

delivery of final UI assets A 1 2 2

design implementation (both on the devices and in the cloud) A 0 0 0

first-line support of Toshiba’s contractors (UI implementators, ODMs, ..) B 0 2 0

index performance 18 15,5 20,5