Design a prototype of your mobile app idea.

ASSIGNMENT

Here are the steps that I went through to create my app prototype. If you follow all these steps you should be able to design a strong, well thought-out prototype.

32c29b35

A finished project could include:

DISCOVERY: The big idea for your app - this can just be a written description of what problem your app is going to solve.

What is the big idea for your app?
What is the problem that you are trying to solve with your app?
Who is your app going to be targeted at?
What platform should you use? iOS, Android?

Think of the most successful apps, often they do just one thing really well - Uber, Seamless, Yahoo Weather, Nike Running, Trulia, etc.

DELIVERABLE:

A written description (can be just bullet points) of the big idea and target audience

DEFINITION: Features and functions - this can be a list of the main features that you are thinking you may need to have in the app in order to solve the problem.

What are the main features that you will need to have in your app? For example, does it need a map feature? Is there commerce and a shopping cart involved? Does it have a website component? Will you need to send push notifications? etc, etc
If there is content in your app (articles, pictures, video, etc), where will that come from and who will produce it?

DELIVERABLE:

A written description (can be just bullet points) of the features and content

DESIGN: Sitemap, Flow diagrams, Wireframes - this is where the app starts to come together.

SITEMAP: Using paper, a white board, online tools or desktop tools sketch out the structure of the different screens in your app. One good way to quickly get ideas down and moved around is to us sticky paper notes on a wall or white board. This way you can easily move pages / screens around. You may end up with multiple versions of this. Use lines and arrows to show the relationship between the pages / screens in your app. Think of the sitemap as fluid, you should be evaluating and possibly changing the sitemap throughout the creative process.

0804f256

In my example Sitemap, each block represents a screen in the app. The lines represent how the pages relate to each other, and the icons are a reminder of the fucntiosn that I think might be on the page.

FLOW DIAGRAMS: Going back to the DISCOVERY, think about your target audience, imagine this person, or group of people, now draw out the flow of how this person will use your app. Where do they start, what are their options, what do they do next. Again, the tools are less important, this can be on paper (sticky notes), a white board or tools such ass Axure, Adobe Illustrator, Omnigraffle etc. This process may cause you to change the sitemap - this is a good thing, it means you are staring to problem solve and optimize the solution.

425af7cc

In my sample flow diagram, screens are represented by the green boxes, purple diamonds represent decision points or actions where the user is going to make choices.

WIREFRAMES: Now that you have created the structure and key flows for your app, build the individual screens. At first these can be rough sketches, what needs to be on each page? What buttons or actions need to be on each screen, what content? It is more important at the start to establish the elements and the hierarchy of content, buttons and actions than crafting a perfect looking design at this stage.

DELIVERABLE:

Sitemap
Flow diagram/s
Wireframes

DEPLOY: Get it working! - this is where you connect the wireframes into a working prototype. This is where I use Flinto, but there are other tools that can perform a similar function.

Take the wireframe screens and save them as JPEG or PNG files and get them into Flinto.
Take any buttons, elements (e.g. images) and written content and save it, ready to bring into your prototyping tool.
Connect screens.
Activate buttons.
Create transitions and effects
Publish your app, and share it!

DELIVERABLE:

A sharable mobile app.

c6c245d8

1e8fb66c

The app is now sharable and contains the key screens and features that I want to test.

TEST: Learn from the prototype - Now for the truth of the concept! When testing your app a good first step is to have someone load it on their mobile device - don't tell them anything about the app, in-fact don't say anything, just watch and listen. Have them walk through their first experience with your app portotype - tell them to talk about what they are doing, have them tell you what they are seing, what they think they are meant to do with the app. Take notes and listen to what they say...

Did they have trouble with navigation?
Did they get the "Big Idea" of the app?
Did they explore all of the features, or did they stumble at some point?

Based on your learnings from testing, are you ready to start the final design and coding process? Did you learn about some elements, features or flows that need to be redesigned or tweaked? Use the initial test and based on the results go back to the necessary point in the design process to make the necessary adjustments.

RESOURCES

Tools

Links

Here is a tutorial on how to use Axure: [VIDEO]
Here are some great tutorials on how to use Flinto: https://www.flinto.com/mac/help

Templates

I have attached my first Flinto prototype. To view this document, first install the free Flinto viewer app onto an iOS phone: https://itunes.apple.com/app/id972238373

Regis Betancourt

UX Designer, Creator & Author

--

11