Shunsuke KawaiApril 25 , 2015

Product Design Process & Documentation Essentials

An Overview Of The Design Process & Documents in Product Design

Prototyping is teamplay

GOAL!!Read on to learn about conceptual

sketching and wireframing, low and high fidelity prototypes, and the

intricacies of design specification.

Iterated Sketching & Wireframing

Sketches are likely the most prevalent documentation you’ ll create during the

design phase.

lough detailed

1. ROUGH SKETCHING

2. WIREFRAMING

Sketches are likely the most prevalent documentation you’ ll create during the design phase.fastest way to visualize a conceptCommon Langage

Wireframing should act as the backbone of the product.

Detailed Mockups

Detailed mockups can either be the highest fidelity wireframes or the next iteration of

concept mockups.

lough detailed

3. Detailed MockupsSome companies will skip wireframing altogether and create a lower fidelity concept mockup before increasing fidelity to a detailed mockup.A detailed mockup is oftentimes a design draft or can be the actual visual design.

PSD to HTML is Dead

Detailed mockups can either be the highest fidelity wireframes or the next iteration of

concept mockups.

Prototypes

If wireframes are about structure, then prototypes are about experience.

lough detailed

UX

Communication & collaboration ( 交流と共同 )

Gauge feasibility while reducing waste( 実現可能性をはかる )失敗することで新しい気づきを得られる。良いとこと悪いところが分かる。

Sell your idea( アイデアを売る )プロトタイプは長ったらしい言葉ではなく、体験と共有することでビジョンを伝えられる。

Test usability earlier( ユーザビリティテストを簡単に )プロトタイプによって早期にユーザビリティの課題をみつけられる。

Set your design priorities( デザインの優先順位を決める )プロトタイピングにより現実的でインタラクションを加味したデザインが考えられる。

Why prototype in design process ?

1. LOW FIDELITY Better and more honest feedbackPeople may focus on the visuals of a picture - perfect prototype

Great for A/B testing 10-20 rough variations in UI ＜ 2-3 pixel-perfect ones.

Cheaper to make mistakesFocuses on flow instead of pagesOne of the most important decisions isn’ t what a page looks like, but what happens before and after.

2. HIGH FIDELITY An early representation of the full product Marketing, sales, and business development can all come to a useful understanding of the product

Reduced development timeUsers may significantly reduce development

Better idea of scopeHigh fidelity prototypes provide more detailed information for accurate engineering cost estimates early in the process

More faithfully

More interactiveMore Comunication

Design Specifications仕様書

While prototypes show interaction and aesthetics, design specifications describe the processes and

artistic assets needed to make all that work.

source: Breaking the UX Status Quo

1. USER FLOW User flows, or journeys, map the entire realm of circumstances and decisions that influences how someone achieves their goal.

source: Task Flowchart

2. TASK FLOW If user flows are holistic (全体的 ) in strategy, then task flows are microscopic in

execution. Task flows describe specific and repeatable series of actions such as setting

the alarm time on an alarm clock app.

I Think ... Key UXD Step

Prototyping is teamplay

3. ASSETS & STYLE Principles Guidelines related to hierarchy, alignment, and simplicity

Colors A small snapshot of the color palette was shown to give just enough information

Typography The design was kept simple by constraining to only one font and listing specific font weights

Iconography The full system and library of icons

Define, Design and Refine

定義ーデザインー洗練

"The goal of wireframing and prototying is

delivering great product concepts, not

deliverables."

定義ーデザインー洗練