Users are not supposed to have to change behavior to adapt to your product. This should be kept in mind when turning ideas into user-friendly software. PDE program in BASE Campus has comply this concept within its Design Engineering Checklist.

Source: https://mobidev.biz

Compiled by: Dr. Khristian Edi Nugroho Soebandrija, BSIE, MM.

Binus Aso School of Engineering, BINUS University.

UI/UX Design Deliverables Checklist [applicable in Product Design Engineering (PDE)]

Authored by: Ekaterina Zagorovskaya, Senior UI/UX Designer at MobiDev

Users are not supposed to have to change behavior to adapt to your product. This should be kept in mind when turning ideas into user-friendly software.

This checklist helps to:

➢ See the UI/UX design process as it is being formulated.

➢ Understand what UI/UX design deliverables product owners should get.

➢ Know how to reduce time and budget risks through UI/UX design methods.

✰ A perfect software lies at the crossroads of user needs, the product owner's business requirements, and various other limitations (related to technology, time and budget).UI/UX Design Philosophy

✰ The UI/UX design phase traces a path from the abstract to the concrete: from general ideas to specific user interface elements and user scenarios.

✰ When designing a software from scratch, the cost of changes must not be overlooked. They increase over time. The earlier changes are introduced, the faster and cheaper further development becomes.

The UI/UX design phase in software development usually comprises a pre-design stage, design research, and 4 main stages. The main stages are sketching, wireframing, visualization and slicing. We'd like to demonstrate these stages using as an example, the product named MDPlayer. You may also read the case study here.

1. UI/UX Design Early Stage: 4 Design Research Deliverables

UI/UX designers are the main software's storytellers. The more they get involved in the planning and strategy of future software, the more innovative the product they design.

Design research is the early stage of UI/UX design that happens alongside business analysis. Business analysts and designers often work together in order to help clients form the more precise vision of a future software product.

The main difference between business analytics and UI/UX design research is that the business analyst creates software requirements from the business perspective, and the UI/UX designer creates from a usability perspective.

The important thing at this stage is a full understanding of purpose, tasks, and the software's technical characteristics by the UI/UX agency. The more details UI/UX designers know about a future software product—the better the user interface and user experience they can create.

The design research stage allows designers to give more precise UI/UX design estimates and accelerate the process. Here UI/UX designers create the following documentation:

1.1 Brief

The brief is the main document that UI/UX designers create at the design research stage. It contains all the required information to start crafting user experience and the user interface for future software.

Example of the brief document:

1.2 User Personas

The better the design team understands the projected users, the more valuable software they design will be.

Personas are generalized portraits of a certain user category, which are based on research and observation. They serve to check whether the software product corresponds to its stated goals.

Here are the required parameters to be included in user personas descriptions:

Example of the user persona document:

 

User Personas Creation Benefits:

➢ It helps to gather requirements for future software more accurately.

➢ Allows estimating time and costs of UI/UX design in a fuller way.

➢ Increases the team's efficiency.

➢ It makes providing developers with tasks easier.

➢ Decreases the risk of mistakes.

1.3 Screen Sections Scheme

Screen sections schemes show the main software sections and screens belonging to each section. For example, if the software has the "Log in" section, it may contain the following screens: registration, log in with Facebook, log in with Google Account, forgot password, etc.

Thus, the UI/UX designer visualizes all software sections and screens in order to understand how many screens he/she should create and how they should interact with one another.

Example of the screen sections scheme:

1.4 User Behavior Diagram

Depending on the tasks to be done, UI/UX designers can make user flows and/or user behavior diagrams. User behavior diagrams, which are used more often, are based on sections and screens inside the system. They visualize sections to be interacted with by users in order to reach their goals within the product.

What is more, user behavior diagrams help UI/UX designers clarify the technical requirements of future software and make a rough estimate for the design stage.

Example of the user behavior diagram:

2. UI/UX Design - Main Deliverables

Once the UI/UX design team has an approximate vision of a future software in hand, the logic, user portraits, and the environment and device(s) to be used, they start to work on the main stages. The most important task here is to visualize the logic, interaction, and interface of a future software product.

2.1 Sketching → Ideation Deliverable

 

Sketching = brainstorming. UI/UX designers come up with dozens of ideas, make drawings and choose the best options. They don't make a detailed interface for each idea but instead outline the software product's visual concept.

 

2.2 Wireframing → UX + UI Design Deliverable

 

This is the main stage of UI/UX design for software. UX design takes a major part here.

UI/UX designers do the following work:

1. Put requirements together

2. Create the structure of the future software

3. Define the future appearance and set of interface elements

4. Design software navigation

5. Create clickable dynamic prototypes for different roles to understand the interaction

Understanding the product's structure allows designers to define the necessity of additional research and helps them to choose an optimal technological solution for further development. Thus, it's important to involve a software developer at this stage. The developer gets acquainted with how the product is going to work and look, estimates time and specifics of the development phase and gives recommendations according to technical requirements and future software capabilities.

Prototypes demonstrate the logic, navigation and basic UX interactions of the future software.QA engineers check and verify UI/UX design according to requirements at this stage.

Сorrections are introduced here. Moreover, it's important to finally establish a solution for user tasks implementation. Everything must be taken into account because the cost of changes after this stage is extremely high.

Related article: What Influences The Cost Of Software Development Services?

 

2.3 Visualization (Mockups) → UI Design Deliverable

This is the stage of visualization and branding of software product's interface elements. Here your application gains visual individuality. The software development team gives a full estimate for development, based on the approved UI/UX design and project documentation.

The cost of logic and navigation changes here is extremely high. It is critical to add new functionality and roles, however, it's also okay to change colors, style or typefaces.

If there is a style guide, the time devoted to the visualization stage can be efficiently reduced. A style guide is a file containing all the unique elements, conditions of the interface elements, spaces and typeface sizes that are expected to be present in the final product.

Example of the style guide:

A style guide can be also developed before the visualization stage - this allows avoiding the creation of all screens individually. Wireframes and style guides help developers implement the UI/UX design of all the internal screens from a template. This method is efficient within a tight schedule and/or template-based system of creating the product. Style guides are also a great addition to the standard visualized examples of 2-3 unique screens of the product.

The software developer should also be involved at this stage as he/she should be informed about all the visual effects to be included in the final product.

2.4 Slicing → Pre-development Stage

Next comes a purely technical phase – preparation for implementation - also called slicing.

This is a standard procedure that begins after the approved start of the development process. Correct slicing means the quality of interface development. After slicing, 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.

UI/UX design stages adjust requirements so the product owner has a full understanding of the logic and all the materials required to start a software development phase. Therefore, it's important to pay maximum attention to the UI/UX design in order to avoid possible risks connected with time and budget during future stages.

Remember, UI/UX design is not just a set of "WOW" effects, but the complex analytical process that determines the level of a software product's success among users after the release.