{"id":25687,"date":"2017-05-21T21:18:12","date_gmt":"2017-05-22T04:18:12","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/05\/mobile-application-prototyping\/"},"modified":"2017-05-21T21:18:12","modified_gmt":"2017-05-22T04:18:12","slug":"mobile-application-prototyping","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/05\/mobile-application-prototyping\/","title":{"rendered":"Mobile Application Prototyping"},"content":{"rendered":"
\"\"
A medium fideltiy prototype created using Balsamiq.<\/figcaption><\/figure>\n

Concepts<\/h4>\n

prototyping, fidelity, interactive design, functional design, content\u00a0design<\/p>\n

Quotations<\/h4>\n

\u201cIn choosing the prototype fidelity, there is no one correct approach. Most designs of new products are best started with sketches, then moving to either medium- or high-fidelity prototypes, depending on the complexity of the system and the requirements of the dimensions of fidelity.\u201d (Cerejo)<\/p><\/blockquote>\n

\u201cThere are two reasons why one might intentionally make a medium-fidelity prototype not look like a medium-fidelity prototype:<\/p><\/blockquote>\n

The first is that, by using Balsamiq or sketchy Visio stencils to make the prototype look low fidelity, you force users to view it as a draft or work in progress, rather than a polished and finished\u00a0product.<\/p><\/blockquote>\n

The second is that, by giving the prototype a high visual fidelity (for instance, in a comprehensive layout done in Photoshop), you get the user to focus on the visual design and look and feel, including color, fonts, layout, logo and images.\u201d\u00a0(Cerejo)<\/p><\/blockquote>\n

Rhetorical Analysis<\/h4>\n

During the Spring Quarter, I took a course called Interactive Media Design<\/a> in DePaul\u2019s College of Computing and Digital Media. The final project for the course was to design prototypes to assist college students with saving money. We did the project in collaborative groups, so my team decided to come up with a mobile savings application for DePaul students.<\/p>\n

We started by \u201cscoping\u201d the prototype, in Cerejo\u2019s words. The initial goal was to research and strategize. Since this was a group project, we needed to delegate tasks out to different team members and determine the time frame for each team member to complete their tasks. We also chose primary modes of communication and did a little light research on Google for similar mobile savings applications.<\/p>\n

\"\"
Images of apps collected in the Traditional Research\u00a0phase.<\/figcaption><\/figure>\n

The next step was to conduct user research. As a team, we determined that we should conduct a brief survey on any college students we knew. The survey had about 20 questions and it mostly asked the users to rate their savings habits and explain their answers. This way we could identify solutions to general savings issues amongst college students and implement them into the prototype. We ended up with about 40 responses.<\/p>\n

\"\"
A previous clustering exercise we did in\u00a0class.<\/figcaption><\/figure>\n

To identify these problems, the team performed synthesis activities. In these exercises, the team took the responses from the survey and compiled them into clusters. The clusters helped us determine patterns and common mistakes or problems with spending and saving. We also created personas and scenarios to develop stories for our potential common\u00a0users.<\/p>\n

\"\"
Prototype Sketches<\/figcaption><\/figure>\n

Finally, we got around to doing some actual prototyping. At this point, the team figured the visual design was less than important. It certainly came secondary to the functionality and content of the application. For this reason, the team set out on creating low and medium-fidelity prototypes. This ensured that the user could view the application as a draft and focus entirely on clarity, intuitiveness, and readability. We produced sketched prototypes with pencil and paper, and wireframes with Balsamiq<\/a> and InVision<\/a>.<\/p>\n

\"\"
A medium-fidelity prototype created using InVision.<\/figcaption><\/figure>\n

In the end, the team performed usability tests on the prototypes and revised them to fit more focused needs to create a more usable final\u00a0product<\/a>.<\/p>\n

Question<\/h4>\n

The Ehmke reading illustrated that not all features from the initial stages of prototyping make it to the final stages. What features can you see made the transition from our sketches to the \u201cfinal\u201d prototype. What do you think would\u2019ve happened if we focused more on the look and feel of the prototype instead of the content and functionality?<\/p>\n

<\/p>\n

\n

Mobile Application Prototyping<\/a> was originally published in Design Rhetorics<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\n

Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

A medium fideltiy prototype created using Balsamiq. Concepts prototyping, fidelity, interactive design, functional design, content\u00a0design Quotations \u201cIn choosing the prototype fidelity, there is no one correct approach. Most designs of new products are best started with sketches, then moving to either medium- or high-fidelity prototypes, depending on the complexity of the system and the requirements… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":25688,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-25687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t