7 Google Web Design Resources to Improve your UX
A list of resources to squeeze as much value out of web development investment as possible
Most of my career has been centered around designing web experiences and finding opportunities to make them better. I have had the opportunity to work with some of the best web development teams across every imaginable industry. Every team I work with has their own set of unique problems and resource constraints. At times it can seem overwhelming to build a web experience that is intuitive, reliable, fast, and engaging. But with all of the free resources out there today it has never been a better time to invest in the web. This list of resources will help you and your team squeeze as much value out of your web development investment as possible.
1. Web.Dev & 2. Lighthouse
When you spend countless hours looking at your website, it can be easy to miss opportunities for improvement. Sometimes it’s difficult to find out why a particular page is rendering slow. The best way to make improvements is to step back and get another perspective. Web.Dev is for every web development team out there. The heart of Web.Dev is Lighthouse—an open-source, automated tool built to improve the quality of your web pages. You can run a Lighthouse audit against any web page. This tool provides a detailed report on performance, accessibility, progressive web apps, and more. Auditing your own experience has never been easier. Your team should consider setting cross-functional goals and directly add Lighthouse recommendations to your product backlog. If performance is on your roadmap (it should be), then this tool will become your best friend. If you still want more resources to improve your site speed check out this full breakdown.
Recommended benchmarks:
< 2s First Content Paint (FCP)
< 3 Speed Index (SI)
< 5 Time to Interactive (TTI)
Who is it for? — Everyone. Product Managers. Engineers. Designers. Marketers.
3. Gallery
One of the most critical parts of designing a successful website is to get peer and user feedback. Gallery makes it easy to organize and collaborate on product designs. This material design powered project is a must for any UXer. This collaborative tool allows you to upload design work, get feedback, and track revisions — quickly and efficiently. The UI could not be easier to use, especially if you are a gSuite user. As a bonus this tool is available for ANDROID and IOS.
Who is it for? — Designers & Product Managers
4. Workbox
Looking to build a progressive web app? Workbox makes it easy to get started. As PWAs get more momentum, developers are looking for ways to build a best in class web app. Workbox is a guide that has step by step codelabs and a wealth of best practices. If you are a developer and thinking about updating your site to a PWA, Workbox is a must.
Who is it for? — Product Managers & Engineers
5. Color Tool
Are you thinking about doing a redesign or launching your site for the first time? I highly recommend using the Material Design Color Tool. This tool allows you to create, share, and apply custom color palettes to your UI. Simply input a hex color and it will provide a primary color scheme with Light and Dark alternatives. Not only will this tool help you get your brand to the next level, it can also ensure you’re meeting accessibility best practices. This simple but effective tool makes it easy to share on Android, iOS, and even CodePen. Also, I highly recommend Material Theme Editor.
Who is it for? — Designers
6. Data Studio
Unlock the power of your data with interactive dashboards and engaging reports that inspire smarter business decisions. Improving your web experience is a team effort. Data Studio is a simple way to extract meaningful user engagement trends. I’ve seen a ton of custom data studio dashboards out there, like the Frictionless E-commerce Mobile Dashboard (made by my peer Damla Cakirca). Data Studio allows you to create custom views and add comments for any team member to interpret the data. It also lets you easily connect your data from spreadsheets, analytics, Google Ads and more. The best part of Data Studio is the simplicity. Regardless of your role, you can transform raw data into the insightful metrics and dimensions. Just when you think it can’t get better you’ll realize that no code or queries are required.
Who is it for? — Everyone. Product Manager. Engineers. Designers. Marketers.
7. CrUX Dashboard
The Chrome User Experience Report (CrUX) Dashboard is a public dataset of user performance data. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled. This tool is built on Data Studio and automatically syncs with the latest datasets, and it can be easily customized and shared with everyone on your team.
Who is it for? — Product Managers & Engineers
I hope this list can streamline your workflow or better help your team share goals. If you’re looking for specific recommendations on how you can better optimize performance, usability, and accessibility, read — UX Trends I Observed at Google as a Mobile UX Lead. If you have other tools you recommend please leave them in the comment section below.
