• EN

Your Best Guide To Stages Of Software Design

March 09, 2016 506 View
← Back

Effective UI/UX design is directed at needs, wishes, and limitations of end users. It requires efforts at every design stage. The 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 the product.

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

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

UI/UX design consists of three main stages: sketching, wireframing, and visualization. We want to demonstrate these stages, exemplified by a product named MDPlayer.

The strict sequence of these stages is important for successful product design. 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.

Business analysis

UI/UX design is often preceded by business analysis, which provides fuller understanding of the future product and target audience, and 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 many gaps, find strengths and weaknesses of the product, and then design it with more proper consideration of the end user.

Non-Functional Requirements:

supported devices, versions of browsers and operating systems, screen resolutions; security requirements; performance requirements; system resources, response time, speed of data processing, test specifications; usability requirements; localization requirements.

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 so that ."

Project Scope

Before the UI/UX design starts, project scope is created – the main input information that clarifies what the product owner wants to get, including the vision of the product, its capabilities, description of target audience, and 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 by the product owner.

Personas

Another important part of this stage is designing personas. Persona is a generalized portrait of a certain user category, which is based on research and observation. Personas serve to check whether the product corresponds to its goals. They help test the product 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 product that will solve their problems.

This documentation helps to gather requirements for the future product 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, and any mistakes become less probable.

A perfect start – 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 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 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.

Structure of the future product, which is created iteratively. The future appearance, set of interface elements and product logic are defined here. This is the main design stage which also includes the 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 to the needs and goals of the target audience, internal interaction logic and correspondence to the 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 product. Easily perceived and understood, the prototype is a compelling way to present the product to investors and beta users.

Goals:

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

Final stage: visualization and branding of the product's interface elements.

The product gains visual individuality. Animations in the product 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.

Goals:

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 product for investors.

What comes next?

Next comes a purely technical stage – preparation to implementation, slicing. This is a standard procedure that begins after the approved start of the development. Correct slicing means quality of interface development. Then everything follows the standard procedure: the UI/UX design will be implemented, the product will be delivered on time right into the hands of users, who in turn will leave feedback for further actions.

Now you can see the importance of every stage and the exact value they bring. If there is no meticulously elaborated design, there are great risks of making the product inconvenient for the end user, making its logic overcomplicated and misguiding, and hindering further improvements by building a faulty logic initially.

UI/UX design fixes requirements. The product owner has full understanding of the logic and all the materials required for full estimation and start of development. What is no less important – the product owner gets impressive materials for investors. Within a limited budget it is better to invest in a great design than create a product that will be uninteresting and useless for end users.

comments powered by Disqus
scroll top