Design is not just what it looks like and feels like. Design is how it works.- Steve Jobs

Quintessential Mobile App Design Process

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.

The design process for a App is divided into two main sections User Experience Design (UXD) and User Interface Design (UID).

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.


Research

The Research Process starts with the “Concept Document” 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.

This answers questions like

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

The research part is summarized into a “Design Research Document”, which acts as a reference for the further processes.


Prototype

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.

Let us take an example of the project “Challenge RX (Fitness App)” for better understanding.

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.


Evaluate

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.


User Interface Design

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’s 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.

The UID of an application defines the “look” 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:

  • backgrounds & control panels
  • colors & textures
  • type – titles & text, bitmap
  • containers for type, video, and controls
  • “white” space
  • alignment & positioning

Design Testing

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.