Pinterest overhauled their mobile web experience to address negative user sentiment and poor performance. They built a progressive web app with features like app shell architecture, service workers, and normalization of data in Redux to improve consistency, performance and accessibility. This led to significant gains in key metrics like page load time, user engagement and mobile traffic. The new approach positioned Pinterest as a lightweight alternative to their native app and helped capture more low-engaged mobile users through an improved landing experience.

1. Pinterest
MobileWeb
@zackargyle
ForwardJS2018

2. Intro
PINTEREST
PLAYSTATION
VERISAGE
PINTEREST/SERVICE-WORKERS
ZACKARGYLE/REACT-BASH
ZACKARGYLE/REDUX-ASYNC-QUEUE
OPENSOURCE
ZackArgyle
ForwardJS2018

3. Outline
The
Implementation
The
Results
The
Story
ForwardJS2018

5. Invest in
Mobile Web
Upsell the
native apps

6. ForwardJS2018

7. Native App
ForwardJS2018

9. The
History
ForwardJS2018
DJ Later Aid :`) @Illvibras · 20 Sep 2016
Pinterest’s mobile web experience
is a nightmare
Daniel Speir @danielspeir · 4 Jun 2016
Hey, @Pinterest, your mobile web
experience is bullshit. Fix that.

10. The
History
ForwardJS2018
Emily Phillips @emjbanks · 13 Aug 2016
Pinterest is the portal to the worst
of mobile web UX
Owen Leonard @oleonard · 16 Mar 2015
Pinterest is an evil curse on the
mobile web.

11. The
History
ForwardJS2018
Sessy @sessyren · 6 Jan 2016
Pinterest on mobile web is so
fuckin’ annoying.
Illuminati Mess @geekylindsay · 25 Feb 2015
Wow, Pinterest is such a dick on
mobile Web

12. The
History
ForwardJS2018
Steph ⚛ C-137 @mentalina · 8 Jan 2018
Pinterest is the absolute WORST…
Bitch, I don't want to have to
download a goddamn app just to
look at pictures of cupcakes.

13. The
History
ForwardJS2018
Ahmed Zaki @zachiness · 20 Feb 2016
You have the stupidest mobile web
version. It's nonexistent, I don't want
to download your super fast stupid
app, @Pinterest. Suck it.

14. The
History
ForwardJS2018

15. Important
Lessons
ForwardJS2018
“Metrics do not measure sentiment”

16. Exciting
News
ForwardJS2018
Things have changed

17. ForwardJS2018
Light-weight alternative to native app
Capture low-engaged users
But why? Other than sentiment.
Better SEO landing experience

18. ForwardJS2018
Should I make my site
responsive? Or should I make a
separate mobile web site?
If you have more than 20 web engineers, make a
dedicated mobile web progressive web app.

19. ForwardJS2018
Features on desktop don’t break mobile
Less logical complexity
Reasons to Fork for Mobile
Additional surface for experimentation
Optimize for touch surfaces (phone/tablet)

21. Askyourself
Whatcanweenforce?
ForwardJS2018
Consistency
Performance
1
2
Accessibility3

22. Component
Library
ForwardJS2018
<Box shape=“rounded”>…</Box>
<Image src={…} color={…} />
<Text bold size=“lg”truncate>{…}</Text>
<Box dangerouslySetInlineStyle={{}}>

23. ForwardJS2018
<Masonry> <Box>
<Icon> <Image>
<Spinner> <Button>
<GroupAvatar>
Save
Component
Library

24. Enforced
Consistency
ForwardJS2018
<PageContainer>
FlowType
<FullWidth>
<TapArea>
createFeed(Options)
<FixedFooter>
<FixedHeader>

25. Touch
Optimizations
ForwardJS2018

26. Enforced
Performance
ForwardJS2018
createFeed

28. The
History
ForwardJS2018
Emily Phillips @emjbanks · 13 Aug 2016
Pinterest is the portal to the worst
bestest of mobile web UX
Revised

30. Redux
Normalization
ForwardJS2018
pin {
}
id
image
board {
name
owner {
}
}
original_pinner {
}
id
id
name
id
name

31. Redux
Normalization
ForwardJS2018
pin {
}
id
image
board {
name
owner {
}
}
original_pinner {
}
id
id
name
id
name

32. Redux
Normalization
ForwardJS2018
pins “1234567” { }
boards “9021000” { }id, name, owner
users “48151623”
“8675309”
{id, name }
{id, name }
id, image, description, board, original_pinner

33. Redux
Normalization
ForwardJS2018

34. Redux
Normalization
ForwardJS2018
Request Response Normalizr
Entity ReducerUpdate StoreConnect

35. ForwardJS2018

36. Redux
Normalization
ForwardJS2018

38. ForwardJS2018

39. Service
Workers
ForwardJS2018
ServiceWorker
Network
Website
Cache

40. Service
Workers Register
bundle.js
😍
ForwardJS2018

41. PWA
Features
ForwardJS2018
AppShell Notifications Offline

42. PWA
Features
ForwardJS2018
BackgroundSync
ImageCaptureAPI
1
2
WebShareAPI3
CredentialManagementAPI4
DeviceMemoryAPI5

43. The
History
ForwardJS2018
Ahmed Zaki @zachiness · 20 Feb 2016
You have the stupidest bestest mobile web
version. It's non existent, I don't want
to download your super fast stupid
progressive web app, @Pinterest. Suck it Love
it!
Revised

44. ForwardJS2018
?
The
Results

45. ForwardJS2018
“Beware legacy assumptions.”
Important
Lessons

46. Performance
Metrics
ForwardJS2018
Metric Old Mobile Web New Mobile Web
TTFP
(Time to first paint)
4.2s 1.8s
TTI
(Time to interactive)
23s 5.6s
JS Bundle Size 620KB 150KB
CSS Bundle Size 150KB 6KB inlined

47. Performance
Metrics
ForwardJS2018

48. Performance
Metrics
ForwardJS2018

49. Performance
Metrics
ForwardJS2018

50. Performance
Metrics
ForwardJS2018

51. MobileWeb
Metrics
ForwardJS2018
Metric Mweb Increase
Pin Impressions +250% Y/Y
Ad Impressions +400% Y/Y
Signups +380% Y/Y
Logins +150% Y/Y
Repins +200% Y/Y
Time Spent +160% Y/Y

52. Bonus
Links
ReactRally2017
PWA Performance Case Study
Fast By Default (Chrome Dev Summit)
Flexible PWA Libraries
pinterest/service-workers

53. Thanks!
ForwardJS2018
@zackargyle