Great Mobile UX Design Starts With A Great Template

A successful app starts with great mobile UX design and clear documentation. It must state the app’s purpose. It should be focused. And it needs to outline specific user interactions and how each screen is connected to app’s larger vision. On most projects, our creative team uses our own custom template — made in Bohemian Coding’s Sketch — to quickly build a mobile UX schema and user flows. These are key documents used to describe the mobile UX design architecture before we start building detailed wireframe prototypes.

Having a template as a starting point allows any mobile UX designer to visualize the app and iterate on ideas quickly and easily. It ultimately can save you and your team lots of time, and leads to a more polished product for your next mobile app project.

If you don’t have your own mobile UX design template, we’re happy to share ours.

DOWNLOAD THE FREE APP UX TEMPLATE FOR SKETCH

Putting an app UX template into practice

Before building the schema and user flow documents, we at ArcTouch do a lot of research. Typically, our app development services start with a strategy and product definition phase, where, among several exercises, we map out all of the user scenarios and features.

Once we complete the definition, we quickly move into design. Our first step is to take those user scenarios and features and transform them into a schema and user flows. Every member of our mobile UX design team uses our template to create the design documents of record and ensure our project teams are aligned. And, they’re assets we use to present project findings to the client.

The ArcTouch mobile app design template for Sketch is divided into three sections: schema, user flows, and symbols. The schema and user flows are the documentation that you’ll need for your project, while the symbols section includes common UX icons and connectors that help visualize the features and user movements in the app (more detail on these sections can be found below). When viewing the Sketch files, make sure to “Show Layout” (ˆL) to see the underlying grid. The grid will help your presentation to be consistent and organized.

Mobile UX design template features and benefits

Our template includes the following:

• Symbols for phones and tablet devices (in landscape and portrait views)

• Ready-to-use assets to build connecting flows before building prototypes

• Clean-looking device icons that clients (and creative leads) love

• Easily customizable artwork that can be updated to match your branding, colors, and fonts

• Widescreen page format for presentation applications like Keynote and Powerpoint

What is an app UX schema?

A app UX schema is similar to a sitemap (in the web world) and groups every screen in the app by content category. Mini illustrations of devices, or “micro-wireframes,” are designed with blocks of content that represent screen hierarchy and help define relationships between screens. Screens are linked together by connector lines to highlight user interactions.

What is an app user flow?

A user flow is the expected path through an app that your target user takes, and typically aligns with a business objective. Each app will have several user flows. These user flows incorporate the same micro-wireframes — with limited visual detail — from the schema document. A user flow incorporates user scenarios (mapped to a persona) and helps illustrate the smoothest passage for the user to accomplish their goal.

How are the app symbols used?

The app symbols are a media library with phone and tablet devices, arrows, buttons, connectors, and other common screen elements used to build the app schema and user flows.

Why ArcTouch uses Sketch?

We’re huge fans of Sketch for app design — which is why we built this template for it. It’s worth noting that this isn’t a promo for Sketch. We’re not affiliated with them (though if they want to kick us some free licenses then we’re soapboxing in San Francisco’s South Park). Make sure to subscribe to our blog (enter your email in the form on the top-right of this post) and we’ll keep you posted with updates to this or other templates.

Bad things happen when you don’t plan

One of the biggest causes for apps to fail is the lack of planning. Too many projects fail when teams jump right into UI design before considering the whole user experience. Or, teams start development immediately without fully understanding the required user experience and success metrics. A good app has to be focused and delightful for the user. The mobile UX design process takes time to do right, but successful apps take the time to do it.

If you skip the planning completely, chances are your project will experience disruptive scope changes and potential cost and/or time overruns. UX problems that arise during engineering can be costly — both for time and money.

Spending more time upfront — and building great user flow and schema documentation — will save you a lot of angst, and time in the long run. And it all starts with a great mobile app UX design template.