Interface Designer: Highlight key details with the record summary

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:

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, and share

Once you’ve added elements and arranged everything to your liking, use the “view as” toggle to see how everything will look to a designated collaborator. You can also click the preview toggle to see how the interface will look once published. When you’re happy with the final results, click publish. Congrats—you’ve just designed an interface! 

Sharing is caring, and we’ve made it easy to bring in your collaborators. Click the share button in the top-right corner of your interface to invite others via email or by creating a link. You have the granular flexibility to not only decide what level of permission your collaborators should have, but also whether they should also be allowed access to the underlying base.

What’s more, you can even create personalized experiences for collaborators coming to your interface with user-filters at both the page and element level.

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 😉).