Product Design

Product Design Checklist

Product Design Checklist, help product designers to quickly check if the product design meets the design specifications and avoid design defects.

Author Gu Wei Publish 2019-07-09

Strategy

Business

The product requirement meets the company's brand concept, business strategy, and product strategy goals

The product requirement describes the source of competitiveness, with a clear model

The product requirement describes the business value provided, with a clear measurement method

The product requirement considers resource consumption, including human resources, time costs, financial costs, and opportunity costs

The product requirement considers the relationship with other business, including priority, contribution, synergy, impact range, replacement relationship, and compatibility

The product requirement considers the market environment, including current market capacity, competition status, upstream and downstream situations, etc.

The product requirement considers the constraints, including technical feasibility, policy regulations, regulatory audits, social responsibility, ethics, and safety, etc.

User

The product requirement describes the user value provided, with a clear measurement method

The product requirement helps users to grow, rather than stealing time, money, or attention

The product requirement considers the user's usage scenarios, including identity, time, environment, frequency, etc.

The product requirement considers how users understand the product features and channels, and the expected user coverage

Scope

Product Model

The product model describes the business logic, including user flow, data flow, and financial flow

The product model describes the feature list, including rules, processes, structures, and scopes

The product model is usually unverified, and needs to consider verification costs, test plans, and judgment logic

The product model is based on a long life cycle, and needs to consider the launch, growth mode, as well as the shutdown and offline impact

Design Model

The design model has a reasonable foundation, considering historical versions, horizontal competitors, social traditions, related standards and specifications, etc.

The design model plays a role in improving, including enhancing capabilities, improving efficiency, reducing costs, better presenting content, and better establishing connections

The design model has a high signal-to-noise ratio, presenting the most important tasks and information, and reducing content that causes confusion

The design model is aligned with the target audience, considering the real needs of users, user scenarios, cognitive abilities, and usage habits, etc.

The design model aligns with the team's design philosophy: inclusive, trustworthy, and simple

Structure

Task Flow

The task flow has a reasonable length, logical sequence, and can predict the results and impact of tasks

The task flow displays the current status, previous and next steps, and overall progress

The task flow can handle interruptions, stops, overdue, rejections, and resume progress after returning

The task flow has clear completion indicators and next steps at the end, supporting task queries

The task flow prevents, corrects, and recovers from failures, describing problems and providing solutions when out of control

Information Architecture

The information architecture has appropriate organizational principles that correctly reflect user expectations

The information architecture has appropriate depth and breadth, with clear and stable structural relationships

The information architecture is flexible, capable of dynamic growth and adaptation to changes

Framework

Interface

The interface layout clearly shows the main scene functions, and filters out the most likely information for the user

The interface layout uses simple and common structures as much as possible, and the interface elements present simple and easy-to-understand logical relationships

The interface layout supports different display sizes, including regular size, small size, wide size, and high size, etc.

The interface layout considers various hardware platforms, including mobile devices, tablet devices, desktop devices, etc.

The interface layout considers the accessibility of the device, including magnification mode, large font size, close animation, high contrast, screen reader, etc.

The interface layout considers different system states, including horizontal screen, split screen, windowing, foldable screen, and external device, etc.

The interface components are based on mature design patterns, as simple, consistent, and understandable as possible

The interface components reduce the cost of operation, including saving history records, providing default values, multi-selection, batch operations, keyboard mode, etc.

The interface components consider the expected and distribution of input data, selecting appropriate keyboard modes, format structures, and component forms, etc.

The interface components comply with the requirements of the corresponding system platform, including iOS, Android and other publishing platforms

The interface components support expected gestures, preferably not as the only operation path, while not conflicting with other elements and system gestures

The interface feedback is responsive, meeting the characteristics of recognizable, detectable, easy to trigger, and fast feedback

The interface feedback is inclusive, including risk warnings, mid-way cancellation, idempotent processing, timeout processing, result revocation, etc.

The interface feedback only attracts moderate attention, adopts appropriate modes, and is easy to eliminate

The navigation system is clear, intuitive, and consistent, indicating the relationship between each position

The navigation system clearly displays the current location and the next location that can be reached

The navigation system is easy to find the history path, and can quickly return to the previous page and the starting page

The navigation system clearly defines the logic of interface replacement, popup, and jump, and the transition is natural and smooth

Information

The information unit is complete, considering the format structure, default value, common value, threshold interval, loading, overload, blank, fault, and expired display

The information scenario is complete, considering the common scenario, first scenario, loading scenario, overload scenario, blank scenario, fault scenario, and expired scenario

The information is adjusted under different user conditions, considering identity, behavior, privacy authorization, etc.

The information is adjusted under different system conditions, considering system permissions, system version, network, battery, volume, brightness, storage space, internationalization and localization, hardware, etc.

A group of information is displayed in a certain order according to a certain rule, considering the combination method, grouping, sorting, filtering, and updating logic

Performance

Information Expression

The information display has a main focus, a reasonable visual route plan, and avoids irrelevant information interference

The information display aims to help the user understand efficiently, considering the proximity, alignment, contrast, and repetition

The information display uses the principle of Gestalt to divide the information block, using fewer separators or borders as possible

The information display clearly conveys the interactive and non-interactive areas, and provides clear guidance to the user

The information display can be separated from color, icon, and image, conveyed through context or other styles

The text expression is effective, as simple, consistent, and easy to understand as possible

The text expression is accurate, without errors in spelling, capitalization, grammar, and punctuation

The text expression considers internationalization, using localized date and time formats, currency and number symbols, and measurement units, etc.

The sound is only used when it is absolutely necessary, only for enhancing interface feedback, including notifications, warnings, and critical moments

The sound should be short and clean, and not be distracting or annoying when triggered frequently

The vibration is only used when it is necessary, for enhancing interface feedback, including state changes, reaching preset points, etc.

Visual Presentation

The design system uses a consistent design appearance, using overall coordinated lines, rounded corners, and light and shadow schemes

The design system is based on a soft 8x8 grid, the element width and height and the spacing are mainly 8 times, and the details can be 4 times

The font printing scheme uses as few fonts, font types, and text styles as possible, using clear, high readability, and hierarchical differences

The font printing scheme provides generous reading experience, using larger font size, line spacing, paragraph spacing, etc.

The font printing scheme considers the differences in different text systems, and can use different line spacing and more sufficient container width

The main color, secondary color, and semantic color of the color scheme conform to the cultural and psychological expectations, and conform to the brand and product positioning

The color scheme defines the hierarchical relationship of neutral colors, defines the use strategy of transparent, fuzzy, gradient, light and shadow, etc.

The color scheme has enough contrast, visible on text, graphics, images, and backgrounds

The color scheme supports Light / Dark two modes, considering that the Dark mode has different color palettes and contrast requirements

The icon uses the familiar and unambiguous graphics for the user, and can be easily distinguished when used with other icons

The icon can use unique design elements to reflect the overall consistency, and reduce color, details, and decorations as much as possible

The icon is clear in shape and aligned with pixels under various sizes, balanced according to the visual center of gravity, and the visual weight of the icon group is consistent

The animation effect needs to convey effective information, including highlighting the focus, responding to the operation, determining the environmental position, and explaining the state change, etc.

The animation effect can provide necessary buffering for loading, transition, etc., but cannot intentionally slow down the interface feedback speed

The animation effect follows the real, natural, and smooth logical rules, keeping simple, not distracting or annoying

The animation effect avoids inducing dizziness or epilepsy, prohibits rapid shaking of elements, large-scale scene tracking, rapid flickering of the screen, etc.

Process and Asset Management

The vector scheme is used as much as possible in the design scheme, and the bitmap needs to be actively compressed

The design scheme is checked for visual representation and restoration, including real machine design check, test package check, online check

The design scheme fully displays the design concept and details to the relevant roles, including design goals, flowcharts, sketches, main scene display, full scene display, description documents, parameter documents, etc.

The design scheme has manageability, sustainability, and readability, including version management, asset integration, design system integration, component sorting, layer naming and grouping, etc.