Interface Designer: Highlight key details with the record summary layout

Interface Designer is a perfect way to display loads of information—but what if you want to shine the spotlight on one record at a time without any distractions?

We’ve got you covered. 

Enter the record summary layout, which can be used to highlight key information connected to a specific record. Using a dropdown feature called the record selector, this interface allows team members to switch back and forth between records with ease—making it ideal for things like user research interviews or potential job candidates in a recruiting pipeline.

For this guide, we’ll build an interface that can manage our customer beta process, but you can use the following steps to build any type of record summary interface of your choosing.

Getting started in your base

To create an interface, you have to start with a base that holds the information you want to display. Then, think about the problem you’re trying to solve.

In this case, we’re trying to create one place for product managers and marketers who need customer and beta information, so we’ll build an interface on top of the base that hosts all customer beta information. In this interface, we want it to be easy for collaborators to get an overview of the customer account, including past beta participation, product feedback, whether they have a co-marketing agreement, and the internal team member assigned to the account. 

Now that you’ve selected the base with the information you want to display and the problem you’re solving, go ahead and click the interface button in the top-left corner of your base.

Name your interface

Amidst all the interactive elements and features that interfaces offer, names and descriptions might seem inconsequential. But naming your interface is crucial, as it helps collaborators understand what the interfaces are for and how they should be using it. 

Is this your first interface? If so, you’ll need to name the collection of interfaces and give it a description—this is what will be displayed on the home screen. For example, this group of interfaces is called “Product Ops,” and within it, we have a series of interfaces related to our product workflows.

We’ll name this interface “Customer beta access and feedback” and add the description “Current beta access, co-marketing agreement, and product feedback by customer.”

Quick reminder: you don’t have to use just one interface for all of your needs. For example, if you’re managing user research for multiple features, you might want to create an interface for each feature. Multiple interfaces can be tied to the same base.

Select the layout & connect a table

Next, select the record summary layout. 

When you choose a table in the record summary layout, the table’s primary field will be the field shown in the dropdown. Since we want to display key information by customer, we’re going to select our “customers” table.

Apply filtering & sorting

Don’t forget to use filtering and sorting to only show the information that is relevant to your collaborators. For example, our customer base might hold data for all customers, including those that are inactive but we want to see a subset of those customers.

Since we only want a snapshot of our current customers, we’ll apply filtering for “active” status. We might also want to add filters for things like NPS scores, or whether the customer has a co-marketing agreement. 

Sorting the information displayed in an interface can make it easier for your team to find what they’re searching for. To help collaborators find customers quickly, we’ll sort customers’ names from A-Z.

Add key information from your base

It’s entirely up to you to decide what information from your base makes it into the interface (don’t worry, you can always update this later if you change your mind!) Since the purpose of this interface is to manage customer beta access and feedback, it makes sense to include fields that contain both customer and beta information.

Adding customer info

When it comes to displaying a customer overview with the record summary layout, we recommend highlighting key account information like:

  • Customer name

  • Annual recurring revenue

  • Whether there’s a co-marketing agreement

⚡ Pro tip: You might also want to consider including any button fields if you have them in your base instead of a URL. The button is a useful, interactive element for scenarios where collaborators need additional info, like a link to a pdf. For example, we have a button in our base that connects to Salesforce for a deeper dive into accounts, so we’ll include that in our interface.

Adding beta details

Since our “customers” table contains linked records from our “beta feedback” table, the record summary layout will also pull in beta information.

Take time to think about what other kinds of information will be useful for your team and the best way to display that information. For example, if you have customers’ NPS scores in your base, you can add a chart element in the interface that shows each customer’s NPS score over time. 

You now have the key information your team members need to manage customer beta access and feedback. This means that every time they select a different customer from the record selector, the information will be updated throughout the interface, from revenue to NPS score. 

Important note: If you decide to change the table of the record selector—let’s say you switch from the “customers” table to the “beta feedback” table—you’ll notice the fields you’ve added no longer render. This is because the fields are sourced from the table, so every time you update a table, you’ll also have to update the corresponding fields.

Make your interface actionable

Consider making your interface actionable for collaborators by adding editable elements and comments.

In this example, we want our team to be able to add customers to a beta directly. You can do this by making the beta field editable—simply click the field block and find “editable” in the edit access section. Now, anyone with edit permissions or above can add a customer to this field by creating a new record. 

When it comes to managing customers, it’s likely your team will need a space for dialogue. For example, a team member might want to request adding a customer to a beta or need another team member to work towards acquiring a co-marketing agreement. You can create a place for feedback and action items by adding a comment field directly into the interface.

Drag, drop, & organize

The more elements you add to an interface, the more you’ll understand why it’s important to organize everything for ease of use. We recommend utilizing the divider element if you have a lot of key information that needs to be split up.

You can also add text elements to provide calls-to-action (CTAs) and descriptions for collaborators. In this example, we want to nudge our team to the drop-down tool so they can find customers, so add a text element that says “select a customer from this drop-down.”

Colors are a great way to visually differentiate between types of information. Let’s give the top-line information in this interface one background color, and apply another color to the beta information and NPS scores below. Stylish, right?

Preview & publish 

Toggle the preview in the upper-left corner to see how your interface will look to others once you’ve published it. Previewing your interface also gives you the opportunity to make sure your editable elements can indeed be edited, and your view-onlys can’t be touched.

When you’re ready to make things official, hit publish. Cue the confetti. 🎊  

All there’s left to do is to share your interface with your team. Click the share button to invite individuals via email, or copy and paste the link if your team already has access to the base. 

⚡ Fun fact: in the record summary layout, each record has its own URL! This means that every time you display a different record in the interface, the URL will update automatically. This is helpful if you need to share the details of a specific record, in this example, a specific customer. All you have to do is copy and paste the URL.

You did it! You now have an easy-to-use interface that provides a clear and concise snapshot of each customer and their beta feedback (and you didn’t have to use any code to bring it to life 😉).

Next up in Airtable for Collaborate With Your Team

4 of 7

6 of 7

Explore the latest in Guides

3 Guides

Quickly get data from anyone, anywhere into Airtable

The more data you have, the more you can do. Learn how to easily add additional data to your base

5 Guides

Why Airtable?

If you’re wondering how or even if your team should use Airtable, what makes it different from a spreadsheet, or what a “low-code platform” means, then this guide is for you.

Browse all in Airtable Guides

Join us and change how you work.