1. Mobile Application UI/UX
Prototyping Process
Stanfy Publications
Exploring Mobile Space

2. Stanfy Publications
www.stanfy.com
Stanfy ©2013, some rights reserved. All trademarks are the property of their respective owners.
Prototyping is an important part of an iterative design process where each screen is refined until it achieves
the desired level of performance and usability. Your future application goes through a series of interesting
transformations, from a simple sketch to detailed prototype and then to the final design. Incorporating some
form of prototyping into the design process is a critical step in creating great apps.
When you have defined your app concept, understood the main use cases, and came up with the list of
features, it is time to think about application user interface and user experience (UI/UX).
With this paper we would like to share our approach in building experiences that seek to satisfy consumers.
ABOUT STANFY PUBLICATIONS
Stanfy is a mobile design and development team specializing in mobile
UI/UX and native iOS & Android app development. Since 2009 we’ve
been creating successful mobile apps for companies from different
fields of business. We сlosely follow newest mobile trends in marketing,
design and tech fields, constantly apply them in our work and share our
findings with the mobile entrepreneurs community.
With this publication we’d like to share our experience in building mobile
apps and the results of our internal investigations in mobile space.
Stanfy Publications
www.stanfy.com

3. Stanfy Publications
www.stanfy.com
Stanfy ©2013, some rights reserved. All trademarks are the property of their respective owners.
Brainstorm UI/UX session
together with the project team
We start with a group brainstorming session. The project team gets together with the client, gathered in one
room or via hangout, and they do a series of quick sketches of the 2-3 main app screens. Our aim is to pro-
duce a simple black and white sketch that shows the basic layout of the app. They are quick to produce and
allows us to quickly test broad concepts of the app interface.
The best way to conduct such brainstorming is to allow everybody to sketch his own ideas for 2 minutes,
then present it to the group and discuss. Such an approach allows each participant to express his ideas
freely, without pressure and influence from others.
We found that this approach is the best way to get really cool and fresh ideas for UI/UX of the future applica-
tion.

4. Stanfy Publications
www.stanfy.com
Stanfy ©2013, some rights reserved. All trademarks are the property of their respective owners.
Quick iterations with paper for a
UI/UX prototype
As soon as you have your first paper sketches, iteratively revise and refine them. Such simple prototypes
can reveal flaws in your design concepts and allows you to resolve these issues before more significant
production commitments are made (such as creating a high-fidelity mockup or coding).
Don’t forget to conduct a quick user test somewhere in the middle of your discussion. Invite some of your
colleagues who are not familiar with the project and ask them to perform some simple tasks.
Whiteboard, markers, stickers and paper with the printed smartphone contours – this is all you need at this
stage.
Especially for this case, we created printable templates with iPhone, iPad and Android frames that will help
you rapidly bring your ideas to life.
Please feel free to download any template below and use it for rapid prototyping of your future iOS or An-
droid application (available both in International and US Paper sizes).
http://stanfy.com/blog/iphone-ipad-ios-android-sketching-templates/

5. Stanfy Publications
www.stanfy.com
Stanfy ©2013, some rights reserved. All trademarks are the property of their respective owners.
UI/UX application wireframes, design
prototype
These wireframes show layout and functionality but have no visual design. Such an interface prototype is
close to the final application with many details and functionality and allows you to examine usability in details.
At this stage, you need to produce all the key screens of your app and carefully think of the user flow. As
usual, iterate quickly and do quick user tests. Revise the prototype based on the test results.
This is the final stage of the design process when you add all the details into the designs and define the
visual style of the app. This design prototype looks like a final product, and it could also work like a realistic
app on your smartphone.
Using such tools like Axure RP or Proto.io, you can make screens actually interact with each other like a digi-
tal app. Interactive design prototype works the best for validating UX design direction with the stakeholders.