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

Transcription

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

2 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. Stanfy Publications 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.

3 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 produce 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 application.

4 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 Android application (available both in International and US Paper sizes).

5 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 digital app. Interactive design prototype works the best for validating UX design direction with the stakeholders.