Rapid prototyping of mobile apps
Rapid Prototyping has been around for over 30 years. It has been used in the manufacturing industry to quickly develop parts and products. In the software development industry, rapid prototyping is linked to rapid application development and refers to the practice of iteratively creating screens or visuals of increasingly better resolution that project how an application will function in the future (or end state). This is particularly useful for mobile applications where we try to include the minimal set of features that are used most of the time by customers.
Rapid prototyping is highly effective when designing visual interfaces for mobile apps; unfortunately, effective does not mean easy. As with any iterative process, there are a series of steps to follow for each cycle. The rapid prototyping cycle includes three fundamental steps: envision, create and review.
When envisioning an app, step back and think of the minimal core set of features that will provide the most value to the customer. If you are following an agile software development methodology you probably have backlog items that are ordered in the same manner. Tap into these and integrate any prioritization exercises into the design process.
A good tip is to pick and prioritize stories that can be visually represented easily. Reduce features but do not limit functionality; an example of this can be seen when adding data via an app. If users are able to add data, they should also be able to edit and remove it from the app too. Having to navigate to the website (which most likely is not mobile friendly) to remove data will cost your app traffic dearly.
Touch as a new language, try to ask the team as a whole to avoid using words like double click or hover-over (that would be fun to watch on a mobile device); instead replace them with tap, swipe, and pinch. This language shift will help avoid getting requests for “more buttons” and help discover new gestures available with touch interfaces.
When creating the first designs, the entry point should be wherever you are most comfortable with. If you can draw, do it. Use a whiteboard or even some fancy mobile stencils to create the initial screens. If possible use the appropriate icons and UI elements for each action. If the action is to send an email then use a letter icon; there is no need to re-invent the wheel as users are accustomed to these elements. Bottom line, these small considerations will help the adoption numbers of the app.
There is a progression to higher quality designs when doing rapid prototyping. On your next iterations you should move to what is called wireframes. Wireframes are functional depictions of the screens with very little color; most of the time they are in grayscale.
There are several applications that will help you create excellent wireframes. I personally use Balsamiq but I know several friends that use Mockingbird or Moqups. Pick a tool that allows for fast edits and flexibility. While many of these tools allow you to add images, avoid including images with color; the intent again is to convey the core functionality and flow of the app.
The flow of the app is as important as how it looks. When you have a set of connected screens (e.g. login followed by home screen), start linking them up. Your customers will then be able to tap on elements and navigate to the next screens. Many of the tools allow you to create navigable regions and export the outcome as a clickable PDF. Other teams prefer to develop functional web versions of the wireframes using frameworks like Wirefy. Always consider the time and effort required before making any decisions.
Several iterations down the line and you will move to the actual full resolution
screens. I prefer to start with the highest resolution possible and then scale them down if we need to for different platforms. In this step, consider your corporate color palette and other legal or required aspects of the screens to avoid having layout surprises in the future. Design for all possible orientations if you haven’t done so yet (portrait and landscape). Change any dummy text with real content that relates to the scenario depicted in each screen.
You can use a tool, like Proto.io, to then link the screens and allow for testing of gestures that aren’t that obvious in the clickable PDF. As you build these full resolution screens a good tip is to layer elements instead of creating flat images so individual items can be changed or exported for the development team later on.
When in the review step, one of the keys for success is to require customers (or stakeholders) a certain level of participation. It is very useful to have a good mix of end customers and business stakeholders to expand the idea pool. This can be done with weekly meetings, depending on the size of the design team; it should be no more than 3 a week and no less than 1.
These meetings will provide the key feedback items that will continuously be incorporated into the design. Consider having a beta or focus group later on to test the designs. If possible consider using a tool that allows for quick capture of feedback on the screens like Invision, or pen and paper always works.
Start the review going over the previous screens and feedback items and then move to the newer ones. If there is uncertainty from the customers avoid creating more than 2 versions of any screen. Adding options many times slows the decision making process and delays the much needed direction the team needs during the process. As you move along the process try not to get too attached to any screen as priorities and features change over time.
Don’t forget performance
As the development process begins and the app starts to come to life, review the designs and explore adding visual elements to help with any performance challenges. Animation is a great element to reduce the perceived delay of elements that require more time to display.
Let me know what other tools you are using to enable your rapid prototyping process and any helpful tips when designing mobile apps.