Designing cross-platform mobile user interface (UI) is a nightmare. Even if the three main OS speak almost the same language, they actually speak three different lingos. Enhancers will showcase an optimal workflow – starting with Android Material – to minimize effort and variations, keeping the user experience (UX) great along all platforms.

1. Why android first?

2. Interaction
design
Service
design
Digital
strategies
Content
marketing
Brand
architecture
User experience design, the Enhancers way
enhancers.it

3. Problem understanding
and vision
Validation
(usability testing)
Integration
(interface description,
hi-fi prototype, detailed
implementation report)
Visual design
(look&feel)
Wireframing
(navigation tree
and content list)
Information architecture
(UX pattern selections,
card sorting)
Concept design
(sketch and ideas list)
Design Prototyping Development
Prototype
(InVision, Briefs or
HTML5 )
iterations
Development
(coding or supporting
to code, debugging,
launch on line)
Formative usability
(painpoints and
clients’needs)
Desk research
(trend analysis)
Field research
(insights list and
opportunity
mapping)
A comprehensive UI approach
enhancers.it

4. 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
Clients: long-term relationships
enhancers.it

5. Context

6. iOS Windows PhoneAndroid Others
Market share per OS (4Q 2014) - Worldwide
19.7%
76.6%
2.8% 0,9%
http://www.idc.com/getdoc.jsp?containerId=prUS24676414

7. iOS Windows PhoneAndroid Others
Market share per OS (dec 2014) - Italy
18.3%
67.3%
12.7%
1.7%
http://www.kantarworldpanel.com/global/smartphone-os-market-share/

8. HEAT MAP
NY OS share

9. HEAT MAP
android share

10. HEAT MAP
iOS share

11. Cross-platform development by framework
enhancers.it

12. Strategies

13. OS agnostic UI - Skype
iOS Windows PhoneAndroid

14. OS agnostic UI - Spotify
iOS Windows PhoneAndroid

15. 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

16. OS compliant UI - Evernote
iOS Windows PhoneAndroid

17. OS compliant UI - Whatsapp
iOS Windows PhoneAndroid

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

19. Hybrid - Instagram
iOS Windows PhoneAndroid

20. Hybrid - Facebook
iOS Windows PhoneAndroid

21. _Reduced effort 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
Hybrid
enhancers.it

22. Approach

23. Skeumorphism - divergent
enhancers.it

24. Flat - convergent, but not the same
_Typography
_Grid layout
_Colorful
_Motion
iOS Windows PhoneAndroid

25. Navigation drawer CardsCompletely flat UI
Why Android first? Because Material

26. Button for the main action Typographic pop upBack button
(even if not necessary)
Material design

27. 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.
360 px / 9
640 px / 16 568 px / 16Android iOS
320 px / 9

28. Process
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
12:00
Messages
12:00
Alvin Armstrong
Inbox
Favourited
Sent mail
Drafts
SETTINGS
HELP
TERMS & CONDITIONS

29. Process
Use your brand font, not OS fonts
OS fonts (Roboto for Android,
Helvetica Neue for iOS and Segoe UI
for Windows Phone) have different
X-height and so different
dimensions. Same sentences in
Android take a certain width, but in
iOS and Windows Phone take a
different one. If you use your brand
font, you don’t 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
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.
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.
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.
iOS Windows PhoneAndroid

30. Process
Use your icon system, not OS icons
Don’t waste time by changing three times all the icons.
iOS Windows PhoneAndroid

31. Process
Use your brand palette
Use colors that are different from those used in each OS.
iOS Windows PhoneAndroid

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

33. Process
Use floating button for the main
actions and convert it into fixed
bottom button for iOS and in action
bar in Windows Phone
News
12:00
News
9:41 AMTIM
enhancers.it

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