How To Design Apps: Your Best Guide To Stages Of UI/UX Design

Effective UI/UX design is directed at needs, wishes, and limitations of end users. That's what you must keep in mind when you design a software product. It requires efforts at every design stage. Your software product must be optimized in the way users can, want, or must use it. They are not supposed to change their behavior to adapt to it.

Thus we formed the main principles of our approach to UI/UX design:

• Happy users make the software product owner happy.• A perfect application lies at the crossing of user needs, product owner's business requirements, and various limitations (related to technology, time and budget).• The app design phase is a path from the abstract to the concrete: from general tasks and ideas to specific interface elements and user scenarios.• When you design an app from scratch, cost of changes must not be neglected. It increases over time. The earlier the last changes are discussed and introduced, the faster and cheaper further development becomes.

The design phase in software development usually comprises 3 main parts: sketching, wireframing, and visualization. We'd like to demonstrate them exemplified by a product named MDPlayer. You may read a case study here.

Creation of GUI design presupposes a strict sequence of these stages. The process can be adjusted according to the product owner's needs and tasks, depending on the goals of the project and available documentation. The cost of changes grows substantially with every stage.

How business analysis helps with software interface design

One of the earliest stages of software development is business analysis, which provides fuller understanding of the future software product and target audience. It also allows to give fuller design estimates and accelerate the process.

The outcome of business analysis comprises three main documents:

• Product Vision:

Project structure, goals and mission of the product, its promotion, detailed analysis of competitors on the market, unique value proposition, main functionality and description of the target audience. Product vision can be formed via a business model canvas, which helps the product owner fill in gaps, find strengths and weaknesses, and then design the product knowing the needs and demands of the end user. It is a great helper for the dedicated team that will create the product.

• User Stories:

Short descriptions of the product's functionality from the user's point of view. As a rule, they are made up as follows: "As a, I want to so that."

Project scope in software development

Before the UI/UX design phase starts, project scope is created. It is the main input information that clarifies what the product owner wants to get, including the vision of the application; its capabilities; description of target audience; description and understanding of the limitations and resources required to accomplish the task. The document clarifies many important details that might otherwise either get neglected or completely overlooked.

How to create personas

Another important part of designing mobile apps is creating user personas. Persona is a generalized portrait of a certain user category, which is based on research and observation. Personas serve to check whether the software product corresponds to its goals. They help test it and understand how convenient it will be for the target audience. The better we know the audience, the better and faster we design a valuable application that will solve their problems.

This documentation helps to gather requirements for the future app more accurately. This in turn allows to estimate time and costs of UI/UX design in a fuller way. The efficiency of the team increases. It becomes easier to provide developers with tasks. Any mistakes become less probable.

Now let's proceed to graphical user interface development. Let's see how to design apps that win the love of their users.

Sketching

It takes approximately 20% of total UI/UX design time

Here is a perfect start for designing an app – sketches are created quickly and easily. Iterative exchange of ideas helps find the most advantageous solutions. Research on the target audience and development of the software product's concept are mainly carried out at this stage.

Goals:

Communication, generation and exchange of ideas, creation of a rough logic model for the system, clarification of additional requirements.

Who can use:

Product owner, designer, business analyst.

What the product owner should do:

Participate in discussions, generate ideas for the future product, model situations of usage.

What the product owner should NOT do:

Neglect this design stage, approve raw ideas

What the product owner gets:

Sketch-based prototype that clarifies principles of work and logic of interaction between main units (using such prototyping tools as POP and InVision), general understanding of the scope and required resources.

Wireframing

It takes approximately 50% of total UI/UX design time

This is the structure of the future software product, which is created iteratively. The future appearance, set of interface elements and product logic are defined here. We put user interface design requirements together. This is the main stage of user interface design for mobile applications. It also includes a major part of UX design.

At this stage corrections are introduced, and it's important to determine how the product logic will be implemented, how the solution for users' tasks will be implemented. Understanding of the product's logic and architecture allows to define the necessity of additional research and choice of optimal technological solutions for the development. The logic of the product is tested by QA engineers: they check and consider user scenarios, correspondence with the needs and goals of the target audience, internal interaction logic and correspondence with the app design guidelines. Everything must be taken into account. The cost of changes will become extremely high after this stage.

At this stage a clickable dynamic prototype is created, which demonstrates the logic and UX of the future application. Easily perceived and understood, the prototype is a compelling way to present your software product to investors and beta users.

Creation of a working prototype that fully shows the logic and interface elements of the future product.

Who can use:

Product owner, designer, business analyst, developer.

What the product owner should do:

Discuss the logic and wireframes of the product, do reasearch, introduce changes and test.

What the product owner should NOT do:

Nelgect this design stage, change the product's concept.

What the product owner gets:

Full understanding of the product logic, specification, opportunity to start backend development, partial estimate (made up for the product logic, which might include unclarified requirements: additional visual effects, animations, custom interface elements, etc.), sources (in AI and PSD formats), a prototype in InVision, list of all screens of the product, interrelations of modules and screens in the product.

Visualization

It takes approximately 30% of total UI/UX design time

Final stage: visualization and branding of the software product's interface elements. Here your application gains visual individuality. Animations can be designed in EDGE and After Effects environments. The cost of changes here is extremely high – the team gives a full estimate for development, based on the approved UI/UX design and project documentation.

It is important to involve a developer at this stage. This person must know how the product is going to work and look in order to estimate its implementation, as well as to suggest the least time-consuming ways of implementation that don't contradict the main goals and features of the product (for example, implementation of a standard interface element takes significantly less time than implementation of a custom element; however, the visual differences might be minimal and not affect the logic and how the product performs its tasks). Therefore, the existing time and budget limitations can be tackled in a more effective way.

Visualization and branding of the product according to the product owner's demands and modern UI/UX design trends that engage users.

Who can use:

Product owner, designer, developer.

What the product owner should do:

Decide on all the details, approve them, present their brand's visual style.

What the product owner should NOT do:

Introduce changes to the product logic, add/remove new modules and screens. These changes must have been introduced at the preceding stage.

What the product owner gets:

Source in PSD format, a prototype in InVision, full understanding of the logic and appearance of the product, full estimate for development.

The visualization stage can be efficiently reduced with the help of a styleguide. This is a file that contains all the unique elements and conditions of the interface elements, spaces and typeface sizes. This document helps avoid rendering all screens: wireframes and a styleguide help the developer implement the UI/UX design of all the internal screens by template. This method is efficient within a tight schedule and/or template-based system of the product (there are 3-5 unique screens, while the remainder more or less resembles them visually). Styleguides are a great addition to visualized examples of 2-3 unique screens of the product.

At this stage it is possible to create a compelling video presentation of the application for investors.