As part of our on-going collaboration with the Power BI product teams at Microsoft, our design director and partner Guy Haviv and our CTO Yoram Berkowicz gave a talk to a wide audience of user experience designers and developers at Microsoft ILDC on designing and developing cross-platform mobile experiences and best practices around development & design processes and collaboration.

1. 2015 Microsoft
Designing and developing
products for multiple platforms
Microsoft Power BI
Guy Haviv
Design Director, Partner
Tel Aviv

2. About Designit
2015
We grow businesses by designing new
experiences for humans, enabled by
technology.
We are a global strategic design firm
making innovation happen for the world’s
most ambitious companies.
We design brands, products, services,
digital & mobile experiences and fuse
them with technology.
Welcome to Designit

3. Overview
San Francisco
Madrid
Barcelona
Aarhus
Copenhagen
Munich
Tel Aviv
Sao Paolo
Shanghai
300+
32
28
Designits worldwide
Educational Backgrounds
Nationalities
Tokyo
Oslo
Stockholm

4. 2015 Microsoft
Part 01
Approaches in design for
multiple platforms
Designing and developing products for multiple platforms

5. Microsoft
How do we approach designing for
multiple platforms?
2015
Q

6. Microsoft
To begin, we need to get to know
each platform’s opinionated way of
designing user experiences.
2015
Approach

7. Microsoft
Luckily, there are handy documentations
of these ‘opinionated’ approaches
2015
Approach

8. Microsoft
A great way to go through a well phrased ‘design manifesto’ for each
platform is to read the user interface design guidelines.
2015
Approach
Designing for iOS (new section on Apple developer site)
developer.apple.com/design/
iOS Human Interface Guidelines
developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

9. Microsoft
A great way to go through a well phrased ‘design manifesto’ for each
platform is to read the user interface design guidelines.
2015
Approach
Android Design
developer.android.com/design/index.html
Material Design (google design language site)
www.google.com/design/spec/material-design/introduction.html

10. Microsoft
Approach
Designing the user experience
across platforms:
2015

11. Microsoft
Approach
One Size Fits All vs. Good Citizen
2015

12. Microsoft
Approach
Perhaps it’s better to describe these
approaches as a spectrum:
2015

13. Microsoft
Approach
Spectrum
2015

14. Microsoft
Approach
Spectrum
2015

15. Microsoft2015

16. Microsoft2015

17. Instagram
iPhone Android iPhone Android

18. iPhone Android iPhone Android

19. iPhone Android iPhone Android

20. iPhone Android

21. Waze
iPhone Android iPhone Android

22. Microsoft
How do we approach multiple
devices and resolutions?
2015
Q

23. Microsoft
3 common challenges:
1. Screens with different physical sizes (in inches)
2. Screens with different aspect ratios
3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)
Approach
2015

24. 1. Screens with different physical sizes (in inches)
LG G3
5.5 inch
1440 x 2560
Nexus 6
5.96 inch
1440 x 2560
Z3 Xperia
Compact
4.6 inch
720x1280
Galaxy S5
Mini
4.5 inch
720x1280
A few examples:

25. 2. Screens with different aspect ratios (less severe today than ~2 years ago)

26. 3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)

27. 2015 Microsoft
Approach
But this is unrealistic on both iOS and Android, as the tools target pixel sizes specifically,
and don’t simulate resizing and stretching on their own.
In an ideal world, designers would’ve perhaps wanted
to tightly control everything and only target a small set
of different sizes.

28. Microsoft
Approach
Dealing with these challenges:
2015

29. 2015 Microsoft
Approach
Dealing with these challenges:
Embrace fragmentation in screen sizes:
learn from desktop apps on Windows /
Mac OS

30. 2015 Microsoft
Approach
Start by establishing an
approach to resizing.
A good place to start is desktop apps (on Mac / Windows)
Some inspiration can be from responsive web design, although it is biased towards too much granularity.
Let’s look at a quick demonstration.
0

31. 2015 Microsoft
Approach
Try to follow the platform’s
approach and best practices.
e.g. between iPhone 5 and 6, elements stay the
same point & pixel size, but are further away
from each other, freeing more space for content
1
Visual: www.wearebuild.com

32. 2015 Microsoft
Approach
Try to design most screens with
scrollable views in mind.
Makes the transition from iPhone 4 > 5 much easier.
(because it builds upon the desktop app inspiration)
2
If scrolling is not desired, try to plan for a ‘canvas’
view that can be scaled.
Visual: http://www.ionuss.com/

33. 2015 Microsoft
Approach
Consider designing for just xhdpi on
Android and plan for some
adjustments for other resolution.
We’ve opted for this approach in recent mobile projects and this
approach was surprisingly efficient.
3

34. 2015 Microsoft
Approach
Test for extremes: small fonts or icons
in lower DPIs. Check to see that things
pixelate / hint nicely, and are still
readable.
For example, always use a ‘mini’ Android device + an
average size one as the 2 main design preview devices.
4

35. 2015 Microsoft
Part 02
Design & Development
Collaboration
Designing and developing products for multiple platforms

36. Design & Development Collaboration
Communication between designers,
PMs and devs can be tricky in the early
stages of a project / feature.
Microsoft2015

37. Microsoft
Design & Development Collaboration
When a project / feature is in preliminary stages, talking about it is
tricky because the language tends to be fuzzy, and the scope
unclear.
2015 Visual: http://www.cubebreaker.com/traffic-lights/

38. Microsoft
Design & Development Collaboration
Let’s talk about 3 main tools we use to
facilitate meaningful conversations
between design, PM, & dev teams.
2015

39. Microsoft
Design & Development Collaboration
1. Wireframes
2. Visual design (and specs / redlines / style guides)
3. Communicating about transitions / animations / behaviors
2015

40. Microsoft
Design & Development Collaboration
1. Wireframes
2015 Visual: https://dribbble.com/pons

41. Microsoft
Design & Development Collaboration
Wireframes are a great tool in bridging
the fuzziness gap. They can be used to
clarify requirements, and describe what
the user sees and interacts with.
Wireframes make theory tangible.
2015

42. Microsoft
Design & Development Collaboration
2015

43. Microsoft
Design & Development Collaboration
Often times, it’s useful to build quick clickable
prototypes using these wireframes, which
help clarify things further.
2015

44. Microsoft
Design & Development Collaboration
At this stage, we use several prototyping
tools, such as: InVision & Flinto.
With Flinto and a bunch of wireframes, you can literally create a
tappable mobile / tablet prototypes in under 2 min.
quick demo of Flinto?
2015

45. Microsoft
Design & Development Collaboration
As part of a design process, the majority of wireframes are drawn
and discussed following the information architecture phase.
2015

46. Microsoft
Design & Development Collaboration
2. Visual design (and specs / redlines / style guides)
2015 Visual: https://dribbble.com/shagov

47. Microsoft
Design & Development Collaboration
What is the best way to deliver and
ensure successful implementation of
designs?
2015

48. Microsoft
Design & Development Collaboration
We’ve tried many different ways
of delivering visual designs.
2015 Visual: http://www.puppygames.net/revenge-of-the-titans/

49. Microsoft
Design & Development Collaboration
Choosing the right method often creates a tradeoff between
spending more time creating a ‘spec’ and time spent doing
adjustments and tuning.
2015

50. Microsoft
Design & Development Collaboration
Three common methods are:
2015
1. Delivering designs as well-organized PSD / AIs, developers interpret them independently and
then adjust / tune together with designers.
2. Creating component spec sheets covering all components
3. Creating style-guides / red-lines for a large set of screens & states.

51. Microsoft
1.
2015
1.

52. Microsoft
1.
We’ve found that we are most effective
when delivering AI / PSD files directly to
developers.
2015 Visual: http://www.alwayswithhonor.com/

53. Microsoft
1.
We’ve found that we are most effective
when delivering AI / PSD files directly to
developers.
2015
This works well with devs we have a long relationship with, where we
can deliver files, and iteratively tune and adjust together.
This way, time is spent on adjusting and tuning, instead of on
speculatively creating specs which may or may not get used.

54. Microsoft
2. Create component spec sheets covering all components
2015
2.

55. Microsoft
2. Create component spec sheets covering all components
2015
In large scale projects, with 100s of
screens, it is very useful to create a
spec that is component based.

56. Microsoft2015
3.
3.
of screens & states.

57. Microsoft
3.
of screens & states.
We also often create fairly exhaustive sets
of style-guides and red-lines for clients.
Often times, when confidence builds up
across teams, the amount of style-guides
produced decreases over time, and only
major new components are specced.
One of the problems is that there is a divergence
between the design and the red-line documents.
2015

58. Microsoft
Design & Development Collaboration
2015
3. Communicating about transitions / animations / behaviors
Visual: http://nineinchnails.tumblr.com/

59. Microsoft
Design & Development Collaboration
Demonstrating animations and transitions
can be time consuming, but there are a few
handy timesavers we use often.
2015

60. Microsoft
Design & Development Collaboration
To best describe an animation / transitions,
2 components are usually required:
1. A concise reference / demo / video
2. A short textual description of elements, movement and timing.
(might be affected by terminology)
2015

61. Microsoft
Design & Development Collaboration
Each animation can be demonstrated on
it’s own, with the best tool for the job.
2015
There’s no need to create a long ‘video’ demonstrating
a long series of animations.

62. Microsoft
Design & Development Collaboration
Sometimes it is a reference from another app, sometimes it’s a Flash / After
Effects animation, sometimes it’s something in Keynote.
2015
or use
Visual: https://dribbble.com/kingyo

63. Microsoft
Design & Development Collaboration
Keynote is a wonderful tool for
demonstrating sets of animations and
transitions, see this talk from WWDC for
reference:
2015
Prototyping: fake it till you make it.
WWDC 2014
Microsoft2015

64. Microsoft
Design & Development Collaboration
As with design details, tuning animation
requires collaboration between devs and
designers to tweak & fine-tune.
This means it’s best to budget that into the effort estimate for the task.
2015

65. Let’s take a look at 2 case studies:
2015 Microsoft
Design & Development Collaboration

66. Tawkon
2015 Microsoft
Design & Development Collaboration

67. Design & Development Collaboration

68. Tawkon
Green pulses

69. Design & Development Collaboration
Animatetoshowthesphereopening
Animatetoshowthesphereclosing
Slideinformationscreenupwardsfromthebottom
Slideinformationscreendownwards
SwitchtoSafari
Slideinformationscreenupwardsfromthebottom
Slideinformationscreendownwards

70. 2015 Microsoft
Part 03
Inspiration: Learning to appreciate
high fidelity implementation
Designing and developing products for multiple platforms

71. Microsoft
High fidelity implementation
To achieve optimal results, we need to adopt a commitment to excellence,
from maintaining a planned design in general, to working through and lots
of small interaction details.
2015

72. Microsoft
High fidelity implementation
Superb products are built by designers that are highly communicative
& dev teams that are highly collaborative and attuned to detail.
2015 Visual: http://jamzhang.com/

73. Microsoft
High fidelity implementation
We have the potential of doing great work when we collaborate with dev
teams that acknowledge the importance of placing significant effort on
front-end development.
and...
2015 Visual: http://www.puppygames.net/revenge-of-the-titans/

74. Microsoft
High fidelity implementation
We produce superb experiences when designers are able to
communicate and collaborate with these dev teams in an affluent, curious
& open manner.
2015 Visual: http://www.puppygames.net/revenge-of-the-titans/

75. Facebook Paper
2015 Microsoft
Inspiration
High fidelity implementation
Visual: https://www.facebook.com/paper

76. Egmont2014
High fidelity implementation
Visual: https://www.facebook.com/paper

77. Egmont2014
1. Elements move continuously with the finger, as
opposed to being pre-canned.
2. All elements are transitioned in and out
3. An element that goes back gets darker / is
overplayed with shadow
4. Content from the web is pre-loaded when possible,
and unfolds smoothly
5. Video plays smoothly behind text and icons, no
jumping frames, no flickering loading indication
6. Pulling down open views shrinks them back to
original form or folds them back into a thumbnail
smoothly
7. Pulling down views multiple times performs multiple
drill-outs, like hitting back several times, all very
fluidly, without interruptions or friction.
High fidelity implementation
Visual: https://www.facebook.com/paper

78. Clear
for iPhone, iPad, Mac
2015 Microsoft
Inspiration
High fidelity implementation
Visual: http://realmacsoftware.com/clear

79. Microsoft2015

80. 2015 Microsoft
Part 04
How to achieve these results?
Designing and developing products for multiple platforms

81. Microsoft
How to achieve these results?
Prototyping quickly & early, trying to get
the most experience impact with simple
prototypes.
2015
1

82. Microsoft
How to achieve these results?
We use Quartz Composer + Origami and
Framerjs for interaction prototypes where
animation and high FPS is needed.
2015

83. 2015 Microsoft
Origami is an extension to Quartz Composer built by Facebook.
It has a tricky learning curve, but it provides a way to build performant prototypes,
mixing media (video, images, sound) fairly easily.
Prototypes unfortunately run only on a Mac. (can be streamed to device with
LiveView / Duet Display)
How to achieve these results?

84. Framerjs extracts all layers from a PSD and reconstructs the same layout from
these images inside an html.
Prototypes are coded against the layer hierarchy, via Javascript / CoffeeScript.
Prototypes can run on a mobile device via a ‘player’ app.
2015 Microsoft
How to achieve these results?

85. Microsoft
How to achieve these results?
Hiding static comps below the implemented
UI and switching back & forth
Use apps like GluePrint or UberLayer
(see video on next slide)
2015
2

86. Microsoft
How to achieve these results?
2015

87. Microsoft
How to achieve these results?
Source tree + assets on Dropbox: allow
designers to refine by overwriting assets.
It works surprisingly well!
2015
3

88. Microsoft2015
How to achieve these results?
Storing app sources on Dropbox allows designers to continuously refine assets and
rewrite them right into the sourcetree, allowing quick turnaround of fixes.

89. Microsoft2015
How to achieve these results?
Developers and designers
working together.
Not waiting for QA time slots only or communicating via issue tracking.
4

90. Section name
Developer mindset Designer mindset
1. Strive for very high-fidelity implementation
2. Keen eye for small interaction details
3. Collaborative, open
4. Can-do-attitude
1. Well versed in target platforms
2. Decisive but recognizes a need for flexibility
3. Makes the right tradeoffs
4. Able to communicate through prototypes,
animations, references
2015 Microsoft
Ideal mindset:

91. Part 05
Discussion
2015 Microsoft
Designing and developing products for multiple platforms

92. 2015 Egmont
Thank you.
Guy Haviv
Partner, Design Director
Tel Aviv
Yoram Berkowicz
Chief Technology Officer
Tel Aviv