Wolfram Nagel is a Senior User Experience Designer, UI Architect and Concept Developer. He's mainly responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.
His goal is to solve users’ problems, consider and address strategic and economic goals, and to help developers to implement potential solutions in a pragmatic and feasible way.
This rough overview on the focus areas of Wolfram Nagel has been presented at the "UX Thinking Seminar" by artop (https://www.artop.de/akademie/seminare/ux-thinking/)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and beyond
My Topics and focus areas
UX Thinking Kaminabend,artop
Wolfram Nagel / UX Designer
All rights reserved.
Senior UX Designer (TeamViewer)
UX Design and Resarch
Author „Multiscreen UX Design“
CMS and Content Design
Design Methods Finder
Jobs to be Done
Video calls (with up to 300 people)
Free for up to 5 participants
Microjoyment Hybrid MediaGamification Storyfication Emotionality
Screen Sharing Coherence Fluidity Smart Content
Mobile First Simultaneity Social TV Device Shifting Complementarity
strategies and examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)
Parallel, additional information on the second screen.
With Apple AirPlay (and Apple TV) you can change devices in the middle of a film and continue obtaining information on another screen.
The film is shifted from one (e.g., the iPhone) to another device (e.g., the TV). → http://www.youtube.com/watch?v=sPuAiA4O344
With the TeamViewer QuickSupport smartphone app you can remotely control, monitor, and maintain other computers or mobile devices.
Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.
AllRecipes: Search for recipes and add ingredients to the shopping list. Cook- and user-friendly iPad app with big fonts and buttons.
Tado Smart Thermostat: Heating system remote controlled via smarthpone app or browser
With the slot car racing game »Racer« you can use several screens
to expand the race track. (http://g.co/racer).
»Llévalos a la escuela« (ING DIRECT / UNICEF). Hold smartphone over the orange area. One by one the children come off the website
and jump into the phone in order to go to school. → http://www.llevalosalaescuela.com/en
Applications (e.g., smartphone apps) should generally offer the same functionality across various platforms. That was previously not the
case with the Facebook apps for the iPhone and Android due to the different smartphones and operating systems (Workman, 2011).
Zeebox (since 2014 beamly): Interactive social networking and social TV service for mobile devices
Communification and Gamification: Example Nike+ mit iPhone app, social network itegration, own community and gamification features.
Microjoyment (Micro UX) example. With the mytaxi app you can find and order a nearbby taxi. Reduced interface for the watch screen.
At the end of the taxi ride the passenger can easily rate the taxi driver and pay by one tap on his watch (cf. mytaxi, 2015).
Hybrid media example PhoneBook: Combination of a digitale und analogue medium. For every page, there is a suitable
little background film. (http://www.creativeapplications.net/iphone/phonebook-ride-ride-iphone).
translatet into speech.
Apple CarPlay and Siri
Courtesy of Zac Hall (9to5mac) and Ted Kritsonis (mobilesyrup)
https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
More about coherent interfaces and smart content via www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt
Selection of target channels, devices and touchpoints
Example „New York Times“ article
Content Design and UI Mapping in a nutshell:https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
1 2 4 53
brickLEGO bumper bar truck ﬁre truckdriving cab
ELEMENT COMPONENT TYPE INSTANCE /
generic / strukture
concret / speciﬁc
atomAtomic Design molecule template pageorganism
incl. tone of voice
instance of the template
incl. visual design
application for leave,
UI template (+IxD)
(e.g. header with
search form, logo,
(combination of smallest possible elements)
image + caption
quote + author
teaser with headline,
image and description
(consisting of label,
input ﬁeld and button)
unit / brick
label, input ﬁeld,
Building block principle
Article:Content Design and UI Mapping in a nutshell
Structured content is mapped
for presentation in various target
content structure mapping
Content from any source is mapped to
defined content structure.
1 2 3
Input manage Output
various sources various channelsContent Hub
The future of content management (2014) / https://medium.com/@wolframnagel/next-generation-information-experience-trends-und-herausforderungen-von-morgen-9929b17d8b5e
* Or a shelf on the wall or rather a storage option for their books.
People don‘t want a
quarter-inch drill, they want
a quarter-inch hole.*
Taken from: Martin Pattera, Managing Partner at STRATEGYN
Via Quantify Your Customer’s Unmet Needs
Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps
Content structure of a persona template with a Jobs-to-be-Done focus. Specific context and usage related traits are needed to understand
the user‘s specific needs and to be sure to ask the right users. Test users and interviewees are selected based on this information.
via »Replacing The User Story With The Job Story«
Three main aspects are relevant: User, Journey and Job Story
(inspired by Cooper »Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps«)
User Focussed Decision Process (draft)