LinkedIn
Twitter
AppSheet Training Guide: UX Design 101
View on AppSheet Training
Need help with AppSheet? Sign up for a free Tech Talk
Table of Contents
Getting started with UX Design in AppSheet
Functional Requirements
✨Custom Branding
🔎Custom Views
📱Menu
🙂My Profile
🛠Resources - Basic
🛠Resource Categories - Advanced
📧Team
📑Custom Formatting
Let’s Review
Let’s Connect
Getting started with UX Design in AppSheet
Building an app to meet the functional requirements of a project, for a client, or for your organization can be a difficult task. However, with a clear understanding of the requirements of the project you can quickly and easily create these designs in AppSheet. Let’s take a look at how to create a guided user experience in your applications using AppSheet.
For our use case we are working on digitizing the employee onboarding process with AppSheet. The functional requirements for creating the user experience for this app are as follows: create custom branding, custom views, a menu, a profile, a team directory, and a resource page. The AppSheet Editor allows us to build out these features quickly by using the UX Tab. So, let’s break these requirements down into three parts.
Functional Requirements:
✨Custom Branding
🔎Custom Views
📑Custom Formatting
✨ Custom BrandingCreating a custom brand theme for your app is accomplished by navigating to the UX Tab → Brand Tab. Then you will have the option of selecting your brand colors, logo, launch image, background image, and more.
For our brand theme we selected the following designs shown below to match the AppSheet Training Brand Guidelines. Check out the example below!
Description: As you can see our app now has the custom branding according to AppSheet Training Brand Guidelines. To select custom branding click on the paper icon 📄 to change the App Logo, Launch image, and background image. Then AppSheet will allow you to choose a custom image from files on google drive. Lastly, we also recommend updating the header and footer to the settings shown above.
🔎 Custom ViewsNow that we have our custom branding setup, we can begin the process of designing our views that will display our data in a way that makes sense to the end user. AppSheet does a great job of setting up system views from our database, but we want to add some customization to these views to meet our project requirements. Let’s check out these custom views now!
Description: As you can see we have one Primary View, one Menu View, and three Ref Views. We selected these views in order to create the experience that we wanted for the end users. Let’s take a look at how to set up these views now.
📱 Menu
Description: For our Menu view we selected a slice of data from our Menu table. Then selected the Card option as our view type. Finally, the main setting to keep in mind when setting up your Menu view is to make sure to link the On-Click action to the Link-to-View Action button that allows user navigation between different views that are selected.
Menu View
🙂 My Profile
Description: To create a My Profile page we used a Detail View and selected a slice of data from the Team table called My Profile (slice). The reason why we want a slice of data here is because the user that is logged into the app only needs to be able to see their data - a.k.a. their profile. Next we selected to use a card layout and added quick edit columns for the First Name, Last Name, and Email Updates? columns. This will allow users to easily update their own profiles.
My Profile View
🛠 Resources - Basic
Description: For this view we have targeted the Resource Table and selected a Card view to display this data. The most important setting for this view is the On-Click action that will navigate the user to the resource that they select.
Resource View
🛠 Resource Categories - Advanced
Description: This next view is a more advanced version of the previous view. For this view users can select specific categories to view from the resource data. To create this view, we are targeting the Category table and displaying the data in a Table view. Lastly, the most important step is to set the event action to the custom link to filter view action. This action filters the resource view by specific categories.
Resource Categories View
📧 Team
Description: The next custom view we created is our team directory view. This view is targeting the team table and displaying the data in a Deck View. This view also utilizes custom formatting which we will talk about next.
Team Directory View
📑 Custom Formatting To wrap up the custom theme for the Employee Onboarding App we have created a simple format rule to help with brand consistency for the team directory view. To set this up we navigate to the UX Tab → Format Rules → ‘+ New Format Rule’ . Once the new format rule is created we can start adding the features shown below.
Description: For this format rule, the goal is to create a maroon thumbnail icon image for each team member's thumbnail icon. This creates a similar UX Design to how our phones will generate icons when a new contact is added to our contact list. To set this up we will target the team table and select the Thumbnail column and select ‘themeMainColor’ as the highlight color. This will change the icon from a standard gray color to the brand color of maroon. Wahoo! 🎉
Team Directory View Final
Let’s Review
Overall, creating a custom UX Design in AppSheet is fun to create and easily implemented once you understand the basics of using the AppSheet Editor. To recap we like to start with a custom brand theme, create custom views, and add any additional formatting to add the finishing touches to our apps design. Awesome! You should be well on your way to creating custom themes for your apps now. Also, you can copy and customize this app by clicking the link below.
Copy & Customize: Employee Onboarding App
Comment below and let us know what UX Design Themes you like to implement in your Apps!
Let’s Connect
One-on-One meeting
Book a free online appointment with us to talk about your AppSheet App! Get expert advice, a customized use case guide, and next steps on how we can help you build out your App.
Tech Talk: Book Now
Happy Developing,
Austin from AppSheet Training
