June 28th, 2012 // by Amanda Blackburn

App Press: Designing UX for Designers

Miles Design was engaged by the team at App Press to help design and wireframe the user experience (UX) and user interface (UI) for the latest version of their software.

App Press allows its users to create custom apps for Android and iOS without writing (or even understanding) a single line of code. It was developed with designers and creative agencies in mind and allows the designer to work from a blank slate, much like you would in Adobe Photoshop or Illustrator. It’s unique because, unlike some of its competitors, it’s not tied to Adobe Photoshop or InDesign. You can build your app from scratch and even preview it on your mobile device as you build it by using the App Press Preview App.

We kicked off the project with a series of meetings with the App Press team to learn as much as we could about the goals and requirements for the software. Because App Press is specifically geared towards designers, it was extremely important that the software be both visually easy to navigate and simple to understand and manage. The user is able to dive right in, as they would in any other tool they work with on a regular basis. It’s familiar to them.

Other goals included:
Equipping the designer with complete design control.
Creating software that is simple, organized, and intuitive.
Implementing easy layer creation.
Making it simple to design for different devices and orientations.
Making it simple to manage multiple apps within one account.

From our initial kick-off meetings, we began mapping out the experience and interface for App Press. These maps created a collaborative platform for gathering content, details, and working out the flow and structure of the software, without getting wrapped up in the visual structure and design yet. One particularly challenging function was the layout editor. Layer creation and management is often the most intimidating part of the app creation process, so we wanted to make sure that was as simple and straightforward as possible. The final result is a layout editor that allows the user to assign specific attributes and functionality on a layer-by-layer basis.

After we wrapped up the initial maps, we were able to move on to the next stage of the project — the wireframes. Wireframes are the first step in translating the content into visuals. We begin to visually organize the content in a way that shows hierarchy and flow. At this stage, we often work with boxes and placeholders, rather than implementing finished designs and content. It’s much easier to flush out and revise the structure of the software when we’re not concerned with specific design elements. At this stage, you really begin to see how the user will move through the software, and you can walk through the app creation process from start to finish.

From there, we delivered complete wireframes and maps, and the team at App Press used them to implement the visual design for both the software interface and the recently launched marketing website. Here’s a preview of the finished product!