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.
Putting a mobile 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 UX 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 mobile 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 a mobile schema?
A mobile 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.
How are symbols used?
The symbols are a media library with mobile and tablet devices, arrows, buttons, connectors, and other common screen elements used to build the schema and user flows.
We’re huge fans of Sketch for mobile 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). In the future, we plan to release Adobe XD and Illustrator versions. 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.
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 UX design template.