Clay Home
Creating a home base for a programming and schematic design application
The Clay app was developed to streamline collaborative office renovation projects for Google, integrating various disparate applications into a cohesive platform. By establishing intuitive navigation, robust search functionality, and version control capabilities inspired by Google Drive, the home feature provides a seamless experience for Project Executives, Analysts, architects, and interior designers.
Role
Product Designer
Client
Google REWS
Employer
Outer Labs
Areas
Design, Discovery, Strategy
Multiple apps that are being combined into Clay
Background
Clay is a tool developed for Google allowing Project Executives to more easily plan and develop office renovation projects in-house, and then seamlessly hand-off to their external design teams. As a sort in between spreadsheets and the drawing board of CAD or Revit, there are multiple stages a project can move through, and multiple types of studies a user can create for a project. Clay home is where a user can find metadata about these studies and access their desired work.
Clay is an amalgamation of a series of previously disparate applications that are all accomplishing similar work in parallel. Clay is intended to help a variety of users (Project Executives, Project Analysts, architects, interior designers, etc) streamline their collaborative process together.
Boundaries between services, tools, and users
Initial Discovery
The first step for the team was to understand the underlying structure and connections between different studies, and establish boundaries between them. Some of the app structure is based off of pre-existing work, and some new, so there was a lot of discovery involved in how a user should move through the different Clay experiences. I worked very closely with product and engineering in this exploration process.
Project page with all of its studies shown.
Approach
The primary goals for this design was to provide an intuitive platform where new users could easily understand how and what they could access, and existing users could quickly find where they left off. As we got further into understanding the boundaries between different states within Clay, it became clear that Google Drive would be a very helpful precedent. Like Drive, Clay has a variety of types of work a user can accomplish. Unlike Drive, the different “files” are interlinked and interdependent.
Study details side panel with metadata
App Structure
As the first designer specifically on Clay, I worked to bring together the work that other designers were working on previously disconnected applications. We developed a language of Projects and Studies to organize the work, and establish boundaries between different aspects of the programming, designing, and financial planning.
Searching for resources (study, user, project)
Search
In addition to simple navigation, the search feature is a valuable tool that allows a user to quickly find what they want to work with by searching based on a variety of parameters. Including some visual cues about metadata for search results also allows a user to more quickly key in on their desired study or project.
Versioning flow both in the home screen and in the tool
Versioning
Allowing users to see work progress and go back in time if needed gives users confidence to make changes and test different ideas. Again, I heavily referred to Google Drive (especially Docs) as a driving model. Users can flip back through to quickly see changes, and have an indication of where changes were made.