Building Successful Websites: Case Studies for Mature and Emerging Markets (Google I/O ’19)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[MUSIC PLAYING] AANCHAL BAHADUR: Good afternoon. Thank you all for being here. You're almost through day one of I/O, so we're really, really glad that you're here. I'm Aanchal. I work on the product partnerships team here at Google and I support Chrome. Our goal is to help developers like all of you build great websites so you can be successful and make those experiences for everyone everywhere. While framing the context of this talk, I was naturally inclined towards anchoring it on the core benefits of the web-- its massive reach, frictionless access, and the fact that a website just works no matter where you are. You could be on the fastest internet connection or you could be busy playing the offline dino game-- it just works. And yes, this is what has kept the foundation of the web solid and steady for over 30 years. But there's so much path-breaking development that's happened in the past few years. With service workers and Progressive Web Apps, or PWAs, things are changing. Just by making small changes, developers across the world are seeing that they're delighting their users, they're finding new ones, and they're ultimately seeing great results. Here are some examples of this. Tokopedia, the biggest marketplace platform in Indonesia, is seeing that by using a combination of AMP and PWA, they're seeing five times higher conversions on their website. And if like me, you enjoy listening to music, you can do that on Spotify on a Chromebook on their Progressive Web App on desktop, and they're seeing higher engagements from these installed PWAs. In Brazil, Terra or "Te-ha," a news publisher, has seen that users are sharing more articles after they implemented the Web Share API. And Bücher, or Büch-- Bücher, I might have messed that up. I apologize to anyone who speaks German. But a leading German books and media retailer has a top performing PWA, and they use Trusted Web Activities as a building block for their Play Store experience. These core values of universal reach and reliability, when you combine them with the new superpowers, they can help you solve real world problems for all your users. Let's walk you through my daily routine as an example. So the first thing I do when I wake up, even before the caffeine kicks in, I check my email, messages, what's going on in the world, what's happening back home in India. And sometime during the day, I hit my lowest productivity hour, and after a heavy lunch, I go onto social media and I ask some very profound questions. That's still bothering me, by the way. And then, once I go home, I obviously sit on my couch and am binge watching the latest episodes of some show. That's a crazy routine. It goes against everything they tell you about digital well-being, so please remember to hit Pause every once in a while. Here's a quote from someone who lives and breathes the internet. The point is I'm in this business, but when I wear my user hat on as a user, all I want is a fast, seamless experience. I don't care how I would have consumed that news, those tweets, or those shows-- I just want it to be seamless. As developers, all of you have a choice-- which of the superpowers will you use that will delight your users? You have different locations that your users are present in, different markets, mature, emerging markets, different connection types, low-end devices, the fastest smartphones-- you're building for everyone, and so it's important to keep that in mind as you look to be successful in the long term. There are developers amongst you who have made some great choices to delight their users. Let's talk about Twitter's web experience. I remember when Twitter shipped their PWA two years ago. It was a turning point in the broader adoption of PWAs. I had heard many reviews about the Twitter experience, the new PWA being light, fast, and everybody was just really happy using it and not all these people worked at Google. These folks used the new capabilities of the web across mobile and desktop, and they're able to do this all in one codebase, which has resulted in business outcomes. Sometimes a focus on performance can make all the difference. The Times Group, the largest media conglomerate in India, has seen that by just having a laser sharp focus on performance, a lighthouse score that is always at 100, they're seeing business outcomes and they're doing this in a remarkable way. And then finally, Hulu, an online streaming service, identified an opportunity that was almost entirely based on user feedback. Their users were saying things about a great website, but they were complaining about it not being installable. And so they brought the two worlds together, built a desktop PWA, and now they're-- and it's not been too long, but they're already seeing great business results. Wouldn't it be cool if these companies were here to tell you their stories in their own words? So as you applaud me for my genius setup, please welcome Jesar and Charlie to tell you about Twitter. [APPLAUSE] JESAR SHAH: Hi everyone. My name is Jesar and I'm a product manager on the web team at Twitter. CHARLIE CROOM: And my name's Charlie. I'm one of the engineers who helped build Twitter's new PWA. JESAR SHAH: And we are very excited to be here today to talk about Twitter's journey of building one universal web app to serve people in both emerging and mature markets. So Twitter is the platform to find out what's happening. Our mission is to serve the public conversation. That starts with giving everyone the access to create and share ideas and information instantly. One of the ways we aim to do this is by building experiences that are available to people no matter what device they use. So we were here in 2017 to talk about one of those experiences-- our mobile website that we had just launched as a PWA. But a lot has changed since then. Twitter's PWA has grown since 2017, and is also more powerful now. We're available on almost every browser and almost every operating system. This wide reach spans a huge diversity of use cases, customers, and devices, so this, for us, prompted a fundamental shift in how we build our web experiences. We viewed our Twitter users as our customers and we wanted to ensure we were building a universal app that was responsive to their diverse needs. One of the major benefits of building a universal app is that it allows us to build once and ship to everyone in one single codebase. Our users benefit from regular updates and consistency across platforms, which makes a better Twitter experience overall. And, organizationally, this allows us to move faster as a team and have more focus on the things that matter most to our users. So in order to achieve our vision of building a universal app, we needed to extend the functionality of our PWA to all devices. There are a lot of devices out there, some of which are on the screen, and the team brainstormed dozens of things that we needed to improve. We built our roadmap by launching smaller units of work and getting public feedback at each step of the way to help us iterate and improve on the user experience. We started with the mobile logged in experience and have worked our way through, replacing some of our legacy desktop apps with the PWA. At each milestone, we considered what was unique about the set of customers that we were adding. How did they access Twitter differently, and how can we meet their needs through the web product? In particular, when we did research across devices and markets, we found a difference between mobile and desktop use cases. Mobile web is expected to be fast, lightweight, and cost effective. People tend to use mobile web when they're on the go or looking for quick information on Twitter. Desktop web, on the other hand, is expected to be more powerful, task driven, and additive to the mobile experience. People tend to use desktop web in a stationary setting with more time and intent to consume and create conversation on Twitter. So, given the differences that we saw between mobile web and desktop web, we needed to pick one as a starting point. We know that the majority of our users on Twitter use mobile devices to access the public conversation every day, so with that in mind, we decided to start with mobile first. It offered the largest opportunity for growth for us and also the most room to improve technically. We know that there are several barriers to using Twitter on mobile, including poor connectivity, slow mobile networks, expensive data plans, and also low storage on devices. So in 2017, we launched our first iteration of the PWA, branded as Twitter Lite. It was faster, lighter, and engaging, giving our users the best Twitter experience at a lower cost-- hence the name "Lite." In order to serve the global conversation, we need to make sure that Twitter is available to everyone, and our PWA is helping us do just that. And since then, we've been growing Twitter's user base with the help of the PWA. Tweets sent from the PWA have increased by nearly three times since the launch. And our users love the PWA as well. They're each using it for different reasons, from data constraints to storage constraints. We wanted to increase the discoverability of the PWA, so we decided to list it in the Play Store, which is where our users went to look for apps. Since it was 2017, we did this via a WebView wrapper, which helped us achieve the level of discoverability we were looking for and essentially reach our users. When we did this, the install size was much smaller than our Twitter for Android app, which was a huge win for our data and storage constrained customers. We also saw over 5 million installs of the app from the Play Store since launch, which increased the number of people who have the PWA on their device. So by listing it in the Play Store, we were able to increase discoverability, which allowed us to reach more people and grow our user base. Listing it in the Play Store also gave us visibility into how our users perceived our app at scale. The reviews and ratings across countries and languages increased our ability to find gaps in the user experience. That's especially important when you're building a global product from San Francisco, like we are. And today there are a lot more options for distribution. We started with Add to Home Screen, used a WebView wrapper to bring our PWA to the Play Store, and have also used PWA builder to bring PWA to the Windows desktop. We're now exploring using Trusted Web Activity as a building block instead of the WebView. All these options mean that whenever a customer looks for Twitter, there's a way to install it and keep it on their device to help us grow our user base. CHARLIE CROOM: So all these distribution mechanisms mean there's even more ways to access the Twitter PWA. And as Jesar mentioned, we want to think about how our customers are different. But technically, we can go one step further and think about how their devices are different as well. Though we started by building the mobile experience, our goal has always been to create a richer, faster experience for all of our users, and today I want to talk about how we did that for desktop from a technical perspective. So this is the traditional way that you might start thinking about how to create a responsive experience for your users. You'd segment the desktop users on one side and the mobile users on the other. But this method doesn't really capture the level of nuance that exists in the world today. Many people use physical keyboards with their phones or live in places where wired internet, as you might have on a desktop, is actually slower or more expensive than their wireless connection. Instead, we thought about our users and their devices in a different way. Instead of looking at it device level, we broke down the properties of their devices and treated them as parameters into our application. And I think that this is a really great way to think about your PWA and how you build it. What's the output of an app when the internet is 2G? How does usability change when a mouse or a keyboard is detected? What about if the device is low on memory or just doesn't have a lot of memory to start with? Using these techniques is one of the reasons we decided to keep Data Saver available on the new Twitter.com desktop site. We recognize that there are many people in the world who can benefit from this, even if they're on a larger screen experience. Perhaps the most important tool to help us make these changes wasn't even a web API. It was actually a design pattern. Our awesome designers have worked tirelessly to help us standardize the way we use small, repeated elements across the site, like the button you see here. And it means that any time we're working on a new page or a new feature, the method for implementing this is not only very clear design wise, but it's well documented and easy to drop in code wise as well. And what I've discovered is that the concept of progressive enhancement-- it really lends itself to merging components and parameters. On Twitter, we have a ton of floating action buttons, and these allow you to do things like compose a tweet, reply to someone, or create a new list. And any time we use these throughout our codebase it's always the same single component. So, when we worked on bringing our PWA to feature phones like you see here or other smaller devices, we found the floating action button was often in the way-- it was too big, it was hard to get to without touch support. And so, instead of using that button, we used the smaller action bar, and this was powered by the extra physical keys that those smaller devices have. So I want to show you how easy this was to do. We use React at Twitter, so that's what I'm showing here, but you could do this with any component-based framework. The gist is that we have our floating action button component, and if we detect that the user agent is a feature phone, we instead simply render a soft button bar. And what's fun is that this is really the code we use. We have a few more properties, but it is this easy to alter functionality throughout the entire website. And I think that this is a really neat example of progressive enhancement, because it helps the developer make things more easily and provides benefit to your users as well. And we use this pattern to help us create better desktop experiences. For instance, when using an overflow menu, on mobile you see it as an action sheet. Well, on desktop, it presents instead as a dropdown. On larger screen devices, we can take advantage of all that extra screen real estate to show related content alongside a screen. This adds on top of the mobile experience. We can even go one step further and show two screens side by side, like your DM inbox and a particular message view from your DMs. This makes navigation easier and more powerful for our users. Finally, because we've been iteratively experimenting with desktop, we got feedback along the way that the wide screen design didn't take full advantage of all the things that make desktop unique and powerful compared to mobile. Based on this, we've been experimenting with newer designs that allow easier access to features customers care about, like lists, bookmarks, and more to come. So we hope our journey can inspire you to build a single codebase PWA, and we have a few tips we hope will help get you started. First, progressive enhancement isn't just about the APIs you use. It's for the way you design, the way you roadmap, and the way you think about your product as well. Next, make sure to get your core experience right first. Ensure that the code that everyone sees is the very best code that you write. Also, think not just about the users, but their devices and the properties of those devices. And, finally, use those properties to create a responsive experience that adapts to the diverse needs of each user. So Jesar and I didn't do this alone. It takes a village to make something this large. So a huge thanks to the entire team back at Twitter. [APPLAUSE AND CHEERING] As you might have noticed, a few of them are in the room today, and so we look forward to hearing from you. We really love working on this PWA and we truly hope that you enjoy using it. And now, I'd like to welcome Rudra onstage to tell you more about how Times Internet builds for their users in India. [APPLAUSE] RUDRA KASTURI: Thank you, Charlie. That was a great show. Hi everyone, namaste from India. I'm Rudra Kasturi. I'm growth at the Times Group. I'm very excited to be here to share Times' web success story with all of you. At Times Group, we build products for all segment of users as we touch their lives in every day in different ways. Some of these are just not products, but iconic brands in their own right. Our business is large and spread across multiple use cases like news, languages, music, OTT-- you name it, at Times Group we have a business around it. Now, this comes with huge growth opportunities and unique challenges. A recent study states that internet users in India will almost double alongside smartphones' growth in next three to four years. But the reality is, the majority of these users are on slow connections on low-end devices with low storage capacity. And if those constraints aren't enough, language is also a key consideration when building for these users. There are over 200 languages spoken in Indian subcontinent, with different scripts and dialects. We have seen our Hindi users have surpassed English and are growing at 94% year on year. This is where we have identified a huge opportunity. As I said earlier, at Times Group, we build products for everyone. So we focused on improving that user experience on our Hindi property Navbharat Times, or we local call it as NBT. NBT has been delighting users since 1947 and today, we proudly serve 65 million users on web. But most of these users are in small cities with poor connectivity. Keeping this in mind, we built NBT PWA, which is fast, light, and reliable. My team contributes to the growth and revenue for the company, so our PWA is built on two pillars-- performance and engagement. Performance is critical for all businesses in India and, of course, across the world, but every second delay on page load, we lose substantial traffic. So we have performance budget which ensures we don't exceed this limit on each page. We have a maximum JS bundle size and totally [INAUDIBLE] and a specific load time to ensure our time to interact to always stays under five seconds on most of the networks. And we also have a system in place if any of this limit is crossed, we have an electric system that triggers and identify the issue and we quickly implement to fix it. As an example, we use webpack-bundle-analyzer that helped us to reduce our JS file size by 70% over the past few months. As a media site, we depend heavily on images, so we used Intersection Observer to prioritize and lazy load images, ensuring that right images are loading on the right time. And we don't want our users to see any blank screen or an offline dino when they're offline. So we have used caching strategies using Workbox so user can still consume top 20 stories on NBT when they're offline. With all the great effort, we launched NBT PWA-- super fast, super light, and instant loading. I love this screenshot. And we use Lighthouse as a source of truth to measure this performance. And now, our pages are super fast. Now, we want to ensure that our users to stay engaged more and consume more content. Keeping this in mind, we used Add to Home Screen prompt that works to prompt the user when they're most likely to install, typically during breaking news or a big event in India like elections, budget, [INAUDIBLE] and so on. We want to earn the love of our users, so we let them experience our PWA first before asking them to install it. And the best part-- our marketing teams don't have to spend a thing. They don't have to spend a thing here, because our average spend to install an Android app is ranged between 4,200 rupees. Depends on the quality of the user you acquire, which is about $1 or so. PWA installs are absolutely free. And the biggest achievement with this is we have driven engagement higher by almost 50%. And, finally, we used Web Share API that triggers the Android need to share dialog to give users control over how and where the data is shared. Since launching it, we have seen increase of 24% users coming to NBT while they shared posts. With all of these, we have seen incredible wins on NBT PWA. We saw a stunning 72% increase in acquiring new users, and we achieve our engagement goals by increasing the average time spent by 31%, which means that users are sticking around for longer sessions, watching more videos, and consuming more content. And finally-- I love this slide-- there was a clear revenue impact for NBT, as we recorded 59% increase in our network revenue. There is no magic bullet. [APPLAUSE] There is no magic bullet here. Keeping performance and engagement as our key focus areas, we are able to achieve these results. Also, we did the impossible. I'm sure most of you know Alex Russell, the tech lead for PWA. When he saw NBT PWA trace, he went and tweeted this. [APPLAUSE] Thank you, Alex. So if you're wondering where we want to take our development effort next, with incredible wins from NBT, we have launched PWA in six more languages-- Telugu, Tamil, Marathi, Malayalam, Kannada, and Bengali languages-- and across multiple brands such as the Economic Times, the biggest business news in the country, Gaana, our music streaming service, Dineout, our table reservation service, and many more. We strive to be at the forefront of web development, so we have used Trusted Web Activities as a building block for our Android offering. Ladies and gentlemen, I'm super excited to announce on this stage for the first time NBT 2.0. [APPLAUSE] Attracting and retaining app users is a tough problem for users on low-end devices with low storage capacity. In such scenarios, smaller apps seal the deal. Using Trusted Web Activities, we have created a lighter experience for the users on low-end devices. We are now able to offer an experience that is less than 1.2 MB and five times faster to install. You can all catch this lighter experience on web sandbox. Please [INAUDIBLE]. And finally, I would not have this opportunity to present these amazing business outcomes if it hadn't had been for the team. A huge thanks to all of them on the screen and the Google team who helped us to achieve these results for them behind the screen. [APPLAUSE] I would like to fall on stage Matt from Hulu to explain PWA's success story on the desktop. [APPLAUSE] MATT DOYLE: Thank you, Rudra. Good afternoon, everyone. My name is Matt Doyle and I'm a product manager at Hulu. Hulu is the fastest growing streaming service, offering live and on demand TV and movies in the US with over 28 million subscribers. We are home to acclaimed Emmy Award-winning Hulu original series "The Handmaid's Tale" and Oscar-nominated documentary film "Minding the Gap." My team's mission at Hulu is to ensure that the Hulu experience is especially tailored to every single device that we're on, whether it's the TV in your living room, the computer you're using right now, or the phone in your pocket. And today, I'm going to talk to you about Hulu on desktop. In September of last year, we relaunched Hulu.com. It was built from the ground up with a brand new UI and in a modern tech stack using Node and Next.js. And just last month, we were awarded the 2019 People's Voice Webby Award for Best Media Streaming Website. [APPLAUSE] As we heard from Twitter, the beauty of developing for web is to build once and ship to everyone. So my team's work was done, right? Well, not quite. It turns out we didn't quite ship to everyone. You see, we'd developed a universal Windows Platform Application for desktop in 2015 and, since then, it's gone largely untouched. It was built on our old stack, lacked a ton of features, didn't have live TV, and the reviews weren't that great. But if there was one positive that we could take away from what our viewers were saying about our legacy app, it was that our new website was better. At Hulu, we actually saw this as an opportunity to try something new. And that's what I'm going to talk to you about today. We began by asking ourselves, why did our viewers keep coming back to this legacy application, even though it lacked so many features? Well, simply put, it was installable. Hulu viewers loved having their favorite TV shows and movies just a tap or click away without having to go through their browser, and we know that having Hulu on a user's home screen drives repeat visits and increased engagement. This is when we had our light bulb moment-- desktop PWA. Leveraging the fundamental PWA components would allow us to replace the legacy app and would also allow us to iteratively test PWA without rolling out to all of our viewers. So where do we start? Well, we chose to start small-- a basic PWA made up of a web app manifest and a service worker. Simple enough, right? Just two things. Well, we actually found there were quite a few challenges in these two components. Here are some decisions that we made that might help you when you approach your own PWAs. The first was scope. We used the ability to set the scope of our service worker to allow us to incrementally roll out our PWA. We scoped the server worker to its own path at Hulu.com/app. Then we pointed a native app wrapper to this path. This allowed us to seamlessly migrate users from the legacy app to the new Hulu desktop PWA without impacting the entirety of Hulu.com. Here's what that looks like in our web app manifest. We plan to continue to utilize this approach to incrementally test PWA through the web browser as well, and it's an approach that all of you can take to roll out PWA to your users. Second, service worker installation. We had to decide when service worker installs would become effective. Since tab hoarding is pretty common on desktop, and I know some of you are guilty of this up here, we chose to skip the waiting phase. Here's what it looks like in our service worker. Choosing skip waiting ensured that the latest version of the service worker was installed even when users don't close their tabs. We referred to the service worker lifecycle developer documentation to pick the approach that was best for us. And finally, caching. The caching strategy is going to determine what the offline experience looks like for your users. Do you want to show them a cached version of your home page or display something completely different when your users are offline? At Hulu, we have a live TV service, and it's important that the data that we display to our users is fresh all the time. So, at Hulu, we took a network-only approach for domains associated with these services. This approach works really well for items with no offline equivalent. When building your own PWAs, it's important to select the caching strategy that works best for your application. And at Hulu, we continue to explore new avenues to provide the right offline experience for our viewers without negatively impacting the timeliness they expect from a live TV service. So now, the big question-- how long did all of this take? Well, getting to a baseline PWA took just one developer only two weeks to research, build, QA, and release. That's just one sprint for my team. We literally couldn't have done it any faster than this. [APPLAUSE] And this is what it looks like. Once installed, the Hulu PWA behaves just like any other application, and now it's just a tap or click away-- no need to sift through a forest of tabs. And we were able to deliver this experience to our viewers with very little effort and consolidate another codebase in the process. Now, when we ship a feature on Hulu.com, we can say we can truly build once and ship to everyone on desktop. And since launching the PWA in January, it's been doing great. In just three short months, we successfully migrated 96% of all of our legacy app users to the new Hulu PWA. We saw a 27% increase in return visitors and a 5.5% increase in engagement. But I'll tell you, the best thing was that our viewers are loving the app. At Hulu, we care about every single one of our viewers, and feedback like this is better than any other KPI. Discoverability of desktop PWAs has never been easier. Current Hulu subscribers can try the PWA today by visiting Hulu.com/app using Chrome. Simply click on the Add to Home Screen prompt to add Hulu to your computer. And soon, you'll be able to add PWAs directly from the omnibox in Chrome. All of this has given us the confidence to invest further in PWA technology at Hulu. And, in the coming months, we're going to be adding support for push notifications, media keys and media session API, and an enhanced offline experience because, although we all love trying to beat our high score in the dino game, we think that we have an opportunity to provide an even better offline experience for Hulu subscribers enabled by PWA technology. We're going to use offline as a way to drive awareness for the latest Hulu original series, and we're going to experiment with offline media caching to provide trailer playback even when a user doesn't have an internet connection. At Hulu, we are just getting started with PWA, and we look forward to bringing all of these features and more to our viewers soon. And finally, I wanted to give a big thanks to the entire Hulu web team, without whom we couldn't deliver this amazing experience for our viewers. Thank you all so much, and back to Aanchal to wrap it up. [APPLAUSE AND CHEERING] AANCHAL BAHADUR: Summarizing months of hard work in just 10 minutes is no easy task, so as a measure of how amazing they are, can you please give them a loud cheer and a huge round of applause? [APPLAUSE AND CHEERING] Lighthouse score 1,000. I'm sure you've been listening intently for the past 30 minutes. That was a lot of information, and so I'm going to quickly recap for you. Take your phones out, take photographs, and if you're watching us on the livestream, screenshots. Twitter showed us that, by building a responsive experience in one codebase, you lower development costs, you create engineering velocity, and you increase the number of tweets that they had sent by almost three times. This is a direct business outcome for Twitter. Times builds for the next billion users. With a laser sharp focus on performance and a tracking system that breaks if you don't hit that 100 on Lighthouse, they've successfully earned the love of their users. Across different languages, their PWA has contributed to 59% increase in ad network revenue-- a direct business outcome. And, finally, if there's one thing you take away from what Matt said, listen to what your users are saying. They might be giving you some feedback that might really be helpful for you as you make development choices. So look at your legacy apps, some that you might have ignored for a while. Use the web super buzz, and create delightful experiences just like Hulu's PWA on desktop. It's still early days, but Hulu's PWA is loved by their users, and they're seeing an increase in 27% for return visitors. And engagement is also on the rise at about 5 and 1/2%-- it's just been a few months. These are direct business outcomes for Hulu. And, finally, as a user, it's not that I don't care. I trust you to make the right choices so I can have a delightful daily routine. I can continue asking profound questions. So thank you very much. Take a look at your business, see how PWAs can help you. We've got material when you're ready up on web.dev, so this is a good one to take a photograph of. Or did your site, Lighthouse has your test against various benchmarks, or just come talk to us at the web sandbox and if you're watching online, you can leave a comment or a question below and we'll get back to you. Can't wait to see what you all build. Thank you very much. [APPLAUSE] [MUSIC PLAYING]
Info
Channel: Google Chrome Developers
Views: 11,224
Rating: undefined out of 5
Keywords: type: Conference Talk (Full production);, pr_pr: Google I/O, purpose: Educate
Id: 3As9NibdIjk
Channel Id: undefined
Length: 37min 14sec (2234 seconds)
Published: Wed May 08 2019
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.