Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
-
Upload
anna-dahlstroem -
Category
Design
-
view
2.954 -
download
2
description
Transcript of Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
![Page 1: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/1.jpg)
Image courtesy of Shutterstock
Hands on tips for
Building device agnostic UX systemsby Anna Dahlström | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm
![Page 2: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/2.jpg)
Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/
![Page 3: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/3.jpg)
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
![Page 4: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/4.jpg)
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
“ We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. ”
- Source: Open Signal
![Page 5: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/5.jpg)
Designing bespoke mobile sites & experiences for different devices is a sure…
www.flickr.com/photos/ericconstantineau/5618576278
![Page 6: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/6.jpg)
It’s one of the reasons forresponsive design
www.flickr.com/photos/adactio/5818096043
![Page 7: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/7.jpg)
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
![Page 8: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/8.jpg)
This is NOT what a mobile user looks like
Image courtesy of Shutterstock
![Page 9: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/9.jpg)
Mobile Search MoMentSUnderStanding how Mobile driveS converSionS
3 of 4 mobile searches trigger follow-up actions
Mobile searches drive valuable
outcomes for businesses
Actions triggered by mobile search
also happen very quickly
of conversions (store visit, phone call or purchase) happening within an hour55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search
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 go77%
2.082.523.56
Travel FoodAutoBeauty Tech
2.072.20
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�
Shopping queries are 2x more likely to be in store
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
77% of mobile searches occur at home or work
17% of mobile searches occur on the go
![Page 10: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/10.jpg)
Many of us own multiple devices
![Page 11: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/11.jpg)
Commute
Sequential usage
Morning Work
“ 90% of users start a task on one device and then complete it on another. ”
- Source: Google
Simultaneous usage
+
Multi-taskingOR
![Page 12: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/12.jpg)
Commute
Sequential usage
Morning Work
“ 90% of users start a task on one device and then complete it on another. ”
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR
![Page 13: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/13.jpg)
Commute
Sequential usage
Morning Work
“ 90% of users start a task on one device and then complete it on another. ”
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
+
Complementing
OR
![Page 14: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/14.jpg)
https://www.flickr.com/photos/jfingas/10104822523
“ 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. ”
- Combined wise words from @oneextrapixel & @trentwalton
!
!
!
!
!
!
![Page 15: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/15.jpg)
http://foundation.zurb.com/docs/layout.php
“ Get your content to go anywhere, because it’s going to
go everywhere. ” - Brad Frost
![Page 16: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/16.jpg)
HelloDevice Agnostic Design
![Page 17: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/17.jpg)
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
![Page 18: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/18.jpg)
device browser screen input method connection speed
Any
anytime anywhereUsed
![Page 19: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/19.jpg)
An evolution of how we’ve always worked
![Page 20: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/20.jpg)
Define views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Footer
Additional info
Related products
![Page 21: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/21.jpg)
Break down content further & explore layouts
1 Header& Nav2 Filter & search
Product listing
1 Header& Nav
2Gallery
2Descrip-
tion
8 Footer
3Additional info
Product page1 Header& Nav
2Category
3Category
4 Category
9Categ
7Categ
10 Footer
Categories
7Prod
6Categ
5Categ
1 Header& Nav
2Features
11 Footer
Home
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
8Categ
6Prod
5 Prod
4Prod
3Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
19 Footer
7Prod
6 Prod
5Prod
4Prod
![Page 22: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/22.jpg)
Home - largeHeader& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2Features
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Features
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Header& Nav
Features
Footer
Home - small
Featured categories
Featured products
Do the same across screen sizes
![Page 23: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/23.jpg)
Break down each module into elements
Home - largeHeader& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2Features
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Features
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Header& Nav
Features
Footer
Home - small
Featured categories
Featured products
![Page 24: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/24.jpg)
Views
Home - large Home - small
Start identifying your building blocks & variations
![Page 25: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/25.jpg)
Views
Home - large Home - small
Start identifying your building blocks & variations
![Page 26: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/26.jpg)
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 27: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/27.jpg)
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 28: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/28.jpg)
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 29: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/29.jpg)
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 30: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/30.jpg)
Feature - large Feature - small
Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
![Page 31: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/31.jpg)
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products
Footer
![Page 32: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/32.jpg)
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products10
Prod9
Prod8
Prod7
Prod
Footer
![Page 33: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/33.jpg)
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Related products
Footer
![Page 34: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/34.jpg)
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
7Prod
6 Prod
5Prod
4Prod
Footer
![Page 35: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/35.jpg)
Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
![Page 36: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/36.jpg)
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
6Prod
5 Prod
4Prod
3Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
![Page 37: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/37.jpg)
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
6Prod
5 Prod
4Prod
10Prod
9 Prod
8Prod
7Prod
14Prod
13 Prod
12Prod
11Prod
18Prod
17 Prod
16Prod
15Prod
![Page 38: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/38.jpg)
Iterate & refine across views & key templates
Header& Nav
Footer
Filter & search
Product listing Product pageCategoriesHomeHeader& Nav
Features
Footer
Featured categories
Header& Nav
Footer
Categories
Header& Nav
GalleryDescrip-
tion
Additional info
Footer
![Page 39: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/39.jpg)
Gradually build your module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for: • Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
![Page 40: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/40.jpg)
Almost the same as lego
www.flickr.com/photos/toomuchdew/5243719740
![Page 41: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/41.jpg)
Re-use & sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740
![Page 42: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/42.jpg)
Re-use & sparingly do bespoke moduleswww.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
![Page 43: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/43.jpg)
It’s about content. Not what device we’re using.
![Page 44: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/44.jpg)
However…
![Page 47: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/47.jpg)
Screenshot: Screenshot: http://www.apple.com/uk/
“ And just as 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
![Page 48: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/48.jpg)
Responsive design has allowed us to adapt views & interactions
![Page 49: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/49.jpg)
Responsive design has allowed us to adapt views & interactions
![Page 50: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/50.jpg)
Responsive design has allowed us to adapt views & interactions
![Page 51: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/51.jpg)
Responsive design has allowed us to adapt views & interactions
![Page 52: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/52.jpg)
Each device is different. Make the most of it
![Page 53: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/53.jpg)
Each device is different. Make the most of it
![Page 54: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/54.jpg)
Each device is different. Make the most of it
![Page 55: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/55.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
![Page 56: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/56.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
![Page 57: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/57.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
![Page 58: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/58.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓✓ ✓ ✓
![Page 59: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/59.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓✓ ✓ ✓
✓
![Page 60: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/60.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓✓ ✓ ✓
✓ ✓
![Page 61: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/61.jpg)
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓✓ ✓ ✓
✓ ✓✓
![Page 62: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/62.jpg)
Content + Context =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
![Page 63: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/63.jpg)
Same, same…but different
![Page 64: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/64.jpg)
!
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.
![Page 65: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014](https://reader033.fdocuments.in/reader033/viewer/2022051610/548c53f0b47959dd0c8b62f1/html5/thumbnails/65.jpg)
Image courtesy of Shutterstock
Thank you. Questions?@annadahlstrom | www.annadahlstrom.com