Slides from my talk at GeekGirl where the theme was 'From Web to Watch-Designing a multiplatform UX system' http://www.geekgirlmeetup.co.uk/blog/

1. Image courtesy of Shutterstock
Hands on tips for
Building device agnostic UX systems
by Anna Dahlström | @annadahlstrom
GeekGirl London, 28 Oct 2014 #ggm

2. Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/

3. Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/

4. “ We have seen 18,769 distinct devices
download our app in the past few months.
In our report last year we saw 11,868. ”
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
- Source: Open Signal

5. Designing bespoke mobile sites &
experiences for different devices is a sure…
www.flickr.com/photos/ericconstantineau/5618576278

6. It’s one of the reasons for
responsive design
www.flickr.com/photos/adactio/5818096043

7. http://foundation.zurb.com/docs/layout.php
“ Design & development
should respond to the user’s
behaviour & environment based
on screen size, platform &
orientation. [It’s]...a mix of
flexible grids & layouts, images
& an intelligent use of media
queries. ”
- Smashing Magazine

8. This is NOT
what a mobile user looks like
Image courtesy of Shutterstock

9. Mobile Search MoMentS
UnderStanding how Mobile driveS converSionS
Mobile search is always on, happening
on the go, at home and at work
of mobile searches
occur at home or
work; 17% on the go 77%
0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[WV
Shopping queries are 2x more likely to be in store
Mobile searches drive valuable
outcomes for businesses
3 of 4 mobile searches
trigger follow-up actions
Actions triggered by mobile search
also happen very quickly
of conversions (store visit,
phone call or purchase)
happening within an hour 55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product shopping searches have a
higher number of outcomes
Number of follow-up actions per mobile search
3.56 2.52 2.08
2.20 2.07
Beauty Auto Travel Food Tech
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
77% of mobile searches
occur at home or work
17% of mobile searches
occur on the go
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html

10. Many of us own
multiple devices

11. “ 90% of users start a task on one device and then complete it on another. ”
Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
OR

12. “ 90% of users start a task on one device and then complete it on another. ”
Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR

13. “ 90% of users start a task on one device and then complete it on another. ”
Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR
+
Complementing

14. “ Today’s popular devices aren’t tomorrow's so
building something which works on any device is better than
building something which works on today’s devices. ”
https://www.flickr.com/photos/jfingas/10104822523
- Combined wise words from @oneextrapixel @trentwalton
!
!
!
!
!
!

15. http://foundation.zurb.com/docs/layout.php
“ Get your content to go
anywhere, because it’s going to
go everywhere. ”
- Brad Frost

16. Hello Device Agnostic Design

17. “ The site you build is not dependent on
knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock

18. device
browser
screen
input method
connection speed
Any
Used anytime
anywhere

19. An evolution of how we’ve always worked

20. Define views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Featured products
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Related products
Footer

21. Break down content further explore layouts
Product listing
1 Header Nav
2 Filter search
Product page
1 Header Nav
2
Gallery
2
Descrip-tion
3
Additional info
8 Footer
Categories
1 Header Nav
2
Category
3
Category
4 Category
9
Categ
7
Categ
10 Footer
7
Prod
6
Categ
5
Categ
Home
1 Header Nav
2
Features
3
Category
4 Category
6
Categ
11 Footer
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
8
Categ
6
Prod
5
Prod
4
Prod
3
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod
19 Footer
7
Prod
6
Prod
5
Prod
4
Prod

22. Home - large
Header Nav
Features
Featured categories
Featured products
Footer
1 Header Nav
2
Features
3
Category
4 Category
6
Categ
11 Footer
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
Home - small
1 Header Nav
2
Features
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
10 Footer
Header Nav
Features
Featured
categories
Featured
products
Footer
Do the same across screen sizes

23. Break down each module into elements
Home - large
Header Nav
Features
Featured categories
Featured products
Footer
1 Header Nav
2
Features
3
Category
4 Category
6
Categ
11 Footer
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
1 Header Nav
2
Features
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
10 Footer
Header Nav
Features
Footer
Home - small
Featured
categories
Featured
products

24. Start identifying your building blocks variations
Views
Home - large Home - small

25. Start identifying your building blocks variations
Views
Home - large Home - small

26. Start identifying your building blocks variations
Views Modules
Feature - large Feature - small
Home - large Home - small

27. Start identifying your building blocks variations
Views Modules
Feature - large Feature - small
Home - large Home - small

28. Start identifying your building blocks variations
Views Modules
Feature - large Feature - small
Featured products - large Featured products - small
Home - large Home - small

29. Start identifying your building blocks variations
Views Modules
Feature - large Feature - small
Featured products - large Featured products - small
Home - large Home - small

30. Start identifying your building blocks variations
Feature - large Feature - small
Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules
Home - large Home - small

31. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Featured products
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Related products
Footer

32. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Related products
10
Prod
9
Prod
8
Prod
7
Prod
Footer

33. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Related products
Footer

34. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
7
Prod
6
Prod
5
Prod
4
Prod
Footer

35. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Products
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Footer

36. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Footer
6
Prod
5
Prod
4
Prod
3
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod

37. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Footer
6
Prod
5
Prod
4
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod

38. Iterate refine across views key templates
Home Categories Product listing Product page
Header Nav
Header Nav
Filter search
Features
Footer
Featured categories
Footer
Header Nav
Categories
Footer
Header Nav
Gallery
Descrip-tion
Additional info
Footer

39. Gradually build your module library
Feature - large Feature - small
1
3
4
Featured products - large Featured products - small
Also used for:
• Module REL01 - Related products
Single product - large Single product- small
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1

40. Almost the same
as lego
www.flickr.com/photos/toomuchdew/5243719740

41. Re-use sparingly
do bespoke modules
www.flickr.com/photos/toomuchdew/5243719740

42. Re-use sparingly
do bespoke modules
www.flickr.com/photos/toomuchdew/5243719740
www.flickr.com/photos/toomuchdew/5914351500
www.flickr.com/photos/toomuchdew/5148233898
www.flickr.com/photos/toomuchdew/3792159077
www.flickr.com/photos/toomuchdew/3792972952

43. It’s about content.
Not what device we’re using.

44. However…

45. Screenshot: https://moto360.motorola.com/

46. Screenshot: Screenshot: http://www.apple.com/uk/

47. Screenshot: Screenshot: http://www.apple.com/uk/
“
A
n
d
ju
s
t a
s
the first wave of desktop apps ported to
mobile were underwhelming and replaced by mobile-first
applications, so will companies quickly realize that it isn’t
just a new screen but a brand-new platform. ”
- Source: Techcrunch

48. Responsive design has allowed us to
adapt views interactions

49. Responsive design has allowed us to
adapt views interactions

50. Responsive design has allowed us to
adapt views interactions

51. Responsive design has allowed us to
adapt views interactions

52. Each device is different.
Make the most of it

53. Each device is different.
Make the most of it

54. Each device is different.
Make the most of it

55. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified

56. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓

57. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓

58. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓

59. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓

60. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓ ✓

61. Each device is different.
Make the most of it
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓
✓ ✓

62. Content + Context =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592

63. Same, same …but different

64. !
Your starting point should be any device.
Then consider the role of each device - its strengths
weaknesses, how it supports user business needs,
as well as the part it plays in delivering the experience.

65. Thank you. Questions?
@annadahlstrom | www.annadahlstrom.com
Image courtesy of Shutterstock