Flutter February — Sketching Your App [pt. 1] The App Editor

Photo by Kira auf der Heide on Unsplash

Before you ever start coding, it’s best to have a design to work towards. For me that’s a two part process: sketching and wire-framing. I like computers just fine but I feel creatively stunted without a first pass with a paper and pen, so let’s do that.

My had sketches are very messy but are great for working quickly.

The design I’m going for is one that is utilitarian, sleek, and modern without much quirkiness. I want my application to almost dissolve into the background allowing my users’ apps to shine in contrast.

One of the most important parts of my application is the Editor Screen where my users will be able to customize the templates they have chosen for their own app. Here are some UX decisions I made when planning this out:

The Drawer — I’ve decided to make a one stop shop for all administrative actions outside of the design. In here the user will find information on their account including a link to their more detailed account page, upgrading their account to a paid subscription (for future versions), settings for the editor itself, and a ‘Publish App’ button. Keeping this in one place, tucked away and yet available on every screen will enable the user to really focus on design without distractions.

Check out this article on the 12 principles of UX in motion.

Add Button — Add buttons will appear in multiple places based on context but having one at the top of the screen ensures the users won’t have to remember where to look for one. Tapping will clone the element into to buttons, ‘Add Screen’ and ‘Add Widget’. Selecting either will bring up their respective side-sheets.

Brand Identity — This button will link pull up a full-screen page with all the options surrounding branding. The decision to separate brand identity from editing was probably the first decision I made. The experience I want my users to have is one where the app almost builds itself and they are there simply to communicate their branding, something they’re (hopefully) very familiar with doing. More on the Brand ID screen later.

Preview — This will bring up a full-screen preview of the users’ app with full functionality so that they’ll be able to experience it before publication.

Sucked for a large collection of albums but maybe perfect for a selection of 5 screens.

Screens — There needed to be a way to select which screen your editing, so why not use this as an opportunity for some fun interactivity that adds to awareness of the users’ impact on design decisions. Instead of a drop-down menu or a list that leads to the main editing page, it will feature a small gallery view of all of your screens together.

This is one of the few place where I will depart from Material Design’s guidelines for an informed reason. Without doing so, the user will have to immediate feedback on the impact of changing the primary color or fonts. They would have to make a change, click on preview, and jump back to change it again. I know there was a lot of hate for the old iTunes cover flow, but this is a use case where I think it makes sense. A-B testing this will be fun.

Tapping on each screen will pull it up immediately in a full-screen preview. Tapping and holding will pull in the card into the foreground and enable the user to rearrange the screens. Horizontal swiping will change which page is selected for editing with a snap into place. Vertical swiping will bring up a prompt to delete the screen and remove it from the app. Swiping to the end of the list of screens in either direction will pull up an ‘Add Screen’ button.

Credit goes to Google’s Material Design team

Options — A vertical scrolling list will contain cards, each with a set of options corresponding to a component on the screen. Each card will display some of the most popular options inside the list but when tapped will expand to show a full list of options for each component. Possibly show an example of the UI element that the options control when expanded. This will also be the place where users will be able to import or embed content.

For this, I want to test out which feels more natural and useful: having the scrolling list below with the screen gallery remaining above or having the screen gallery snap into a smaller view or possibly disappear altogether. Right now I’m leaning towards the middle option where the screen gallery shrinks to a small thumbnail version of itself because that gives the user space to tweak and still some feedback from the gallery.

At the end of the list there will be a button to ‘Add Widget’ that will pull up the same side-screen discussed in the ‘Add’ button section. Just a note on labeling, for now I’m indiscriminately calling them widgets or components but I will get better at calling them widgets when displaying them to the user. I think users are more familiar with what a widget is than what a component is. This will be an easy thing to A-B test for which gets clicked on more.

Primary color option — For each screen I want to provide to the user the option of selecting the primary color used to paint the screen. I will provide them a selection programmatically inferred from their brand identity. This will convey to the user that branding is the number one priority and that feeling of ‘everything-just-works’.

Navigation Bar — The navigation bar is the clearest way to show the user how to move around the app. It also allows you to highlight high value features. When the app goes into production, I will be doing some A-B testing on what to include here. For now it’s just the Analytics and Store screens. I may also feature the Brand ID page here eventually.

Thanks to those who spent their time reading this, I hope you found peering into my brain’s decision making useful for your own.

What any flutter notebook should look like — Credit to David Kracov

Thanks to the Material design team for making everything opensource. Thanks to Issara Willenskomer for opening my mind to UX motion.