{"id":6736,"date":"2014-12-09T09:32:20","date_gmt":"2014-12-09T09:32:20","guid":{"rendered":"http:\/\/mobisoftinfotech.com\/resources\/?p=6736"},"modified":"2018-12-24T15:56:34","modified_gmt":"2018-12-24T10:26:34","slug":"quintessential-mobile-app-design-process","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process","title":{"rendered":"The Quintessential Mobile App Design Process"},"content":{"rendered":"
\n
\n

Design is not just what it looks like and feels like. Design is how it works.- Steve Jobs<\/p>\n<\/blockquote>\n

\n

Designing any product or App involves analysis and consideration of many factors, including Aesthetics, Technical specs, Functional specs, Industry standards, and Cost. Before the final production begins a product needs to go through a series of phases in order to assure consistency and attain the desired success.<\/p>\n

The design process for a App is divided into two main sections User Experience Design (UXD) and User Interface Design (UID).<\/p>\n

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability and delight,, which is attained via interaction between the customer and the product. Its a very crucial part of the entire process as this is where aspects like the complete flow, functionality, usability are frozen. This stage proves to be an ultimate reference to start the UID process.UXD is further divided into Research, Prototyping and User Testing.<\/p>\n

\n

Research<\/strong><\/h4>\n

The Research Process starts with the \u201cConcept Document\u201d provided by the client. This document covers the basic requirement of business. The document serves as an initial draft for us to start the research. We study and analyze user tasks, workflows, use case scenarios, environment etc. to understand the psychology of the end users and interpret their needs. We also have an interaction with the stakeholder\/ client to help understand product positioning vis-a-vis competition or market.<\/p>\n

This answers questions like<\/p>\n

    \n
  • What <\/strong>are the project\u2019s goals?<\/li>\n
  • Who <\/strong>is the target audience for this project?<\/li>\n
  • Why <\/strong>is multimedia the best method to achieve the stated goals?<\/li>\n
  • How <\/strong>will this project achieve those goals?<\/li>\n
  • What form<\/strong> will the final deliverable take?<\/li>\n
  • What material<\/strong> will make up the content of the project, and in what form?<\/li>\n
  • What are areas<\/strong> that present potential problems<\/strong> or concerns <\/strong>at the outset of the project?<\/li>\n<\/ul>\n

    The research part is summarized into a \u201cDesign Research Document\u201d, which acts as a reference for the further processes.<\/p>\n

    \n

    Prototype<\/strong><\/h4>\n

    Prototypes are preliminary versions of an application that are created to test various aspects of a design before final production. Prototypes are divided into two categories, Information Architecture and Wireframe (Paper and Digital Wireframe). Information architecture works to create usable content structure out of complex sets of information. We do this using plenty of user-centered design methods: usability tests, persona research, storyboard which helps to create a visual map of the application.<\/p>\n

    Let us take an example of the project \u201cChallenge RX (Fitness App)\u201d for better understanding.<\/p>\n

    Once the information architecture is ready, we create paper prototype which allows us to test the way users respond to the interface in terms of clarity, consistency, navigability, and ease of use. The wireframe is a key to determine the navigational flow of the application. We make sure we include all navigational controls at this stage, including things such as help and\/or quit buttons. We use this map to evaluate the path taken by the user to get to the information we are presenting. After this we create low-Hi fidelity wireframe (line drawings) as clickable HTML walkthrough which helps to clarify the information flow of the app and gives a clear idea of the possible UI for the app.<\/p>\n

    \n

    Evaluate<\/strong><\/h4>\n

    Once the first draft of the wireframe is ready, it is evaluated by the stakeholders and the target users. Depending on the feedback from prototype testing, we make the necessary modifications to the wireframe. Any errors or problems found are addressed and a new wireframe version is tested again. This cycle is repeated until an acceptable level of quality is achieved.<\/p>\n

    \n

    User Interface Design<\/strong><\/h4>\n

    After the wireframes are frozen, the UID phase begins. The most important aspect of an interface design is the ability of the user to get the application to do what he or she wants. We are careful of the assumptions that we make regarding the user\u2019s level of understanding.Users have a certain amount of information that we can rely on, such as the fact that buttons are pushed, knobs are turned, switches are switched, and sliders are slid. Any additional information the user needs is supplied by the interface.<\/p>\n

    The UID of an application defines the \u201clook\u201d of an application. Before any UID starts we do a thorough research of the end user to help us understand which graphical elements will best suit the application, because visual design is the most effective way of conveying visual messages to the user. Depending on the research, the treatment given to the following items is considered in the creation of a visual design:<\/p>\n

      \n
    • backgrounds & control panels<\/li>\n
    • colors & textures<\/li>\n
    • type – titles & text, bitmap<\/li>\n
    • containers for type, video, and controls<\/li>\n
    • “white” space<\/li>\n
    • alignment & positioning<\/li>\n<\/ul>\n
      \n

      Design Testing <\/strong><\/h4>\n

      User testing with real users, real tasks and real scenarios is performed to test the efficiency of the proposed design. Recommended quick fixes are done. Post the final approval from the stakeholder, the design phase is completed and it further goes for development.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      Design is not just what it looks like and feels like. Design is how it works.- Steve Jobs Designing any product or App involves analysis and consideration of many factors, including Aesthetics, Technical specs, Functional specs, Industry standards, and Cost. Before the final production begins a product needs to go through a series of phases […]<\/p>\n","protected":false},"author":1,"featured_media":14087,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[450],"tags":[],"class_list":["post-6736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mguide"],"yoast_head":"\nThe Quintessential Mobile App Design Process - Mobisoft<\/title>\n<meta name=\"description\" content=\"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Quintessential Mobile App Design Process - Mobisoft\" \/>\n<meta property=\"og:description\" content=\"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-09T09:32:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-24T10:26:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png\" \/>\n\t<meta property=\"og:image:width\" content=\"855\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pritam Barhate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pritam Barhate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\"},\"author\":{\"name\":\"Pritam Barhate\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\"},\"headline\":\"The Quintessential Mobile App Design Process\",\"datePublished\":\"2014-12-09T09:32:20+00:00\",\"dateModified\":\"2018-12-24T10:26:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\"},\"wordCount\":841,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png\",\"articleSection\":[\"MGuide\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\",\"name\":\"The Quintessential Mobile App Design Process - Mobisoft\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png\",\"datePublished\":\"2014-12-09T09:32:20+00:00\",\"dateModified\":\"2018-12-24T10:26:34+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\"},\"description\":\"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png\",\"width\":855,\"height\":392,\"caption\":\"Quintessential Mobile App Design Process\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Quintessential Mobile App Design Process\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\",\"name\":\"Pritam Barhate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"caption\":\"Pritam Barhate\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Quintessential Mobile App Design Process - Mobisoft","description":"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process","og_locale":"en_US","og_type":"article","og_title":"The Quintessential Mobile App Design Process - Mobisoft","og_description":"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.","og_url":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process","og_site_name":"Mobisoft Infotech","article_published_time":"2014-12-09T09:32:20+00:00","article_modified_time":"2018-12-24T10:26:34+00:00","og_image":[{"width":855,"height":392,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png","type":"image\/png"}],"author":"Pritam Barhate","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pritam Barhate","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process"},"author":{"name":"Pritam Barhate","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee"},"headline":"The Quintessential Mobile App Design Process","datePublished":"2014-12-09T09:32:20+00:00","dateModified":"2018-12-24T10:26:34+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process"},"wordCount":841,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png","articleSection":["MGuide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process","url":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process","name":"The Quintessential Mobile App Design Process - Mobisoft","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png","datePublished":"2014-12-09T09:32:20+00:00","dateModified":"2018-12-24T10:26:34+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee"},"description":"Time to test your design thinking skills as Mobisoft outlines the basic mobile app design process from research to deployment under M-Guide section.","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2018\/12\/Banner-The-Quintessential-Mobile-App-Design-Process.png","width":855,"height":392,"caption":"Quintessential Mobile App Design Process"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/quintessential-mobile-app-design-process#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"The Quintessential Mobile App Design Process"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee","name":"Pritam Barhate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","caption":"Pritam Barhate"}}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/6736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=6736"}],"version-history":[{"count":16,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/6736\/revisions"}],"predecessor-version":[{"id":14099,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/6736\/revisions\/14099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/14087"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=6736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=6736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=6736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}