Explaining Everything: Product Specifications and Mockups

One of the most important parts of the design process is translating your thoughts and ideas into something that experts in their fields (i.e. programmers and graphic designers) can understand and work with. Two important areas must be covered to get started: the product specification and the mockups.

Product Specification

This artifact can exist as a text outline, flow chart, concept map, or any other organizational structure. The idea is to detail every part of the app in this document. It not only helps the people you work with understand your vision, but it also helps you figure out potential gaps and identify needs.  This also helps you communicate to developers and graphic designers what your requirements are, and thus they can help give you a firmer idea of the costs. Dan Saffer's Designing Gestural Interfaces is a good resource for beginning designers, but I found it was helpful for thinking about every possible way an interaction might take place on a touch screen device.

I chose to do a text outline to organize the different tools in Explain Everything and outline their function, but I then spent a lot more time doing mockups of each tools individual menu.

Screenshot excerpt from draft of product specification.

The specification evolved over time once the design process began. New feature ideas emerged, and with those new bullet points and corresponding mockups.

Graphic Mockups

_For every detail in your product specification, you definitely want to have a graphic-mockup to accompany it. One thing that can be very helpful is to get familiar with the graphic elements that are standard in the Apple iOS SDK. Many menu items and selection options come standard, so those do not need to be custom made. Check out Geoff Teehan's blog for great resources for iOS Development. He provides (for a voluntary donation) a layered PSD file that you can use to create quick mockups of various popout and pop-over menus.

iPad GUI .psd file via Teehanlax.com

Using standard elements at first can be helpful for the initial phases of design when you are trying to get the functionality down. Once all of those pieces are sorted out, then you can know for sure which pieces you want to get custom graphics for. Below is an example of the Draw Tool pop-out menu for Explain Everything. On the left is the mockup which I created, and on the right is the actual current Draw Tool pop-out menu.  The Pop out frame, background, header text, 'Set' text options, and slider, are all from the standard SDK. The color palette, the thickness options, and pen tips are custom graphics.

Draw Tool mockup

Draw Tool actual

Below is an example of the home screen for Explain Everything.  All of thexe graphics had to be custom made, but at first it was important just to get the functions working, and once happy with how the buttons worked and were position, the graphic designer was able to make something great out of it.

Home screen mockup

Home screen actual

This part of the process is definitely the most time consuming, but at the same time its the most important to get right. Front-loading the effort into the details early on will save lots of headache later on.