Mobile Design for the Agile World
Focus on design is becoming an increasing necessity in mobile development. You can create incredibly powerful, innovative, and useful applications, but if the layout, typography, and navigation aren’t designed equally as well as the code is written, the app will end up in the user’s trash. There are hundreds of thousands of apps in the Play and App stores, but only a handful of those actually live on our home screens. Those that do share an important distinction, they are well designed, both visually and programatically. A successful app can’t have one without the other.
The SPR Consulting Phase 1 design process.
At SPR, we incorporate the design process into each mobile app we create. We use a tiered process that allows us to gather the criteria for the app, create strong layouts and prototypes, and finally, personalize the app to the clients brand and aesthetic. This whole process it totally transparent, and the client is included as much or as little as they desire. Most clients find the experience very enlightening, and are eager to get in the mix with the product owners, designers, and developers, to help shape the way the app works and looks.
The design process starts with the initial meeting, the Inception. During the Inception, we work with our clients to gather the essential functions of the app. We guide them into revealing what the app should do, what business purpose the app should serve, and how it needs to fit into the organization. We also aim to limit the scope of the app to a few core features, as we find successful apps do one to a few things very well and are not overly complicated. After the Inception session(s), we create an initial master story list, which outlines all of the functions from the user’s perspective. These initial stories are used to start developing low fidelity views of how the screens can look and function, called wireframes.
Transitioning between wireframes to comprehensive layout.
Wireframes start out as rough sketches, the best way to create and iterate through ideas quickly, and get the creative juices flowing. The design team takes those initial sketches and hones in on the most successful approaches, the ones with the strongest navigational and structural layouts. SPR aims to utilize existing mobile platform conventions, which allows users to jump right in and feel comfortable using the app, even for the first time. This is because there is a level of familiarity it shares with other apps for that operating system. Keeping that in mind, no two apps should look the same, our designers take creative liberties where possible to allow for some custom elements where it makes sense, aiming to balance the business benefits with the added costs of developing these custom elements.
After the wireframes and prototypes are moving in the right direction, the design team puts some major polish on the designs in the final Comps (Comprehensive Layout) sessions. This is where the client finally gets to see what the app could look like on a device, cue the ‘oohs’ and ‘ahhs’. After a few more iterations, honing in on the best typography, color, and icons for the brand, our designers start assembling specs for the developers. These specs include detailed pixel perfect renderings and measurements of all the screen elements, font sizes, color codes, animated examples, and final visual assets for the developers to get started building the application.
Tools of the Trade
Utilizing the Adobe Creative Suite, our designers create custom icons, backgrounds, and other assets in Illustrator and Photoshop. Those assets are imported and assembled in screen layouts using InDesign, allowing changes to those assets and colors to be updated at the click of a button. Using a page based layout allows the designers to use master elements that apply to some or all of the pages easily, making major iterations a breeze. When the time comes for a presentation, those pages can be exported to a PDF and uploaded into Basecamp, or imported into a pre-design presentation document in seconds.
Animation example created with Photoshop & Framer Studio.
One of the ways we work through some of the complex interactions of wireframing, and to convey our ideas in more than just static images, is with dynamic prototypes. We use tools like Framer Studio, Quartz Composer, and Briefs to create replications of native mobile applications using those wireframes or comps, along with just a little javascript. We can create full native-like walkthroughs of certain sections of the app, or show more complicated navigational ideas, and then share them with our clients during the Design Scrums, on the web via Join.Me, or with private video links on Vimeo. We can even create small animated gifs like the one above.
Another way that SPR bridges the gap between design and development is through PaintCode. This powerful tool allows our designers to wire up images with basic variables and mathematical expressions that our developers can access using native code. It has a multitude of other features that allows it to be utilized for color and asset management throughout the entire development process.
It’s an exciting time to be a mobile designer at SPR. With an ever growing set of tools that allow the designers and developers to work closer than ever, it’s allowed us to put out some of our best work yet. We are are very excited to continue pushing the boundaries of design and technology, and to keep producing word-class mobile applications that our clients love to use.
