Background
Tables is a product developed by Google’s Area 120, their internal incubator for experimental products. It is a collaboration and workflow improvement tool that is set to be a part of the GSuite.
Task
Design, test an iterate and build a marketing page to accompany their product launch in 14 days.
The process
Given the tight timeline, we broke down the tasks into 3 short sprints; the highlighted bits are what I covered:
Wireframes
We decided to make 2 versions of the site using different copy and IA, in order to understand what information users found the most valuable during testing.
In total, there were 6 wireframes of the landing page; 2 different layouts in desktop, mobile and tablet versions which we sent to be approved by Google’s legal team.
Screener survey
Following a persona exercise we revealed these key considerations to keep in mind when designing the landing page:
- Competition was strong in the space; Airtable, Clay, Monday, Click Up, etc
- We should target users already deeply immersed in the digital world
- If we can leverage the Google brand it will be a powerful asset, particularly for users who already have Google touch points
- It’s impossible to deeply integrate with every system or optimize for every use case
- Tables is more of a general than specialized tool
With these key considerations in mind, I wrote and distributed a screener survey that helped us select a candidate pool for our user testing group.
UI Library
Immediately after wireframing, I like to set up a design library with all the potential UI components so that our dev can start getting involved right away. I created this Design library based on Google’s Material Design, and crafted components and modules that I felt would be indisputably used on the final page in Figma
Applying Design System + Adding visuals
Once the internal team was happy with the copy and IA, I applied components from the UI library to the page and started pushing out visual assets to use in the prototype.
For the visual direction, I wanted to keep true to the GSuite projects and crutch on Google’s 500 colors to help establish credibility in the product. Although the site primarily sticks to their philosophy of “building from white” I added some punchy elements such as bold backgrounds and decorative patterns to frame focal points. The visuals ended up being a mix of product screenshots, abstractions of their products UI, and illustrations that helped to aid understanding of their automation features.
Research script + Recruitment
The last step before testing the prototype was writing a script that would directly answer the following learning goals:
- [Understanding] Discover whether users understand what Tables is and how it can be used
- [Awareness] Discover whether users can describe benefits of using Tables
- [Efficiency] Discover whether users can efficiently find the right information about Tables for their desired use case
- [Effectiveness] Assess whether or not a user is likely to sign up
- [Satisfaction] Discover whether users are pleased (or not) with their experience of visiting the site
Once the script was drafted, I worked with the Google team to pick a diverse pool of candidates that passed our screener survey.
UXR Synthesis
After dedicating a day to 8 user interviews, I distributed my research notes to the team to help compile observations and patterns during a morning workshop. By lunch we had the following insights I could iterate on:
Iteration and final product:
After applying our findings from research, we ended up with copy changes, visual changes and a final product that combined modules from both the A and B prototypes. We shipped the following:
Press releases
Following product launch
•TechCrunch: Google launches a work-tracking tool and Airtable rival, Tables
• Venture Beat: Google launches Tables, a rules-based automation platform for documents
• Android Police: Area 120's latest experiment harnesses bots to let teams work better together
• Blog.Google.com: Google beta launches Tables in the U.S.