Why android rst?

User experience design, the Enhancers way

Interaction
design

Brand
architecture
Digital
strategies

Service
design

enhancers.it

Content
marketing

A comprehensive UI approach
Problem understanding
and vision

Design

Prototyping

Development

Formative usability

Concept design

Prototype

Integration

(painpoints and
clientsneeds)

(sketch and ideas list)

(InVision, Briefs or
HTML5 )

(interface description,
hi- prototype, detailed
implementation report)

Information architecture
Desk research
(trend analysis)

Field research

(UX pattern selections,

card sorting)

Wireframing

Validation

(navigation tree
and content list)

(usability testing)

(insights list and

opportunity
mapping)

Visual design
(look&feel)

enhancers.it

iterations

Development
(coding or supporting
to code, debugging,
launch on line)

Clients: long-term relationships

Interaction
design

Service
design

Digital
strategies

Brand
architecture

Content
marketing

IKEA

IKEA

Deltatre

Serisystem

Mattioli

illy

iShopps

illy

Equinoxe

IeL

Audi

ATS

Avon

Cecomp

illy

Azimut Yachts

Kairos

Esselunga

Axant

Serisystem

Esselunga

Fideuram

Mattioli

Glossom

Esselunga

Billa

illy

IeL

IeL

Equinoxe

Laterza

Telecom

Equinoxe

4Timing

SeriJakala

ATAC

Logitech

Samsung

Bomboogie

enhancers.it

Context

Market share per OS (4Q 2014) - Worldwide

76.6%

19.7%

Android

iOS

2.8%

0,9%

Windows Phone

Others
http://www.idc.com/getdoc.jsp?containerId=prUS24676414

Market share per OS (dec 2014) - Italy

67.3%

18.3%

12.7%
1.7%

Android

iOS

Windows Phone

Others
http://www.kantarworldpanel.com/global/smartphone-os-market-share/

HEAT MAP

NY OS share

HEAT MAP

android share

HEAT MAP

iOS share

Cross-platform development by framework

enhancers.it

Strategies

OS agnostic UI - Skype

Android

iOS

Windows Phone

OS agnostic UI - Spotify

Android

iOS

Windows Phone

OS agnostic UI
_Strong branding
_Reduced cost for design and maintenance
_Not optimized User experience
_Good for brand new markets and millennial users
_Common for apps owned by OS
(e.g. skype/microsoft or maps/google)
enhancers.it

OS compliant UI - Evernote

Android

iOS

Windows Phone

OS compliant UI - Whatsapp

Android

iOS

Windows Phone

OS compliant UI
_The most expensive to design and maintain
_Best user experience for traditional users
_Reasonable branding
_Good for highly task-oriented app (eectiveness)

enhancers.it

Hybrid - Instagram

Android

iOS

Windows Phone

Hybrid - Facebook

Android

iOS

Windows Phone

Hybrid
_Reduced eort to design and maintain
_Good user experience for traditional users
_Strong branding (brand icons, palette and fonts)
_Good for apps with standard behaviors for a large
audience

enhancers.it

Approach

Skeumorphism - divergent

enhancers.it

Flat - convergent, but not the same

_Typography
_Grid layout
_Colorful
_Motion

Android

iOS

Windows Phone

Why Android rst? Because Material

Completely at UI

Navigation drawer

Cards

Material design

Back button
(even if not necessary)

Button for the main action

Typographic pop up

Process
Begin from Android single
density artboard (360x640px)
Continue using single density artboards
for iOS and Windows Phone designs.
This to be consistent among all the OS
and to not change shapes and fonts
dimensions three times. You will save a
lot of time.
Using single density in your design
simplify the export of all the assets.
From single density you can export in
every format needed.

640 px / 16

360 px / 9

Android

320 px / 9

568 px / 16

iOS

Process
12:00

12:00

Use drawer menu as suggested

by Material Guidelines
Even if iOS mostly uses tab bar for its main
navigation and Windows Phone uses Panorama
Hub, drawer menu is a steady pattern for the
users experience in every OS.

News

Messages

Alvin Armstrong

Inbox
Favourited
Sent mail
Drafts

SETTINGS

HELP

TERMS & CONDITIONS

Process
Use your brand font, not OS fonts
OS fonts (Roboto for Android,
Helvetica Neue for iOS and Segoe UI
for Windows Phone) have dierent
X-height and so dierent
dimensions. Same sentences in
Android take a certain width, but in

iOS and Windows Phone take a

dierent one. If you use your brand
font, you dont have to change the
design three times. By using the
same font, your design will be more
consistent among all the OS.

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.

adipiscing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.

Android

iOS

Lorem ipsum dolor sit amet, consectetur adipiscing

elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.

Windows Phone

Process
Use your icon system, not OS icons
Dont waste time by changing three times all the icons.

Android

iOS

Windows Phone

Process
Use your brand palette
Use colors that are dierent from those used in each OS.

Android

iOS

Windows Phone

Process
Build the contents on cards and
use tabs to organise it

enhancers.it

Process
Use oating button for the main
actions and convert it into xed
bottom button for iOS and in action
bar in Windows Phone

enhancers.it

12:00

News

TIM

9:41 AM

News

Thank you
Via Maria Vittoria 40bis
10123 Torino
011 046 12 57
info@enhancers.it