Unified user experience for toshiba products

Copyright 2010 Toshiba Corporation. All rights reserved.
UNIFIED USER EXPERIENCE FOR
TOSHIBA PRODUCTS
Flavio 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
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 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

TAT
reference 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

FJORD
reference 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 strategy
When 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 design
During 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

NATIVE
reference 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 point
Inc. 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
Smartphone
MID
Phone
ULV
Mainstream
Laptop
eBook
7‘‘
Tablet
Netbook
smartbook
MARKET SEGMENTATION

VENDOR CHART
deliverable weight FJORD
€222K
TAT
€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

Unified user experience for toshiba products

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

Similaire à Unified user experience for toshiba products

Similaire à Unified user experience for toshiba products (20)

Plus de Flavio Fabiani

Plus de Flavio Fabiani (19)

Dernier

Dernier (20)

Unified user experience for toshiba products

Notes de l'éditeur