Design Processes

The minimum viable product (MVP) is a product version with just enough features to satisfy early customers and to provide feedback for future development.

Building MVPs is beneficial for all types of businesses, but especially startups. This allows you to determine whether the product idea is functional, reliable, usable, and stirs up the intended reaction on the market.

Mockups are wireframes with visual design (colors, images, typography) applied to them. Mockups serve more of a visual function than wireframes — they help stakeholders visualize the look and feel of an interface. In contrast to wireframes, mockups contain actual content instead of dummy text and image placeholders.

Mood boards are physical or digital boards that present a general idea of the future product. They can include images, color palettes, sketches, and other design assets.

Mood boards are often created for discussions with a client to ensure you're on the same page about the look and feel of the end product. The practice also helps prevent costly changes in the final stages of the design process.

Prototypes are usually the next step in the product design process after creating mockups. Sometimes, there's no time or budget for mockups, and instead, UI designers create low-fi prototypes. They typically have color, typography, animations, and actual content. Prototypes are also interactive, allowing users to test the interface and interactions. 

Prototypes don't represent the end product, but they're complete enough to show to users and stakeholders. They allow you to conduct final tests, fix minor issues, and hand over your designs to the development team.

Usability testing evaluates a product or service by testing it with representative users. Typically, users are asked to complete common tasks while moderators observe them and take notes. 

Usability testing allows teams to understand how satisfied users are and spot usability problems. The collected qualitative data (about users' motivations, behaviors, beliefs, feelings, or opinions) and quantitative data (usually numerical results such as how much, how many, how often, etc.) help teams fix issues before coding.^[1]

User flows are diagrams that depict paths that users take while navigating through a product. They map out a series of steps users go through — from the entry point to the final interaction (sign-up, purchase, submission, etc.).

User flows are beneficial for working on information architecture and illustrating all alternative paths users may take. These diagrams also help evaluate existing designs, spot moments of friction, and optimize the user experience.

A user interview is a one-on-one session between an interviewer and a user. The main objective is to gather valuable feedback and insights about the product or to delve into the problem space. In a user interview, participants are typically questioned about their habits, behaviors, needs, and thoughts.

These interviews can be conducted at any stage of the design process since they help obtain qualitative data on user sentiments and opinions regarding an existing or potential product or service.

A user persona is a semi-fictional character that represents your target audience. You can add some demographic details like age, gender, education, and location, to a user persona if you want. But more importantly, it involves defining user needs, goals, frustrations, and motivations. You can also add skills and other relevant background information such as their income, hobbies, likes, etc.

User personas help the design team empathize with users and look at problems from their point of view. Personas should always be based on actual data obtained through research and should be updated regularly over time.

Wireflows are a combination of wireframes and flowcharts. Wireframes show layout but fail to describe interactions, while abstract flowchart blocks aren't focused on the product with which users interact. In wireflows, arrows connect wireframe-styled screens to show the paths users may take, including the feedback to notify users about what's happening in the system.

The most typical use case for wireflows is to document the process of completing a common task on the product.^[2]

Wireframes are static, low, medium, or high-fidelity models of your product. Their goal is to help define your product's IA, functionality requirements, layout, and navigation. Unlike mockups, wireframes don't include logos, visuals, fonts, and colors. And in contrast to prototypes, wireframes are not interactive.

Artboards represent the screens in your application or your website's pages in drawing applications like Figma, Sketch, Balsamiq, Adobe XD, and others. An artboard works as a container for your designs and can contain UI components, images, illustrations, etc. In Figma, artboards are called frames.

Artboards vary in size and orientation. Usually, apps offer artboard presets for popular devices and applications: phones, tablets, desktops, watches, social media, and printing.