During his presentation “Mobile UX: Native vs Unified” Paulius will talk about how to decide the very first steps of your mobile app and will help to choose design direction - native or unified experience between platforms. Practical examples and a real case study of the new Wix App are guaranteed."

1. Paulius Papreckis
Product Designer
Mobile UX:
Native vs Unified

2. Mobile UX:
Native vs Unified
vs Cross-Platform?
Paulius Papreckis
Product Designer

3. Mobile UX:
Native vs Unified
vs Hybrid HTML5?
Paulius Papreckis
Product Designer

4. A Product Designer who just
get sh*t done.
* 14+ years of experience

9. Web to me always was
wild wild west.

10. Google’s
Material
Design
Guidelines

12. Flexibility of Material Theming

13. Dos & Don’ts - a must for any design system.
Material has three-dimensional qualities: surface, depth and shadows

14. Apple’s
Human
Interface
Guidelines

15. 20% of all AppStore rejections are due to bugs & bad UI design.

17. But it wasn’t always
like that…

18. @LukeW: iPhone Camera Evolution.

19. @LukeW: Instagram Bottom Tabs Evolution.

21. @LukeW: Smartphones continue to take share away from other platforms.

22. @LukeW: 25% active iOS vs 75% active Android smartphones.

23. @StatistaCharts - Geography Distribution.
Android dominates the market with 87%, while iOS comes at 13%

24. 45%Android iOS
55%
Wix App Platform Distribution (approx.)
Our leading markets are United States, Great Britain, Brazil, etc.
+ most premium users

25. @StatistaCharts - Mobile OS Fragmentation.
Adoption of the latest iOS and Android versions in June 2016.

26. By Anton Skvortsov
on Dribbble.com

27. @LukeW: Mobile Apps numbers in Stores.
25% are abandoned after first time use and the situation gets worse over time.

28. @LukeW: Six Month App Retention Rates.
Push notifications are one of the main reasons to be in AppStore or Google Play.

29. @LukeW: Mobile App vs Mobile Web.
People only use 1/3 to 1/2 of the apps on their phone per month.

30. According to comScore, users spend 50% of their time in App number 1,
and almost 80% in their top3 apps.

31. Like it or not,
you have to follow leading
mobile UX patterns.

32. Let’s make
a practical
example

33. Android iOS Wix Android Wix iOS
UnifiedNative

34. Android iOS Wix Android Wix iOS
UnifiedNative

35. Android iOS Wix Android Wix iOS
UnifiedNative

36. Android iOS Wix Android Wix iOS
UnifiedNative

37. Mobile Web
Or you can
also make
mobile web
Why not both?

38. WeChat mini programs
Or build app
within app
It’s a growing trend!

39. Wix
OneApp
C A S E S T U D Y

40. A world where any person, group or
business can easily discover,
create and manage digital places.
V I S I O N

41. 48
S C O P E
Amazing people*
in 8 Teams
* 5 Product Designers

42. 13
W E A R E S E R V I N G
Products* & Companies
& some legacy...
* In Wix we call it verticals: Bookings, Stores, Hotels, Forum, Blog, etc.

43. First, let’s go back in time

45. Up to
25%
Activate accessibility
features on their phone

46. A C C E S S I B I L I T Y S U P P O R T
~30% OneApp
users use
accessibility
settings!

47. A C C E S S I B I L I T Y S U P P O R T
~30% OneApp
users use
accessibility
settings!
20% go bigger
10% go smaller
Quarter of our target user base!

48. A C C E S S I B I L I T Y S E T T I N G S
~30% OneApp
users use
accessibility
settings!
Text Size
Interface Size
Boldness
Colors
Contrast
…

49. C O L O R C O N T R A S T
~30% OneApp
users use
accessibility
settings!
Stark Plugin for Sketch:
Colourblind simulator
and contrast checker.

50. Bold
Fresh
Memorable
S T Y L E P R I N C I PA L S
User Friendly
Customisable
Wix Brand

51. S T Y L E P R I N C I PA L S
True to Brand, but
Platform Sensitive

52. UI
Marathon

53. OneApp
Design
System

54. 0. Foundation
1. General Elements
2. Navigation
3. Lists
4. Selection Controls
5. Overlays
6. Inputs
7. Assets

55. 0. Foundation
1. General Elements
2. Navigation
3. Lists
4. Selection Controls
5. Overlays
6. Inputs
7. Assets
+ UX Guidelines & Screen Examples

56. 0. Foundation
1. General Elements
2. Navigation
3. Lists
4. Selection Controls
5. Overlays
6. Inputs
7. Assets
+ UX Guidelines & Screen Examples

57. OneApp Design System mission is to make life easier for designers & developers.

58. Bold
Helvetica
Typography
F O N T

59. System
vs
Theme
C O L O R S

60. C O L O R S
Wix Android Wix iOS
System
vs
Theme

61. C O L O R S
Wix Android Wix iOS
System
vs
Theme

62. S PA C I N G & L AY O U T
Unified
4px grid
system

63. S PA C I N G & L AY O U T
Spacing
presets

64. C A R D S & S H A D O W S
Platform
sensitive
shadows

65. C A R D S & S H A D O W S
& platform
sensitive
card design

66. I C O N S
Minimalistic
2px icons

67. I C O N S
Minimalistic
2px icons

68. I L L U S T R AT I O N S
Colourful,
playful
illustrations

69. UI design customisation.
U N I F I E D E X P E R I E N C E A D V A N TA G E S

70. UI design customisation.
Life’s easier for designers & devs:
U N I F I E D E X P E R I E N C E A D V A N TA G E S
no need to do things twice.

71. Performance issues + limitations.
U N I F I E D E X P E R I E N C E D I S A D V A N TA G E S

72. Performance issues + limitations.
Can’t get away from mistakes.
U N I F I E D E X P E R I E N C E D I S A D V A N TA G E S

73. Performance issues + limitations.
Can’t get away from mistakes.
Takes time to develop infrastructure.
U N I F I E D E X P E R I E N C E D I S A D V A N TA G E S

74. There are many ways how to..
C O N C L U S I O N S

75. There are many ways how to..
Know your target audience.
C O N C L U S I O N S

76. There are many ways how to..
Know your target audience.
Critically evaluate resources.
C O N C L U S I O N S

77. Thank You. Q’s?
September, 2018