Remixing Mobile User Experience

REMUX
Remixing Mobile User eXperience
Mobile UX London 2015
@jasonmesut

The worst keynote synopsis ever
Potential Opportunities and Associated Challenges for
Designing Valuable Futures based around Mobile
Experiences
A lot of focus around mobile UX seems to be around designing
responsively, adapting to different platform paradigms, or
designing for gestures, with little focus on the powers we now
wield by having a super computer in our pockets. With the
apparent advent of the Internet of Things and never-ending
hype, what are the potential future trajectories of solutions for
people on the move? What are the form factors, new service
approaches and challenges associated with these?

Naveed
We want it to be
case study led

I’m no expert in mobile. Who is? Really?
What do I know about mobile UX?

Which is highly relevant
I can’t show my recent work

Zipdisks, CDs, and my hard drive
So I raided my old media

Looking back
20+ years mobile design

GCSE Craft, Design and Technology
Portable music studio
1995~

Portable music studio — 1995
A future mobile music studio
concept designed at school
– Nintendo SNES inspired
peripheral inputs
– Minidisc inspired central brain I couldn’t find the original sketches, but it was
sort of like this but minidisc sized

Early web design
Yell.com
1999–2000

Early web design — 1998–2000
Extended placement creating websites for SME businesses
– 1 Website a day
– Scanning, copywriting, visual design, HTML, browser testing 
(2-3h design, 6-7h testing and tweaking)
– IE, Netscape, Mac, PC
– 640x480 – 1280x1024
– <30k for a web page
– <13k for a gif/flash banner

Key learnings
– You have to test with different platforms and screen sizes
– File size really matters

The Don makes some prescient predictions
The invisible computer

App divergence
Divergent, single
serving apps

Key learnings
– Divergent appliances restrict modal errors
– We will still desire objects
– Key technologies will be distributed:  
screens, internet access, sensors
– Predictions rarely turn out as you expect them

A future of reading
Amazon Via
2001

University
Brunel Design Directory
2001

Amazon Via — 2001
Come up with a new product
concept for Amazon for 2005

Reading context and behaviours

I explored different form factors*
*I was an Industrial Design after all

eInk and LCD (with a stylus)
AccountMessages
Message
SearchCommunityCommunityBookshelf CommunityCommunity
Proﬁle NetworkMembers
Mark
Friend
Currently reading favourites
Land rover legend 4.5 engineering weekly 5
the rise and fall of 4
Mcdonalds
Warren
Friend colleague
Angella’s ashes 4 cre@te online 4
design of everyday 4.5 chi journal 4
things
Julie
Partner
Harry potter 4 silence of the lambs 5
hannibal 4 wallpaper 4
wallpaper 3.5
Tony
Colleague
The art of innovation 5 design week 4
hannibal 4 sony design 4
vision of the future 3.5
Leisure Business Interest

Remixing Mobile User Experience

Amazon Via — 2001
A future concept for digital
books, making Amazon a
provider of e-books for niche
material within communities
– E-Ink display
– Digital Books
– Basic page turning
– Annotations
– Thumb controls
– Necklace projector
AccountMessages
Message
SearchCommunityCommunityBookshelf CommunityCommunity
Proﬁle NetworkMembers
Mark
Friend
Land rover legend 4.5 engineering weekly 5
the rise and fall of 4
Mcdonalds
Warren
Friend colleague
Angella’s ashes 4 cre@te online 4
design of everyday 4.5 chi journal 4
things
Julie
Partner
Harry potter 4 silence of the lambs 5
hannibal 4 wallpaper 4
wallpaper 3.5
Tony
Colleague
The art of innovation 5 design week 4
hannibal 4 sony design 4
vision of the future 3.5
Leisure Business Interest

Amazon Kindle — 2007
– E-Ink display
– Digital Books
– Basic page turning
– Annotations
X No thumb controls
X No necklace projector

Mycestro — 2014
– Thumb controller
– Finger buttons

Airplay and chromecasting — 2010–15
– Other ways to transmit
information to different displays
– Finger buttons

Key learnings
– Understanding context inspires radical ideas that could work
– Ideas are easy — delivery is hard
– Prototyping with wire and blue tack makes you look like an idiot
– One day we’ll have necklace projectors (or maybe not)

Clinical application for Kenya and NHS
Mobile Map of Medicine
2006

A need in Kijabe, Kenya
Small medical centres with
generalists serving large
communities

Limited shared computers
– 2 installs of Map of Medicine
– 2 big folders of printouts

Large geography, terrible transport
– Take over a day to get to some patients
– Longer for patients to get to clinics

– Cheap PDAs
– Cisco wanted to hep developing world
– Opportunity to install WIMAX networks
Opportunity for a mobile device + Cisco

Rapid prototyping (paper and Java)

Designed a blended research approach
Interview
Surveys
Week 3 Week 5Week 2 Week 4
Introduce
plans to
end users
Week 1
Initial demo
Day 1- Present
plan to users
Day 1-Demo
Map & device
Testing
Day (1-30)- Diary studies.
Week 1-6 (day 5)- Attitude surveys
Day 1&2-Intro.
interviews
Day 5- Market
survey
Day 4 & 5- User
testing
1st week in October – 3rd week in November
Week 6
Day 5- Market
survey
Day 4&5-
de-briefing
Week 7
Day 1- Present
plan to users
Day 1-Demo
Map & device
Day 2-Intro.
interviews
Day 5-
de-briefing
Day (1-30)- Diary studies.
Week 1-6 (day 5)- Attitude surveys
Day 5- Market
survey
Day 5- Market
survey
Day 4- User
testing
Day 1&2- User
interviews
Day 1- User
interviews

Plenty of ‘wearable’ devices

Key learnings
– Mobile technology could empower developing communities
– Mobile technology can opens up new infrastructure
– It’s hard to fit into established workflows
– Healthcare professionals have a lot of wearable technology already

Improving safety and efficiency of wind turbine maintenance
Visual Eyes mobile
2011

Visual Eyes desktop application

Mapping activities across roles

Targeting a maintenance agent
2 3
3
5
5
4 6
6
8
8
7
9
6 Response to alert
As Bob has almost finished
his final task he agrees
with the Operations
Controller that if he can
complete the job in 15
minutes he will, otherwise
he will have to leave the site
and come back another time.
7 Completes task
Bob completes the final task in
the job list and taps to add
more details (photo/notes).
He takes a photograph of
something that he has
spotted that will need to be
monitored and adds a note
with the date and his
comments, before getting in his
van ready to move on to the next
job.
5 Alerts
While he is still on-site
working, Bob receives an
alert notifying him that there
are electrical storms forecast
in the area he is working.
Bob dismisses the alert by
calling Operations Control to
check in and get advice on what
he should do.
1 Planning for the day ahead
Over breakfast Bob uses his phone to look at
the jobs he has scheduled for the day. He
taps to view details of each job
(location, weather forecast, time
allocation etc) so he can plan his
day.
2 On the way to Turbine
Bob gets into his van and drives to
the location of the first job on
his list. If he needs to he can
view the location on a map
and link through to his
iPhone's GPS enabled
maps application to get
directions.
3 At the Turbine
When he arrives at the wind
farm/turbine, Bob taps the
start button in the job detail
screen. He is asked to verify
his ID by entering a
password/code. When this
code is successfully verified he
receives a code via SMS which will
give him access to the turbine.
4 Completing Tasks
As he completes each of the tasks
for the job, Bob taps to mark it
completed. (this logs his progress
and updates the display at
Operations Control).
Visual Eyes Mobile App User Journey

Key learnings
– Mobile solutions don’t need to reflect desktop counterparts
– Mobile technology can create new use cases
– Use older insights to inform new solutions

Making timesheet more enjoyable
Fingerpainting
2012

Timesheet applications fail
– Boring
– People forget
– Entering time against different job codes is hard
– Designed for resource and account managers, not ‘talent’

Key learnings
– Sound can provide tactile feedback
– Sound can engage others
– Bad sound can annoy
– You don’t have to follow a platform paradigm
– But a strong metaphor can always help

Interaction R&D for A&E applications
Healthier mobile entry
2012

Clinical system for an A+E
– Leapfrog competition
– Triage patients better and more efficiently
– Reduce waiting times
– Minimise data workflow errors

Key learnings
– Different users and usage contexts demand different UI
– GUIs haven’t moved on that much from hypercard
– Truly touch interfaces are rare but allow for eye contact
– Touch interfaces suit more coarse interactions
– Quickly prototyping and animating engages stakeholders

Focusing on what matters to the market
Future smartphone
2013

Plan
2009 2010 2011
5800
Xpress music
N97 5330
Xpress Music
6700 6790
Surge
5530
Xpress Music
N900 X6
gle G1 Vertu Signature S Palm Pre LG BL40 HTC HeroHTC Magic Apple iPhone 3GS Iida Ply Iida Lotta
Motocubo
A45
Droid HD2 Nexus One Desire
M7600 Beat DJ Blue Earth S8300
UltraTouch
S3650
Corby/Genio
S5150
Diva
C3530 Nexus S Galaxy Ace Galaxy S2 Galaxy NoteWave 525ChampChat 355 GalaxyMonte
C510 W508 W508 C901 Jalou Xperia X10 Pureness Vivaz X8Cedar Xperia RayX10 Mini Xperia Arc
E5N8 C5 N9Lumia 710x5X2 X3-02
HTC, Legend
Apple, iPhone 4 BlackBerry Torch 9800 BlackBerry P9981LG Cookie LG310 Dell Streak Æsir, AE&Y, (Yves Behar) Motorola, EX212
Rhyme Sensation XLRadarSalsaChaCha
BlackBerry 9930Huawei, Folded Leaf
HD7
What’s next?
2000 2001 2002 2003
Mobile phones
Inﬂuential milestones for designers
3310 9210 6310 5510 7650 5210 89107210 6610 3650 68005100 N-Gage 1100 2300
V8088 V60 V70 E365V600 A835
M100 A110 A200 A300 A400 R210 T100 A500 V200 P400 A800
Sony CMD Z5 Sony CMD J5 Ericsson R520 Ericsson T39 Sony Z7 Sony J70 T68 T300T200 T610
A mobile timeline from Plan Strategic — www.plan.london

Future smartphone
Meaningful
value
Usability
?
Battery life
Camera?
?
?
?
Screen
Connectivity
?

Key learnings
– Gimmicks do attract attention
– Advanced technology is not enough
– Design can empower through providing usable and meaningful solutions
– Connect to the wider system

Helping people unlock London
Future transportation service
2014–ongoing

A service design challenge
Icons created by Vicons Design from the Noun Project
?
– Helps people unlock London
– Mobile apps and wider digital services
– Spaces, places, people, vehicles, interactions

Mobile diary and movement tracking
Digital diaryMovement tracking Battery pack
+ Needs

– Client
– Call centre services company
– Brand agency
– Marketing and advertising company
– App development company
– Systems integrator
– Product strategy consultancy
– Political negotiations
– PR groups
– Maintenance company
– Hardware companies
– Payment provider 
Key project partners

– Algorithm experts
– Product owners
– Product designers
– Developers
– Researchers
– 2D Designers
– 3D Designers
– Design strategists
– Product strategists
– Content strategists
– Strategist strategists 
Key project roles

– Proposition
– Service ideas
– Marketing ideas
– Design details
– Language
A lot of opinions about everything
A lot of overlaps in what we contribute to

We have heated debates on UI
Product designers Me
– Engage people
– Less words, more imagery
– Less steps
– Smaller narrow font
– Subtlety
– Reference cool app UI
– Be clear to people
– More words
– Clear steps
– Readable font
– Contrast
– Reference UI research
Visual simplicity Conceptual simplicity

Copywriting is often the saviour
– Selling ideas
– Explaining functions
– Working within tight spaces
– Expressing the brand
So much of what we do in User Experience ends
up being about the words we use

Key learnings
– Mobile diary studies help to catch people in the moment
– Mobile phone batteries don’t last
– People love battery packs
– Visual designers getting more influence
– Old stool usability and accessibility is being left behind
– Service and UX sensitive copywriting is a rare skill

– Think beyond the device
– Find ways to engage people
– Consider how your solution co-exists in a wider system
– Visual designers are getting more influence
– Usability and accessibility is getting forgotten about
– We’re copying bad examples
– Optimisation is as important in 2015 as it was in 2000
Key lessons from 20+ years

Looking forward
Potential trajectories

What’s next in our most popular UI paradigm?
Better graphical user interfaces

Graphical
User Interface
Allows users to
interact with
electronic systems

Visual Language
Motion Graphics
Information Design
Information Architecture
Interaction Design

Visual language
Motion graphics
Information Design
Information Architecture
Interaction Design
Still relevant

Original iPhone
2007
—Direct manipulation
—Dynamic display
—Rich graphics

???
Steve lied
We do need
hard keys

???
Steve lied
We do need
a pointer

In defence of
skeuomorphism
2007
—??

Skeuomorphism has
always been in design

Does Material design get it right?

Screens will continue to improve
New screen technology

Better interfaces designed for touch
Truly touch interfaces

iMaschine2
Portable music making app
with 3D touch

Connectivity inside more focused products
Connected devices

SAM
A prototyping toolkit for
the Internet of Things

SAM
Sensors
Actuators
Computer brain

Great battery life, restricted functionality
Focused phones

Respect human values
Calmer technology
Polite technology

Different devices and services working together
Co-operative systems

Ableton link
Multi-device
synchronisation

Physical peripherals working with a central brain
Accessories and modularity

Physical
peripherals with
digital interfaces

What will the interfaces and objects be like in the future?
Future form factors

What’s next?
Mobile computing form factors
?

What does your home look like?

Original iPhone
??
2007
—Direct manipulation
—Dynamic display
—Rich graphics

Knobs
Buttons
Switches
Levers and handles

Visual and conceptual simplicity are often confused
Simplicity is complex

2 types of simplicity*
Visual
– Less words
– Less clutter
– More attractive
– Cleaner
– Clearer visually
– Hidden controls and options
Conceptual
– More words
– More to arrange
– Less engaging
– Can be too much to parse
– Options are clearer
– Exposed options
*An oversimplification in itself

Displaced complexity
System rules
Mental models

Attracted by magic
and visual slickness
We’re like
magpies

Wearable
excitement
Something other than a
smartphone to design

Even if they make
us look ridiculous

Gesture issues
Tiring
Coarse control
Confusion with natural gestures
Hard to learn and remember

We’re too expensive, we can’t do enough, we can’t be the
bottleneck — we need to disseminate
Not enough UX skills

Not enough UX
Too expensive
Tangible ROI is unclear
Lack of supply to meet demand
Supply isn’t of great quality

Strategy
Research
Interface
Information
PS
Product
Strategy
CX
Customer
Experience
VD
Visual
Design
IxD
Interaction
Design
QlR
Qualitative
Research
qNR
Quantitative
Research
IA
Information
Architecture
CS
Content
Strategy
Work in progress with Vitamin T…
UX Spectrum
of skills

Strategy
Research
Interface
Information
PS
Product
Strategy
CX
Customer
Experience
VD
Visual
Design
IxD
Interaction
Design
QlR
Qualitative
Research
qNR
Quantitative
Research
IA
Information
Architecture
CS
Content
Strategy
Work in progress with Vitamin T…
Product Designer
Strategy
Research
Interface
Information
Product Strategy Customer Experience
VisualDesign
InteractionDesign
Q
ualitativeResearchQuantitativeResearch§
Inform
ationArchitectureContentStrategy
Service Designer
Strategy
Research
Interface
Information
VisualDesign
InteractionDesign
Q
Inform
UI / UX Designer
Strategy
Research
Interface
Information
VisualDesign
InteractionDesign
Q
Inform
UX Strategist
Strategy
Research
Interface
Information
VisualDesign
InteractionDesign
Q
Inform

So many organisations, skills and roles to navigate
Many different people to work with

Hard to observe context of use on the move
Understanding mobile
experiences is hard

Physical web, native vs. web, agile vs. waterfall
Dogmatic differences

We use a lot of jargon and deceptive language
Bad language

Battle the bullshit
Ban deception
– Intuitive
– Seamless
– Frictionless
– No UI
– Natural UI
Clarify our jargon
– Lean
– MVP
– Responsive / adaptive
– Mobile first

Applying design across all levels of the mobile experience
Design across all levels

Design better UI
components
– Buttons
– Signifiers
– Scrollbars
Tap me please

Use the right
interactions
– See
– Tap
– Swipe
– Stroke
– Speak

On clearer
screens
– Layouts
– Grids
– Cards
– Zones
– Drawers
Tap me please

Within better
flows
– Drill down
– Traverse
– Fade
– Pogo stick
Tap me please

Within quality
apps
– Proposition
– App icon
Tap me please

Better device app
organisation
– App icon
– Within groups
– On different screens
– In widgets
Tap me please

Better app store
organisation
– App icon
– Within groups

To put on their
devices
– Smartphones
– Smart watches
– Tablets

To use in different
environments
Icons created by Jonathan Li, DonBLC and parkjisun from the Noun Project
– Car
– Home
– Office
– Street

In different
geographies
– Connectivity
– Data plans
Created by Yamini Ahluwalia
from the Noun Project

Design skills are important across all of them
Elements +
interactions
Screens +
flows
Apps OS App stores Devices Environments
+ geographies
Tap me please
Different levels of abstraction that we can design around

User research
Sound design
Motion graphics
Visual language
Information design
Information architecture
Interaction design
Experience strategy
Elements +
interactions
Screens +
flows
Apps OS App stores Devices Environments
+ geographies
Tap me please

Uniting the worlds of physical products with digital services
Cohere the Physical and Digital

A recipe for integrated products?
+ +Physical
Product
Digital
Interface
Digital
Service
Integrated
product
=

+ +Physical
Product
Digital
Interface
Digital
Services
Aesthetic  
Visceral. Visual, sonic, feel. 
Interactive
Behavioural. Distribution of inputs and controls.
Experiential
Reflective. Fit with person’s context and ecosystems.
Key levels
of harmony
Components of integrated experience

iPod
The original
integrated product?
Appropriate interactions
—Hardware and software
interface working together
—iTunes store
—Aesthetic mismatch

Unite product and
graphic language
Nokia and Microsoft
Windows mobile 
Separated at birth

Nest
Rare harmony?
Coherent product-service
—Elegant hardware
—Slick UI
—Intelligent services

Norman, Verplank, Tog, Neilsen and more
Revisit (and respect) our elders

Diverge again
Focused devices
Peripherals and accessories

Even if they do have some
senior moments

Ideally the ones that have research evidence
and design solutions
But follow practitioners

Connect, calibrate and create with different skillets
Craft collaboration

How can we better collaborate with
an increasing number of stakeholders
of diﬀerent backgrounds? ?

Create
Calibrate
Connect
Strategies

Create
Calibrate
Connect
Be
human
Hold up
a mirror
Establish
frames
Foster
friendly
friction
Practice,
practice,
practice
Flex
yourselfPrinciples

Create
Calibrate
Connect
Be
human
Hold up
a mirror
Establish
frames
Foster
friendly
friction
Practice,
practice,
practice
Flex
yourself
Crafting
Collaboration
Talking
Capturing
Listening
Learning other
perspectives
Planning and
preparing
Sharing at
right time
Skills

As well as the product/service and its interface
Consider experience + engagement

You can start
with an idea, a
need, some
technology
– A service
– A product
– A feature

Which you can
empower through
good designEmpower
– Desirable
– Accessible
– Usable
– Powerful

To engage
the audienceEmpower EngageEmpower Engage
– Reach out
– Connect
– Sell
– Remind

And embrace
the wider systemEmpower EmbraceEngage
– Integrate with other services
– Fit into people’s lives
– Cohere with conventions

Just remember
there are 1000s
like your
product or
service

3 strategies
Get (and stay)
on the radar
Unlock the
potential
Connect to the
wider system
1 2 3
Engage Empower Embrace
Jean-Philippe CabarocCreated by Pantelis GkavosCreated by Joel Bryant

Go to where people are, and listen with your eyes
Understand behaviours in context

Observe real people doing real
things in their real environments

The world
The products and
services that people will
use and the context of
that usage
The user
How they see the
world and how they
need to manipulate it

The world
The products and
that usage
The user
How they see the
world and how they
Environment User
Situation Task
System
FamiliarityEcosystem
Intent

Environment User
Situation Task
System
Intent
The world
The products and
that usage
The user
How they see the
world and how they

Environment User
Situation Task
System
Intent
Usability
Product
Experience
Brand
The world The user

Cennydd Bowles: http://www.cennydd.com/blog/designing-with-context
evices
nvironment
ime
ctivity
ndividual
ocation
ocial
D
E
T
A
I
L
S

— IBM, 1980
customers didn’t like the
solution, not because of ﬂaws in
the recognition but because of a
host of hitherto-unseen
environmental challenges
IBM voice UI

Speaking taxed the subject’s throat
There was concern for privacy
Awkward in a communal setting

Polite interactions
Contextual
Respectful
Discrete

We have all the parts already
We just need to remix them in our own style
Goals
– Think beyond interfaces + devices
– Empower technology
– Engage people
– Embrace wider systems
– Understand the real context
Key tactics
– Connect, calibrate + create with others
– Keep learning from each other
– Think beyond one person’s answers
REMIXING User Experience

Remixing Mobile User Experience

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Remixing Mobile User Experience (20)

More from Jason Mesut (15)

Recently uploaded (20)

Remixing Mobile User Experience