Ux Design Process & Docmenteiton

1. Shunsuke Kawai
April 25 , 2015

2. Product Design Process &
Documentation Essentials
An Overview Of The Design Process &
Documents in Product Design

3. GOAL!!
Read on to learn about conceptual
sketching and wireframing,
low and high fidelity prototypes, and the
intricacies of design specification.

4. Iterated Sketching &
Wireframing
Sketches are likely the most prevalent
documentation you’ ll create during the
design phase.

5. lough detailed

6. 1. ROUGH SKETCHING
2. WIREFRAMING
Sketches are likely the most prevalent
documentation you’ ll create during the design
phase.
fastest way to visualize a concept
Common Langage
Wireframing should act as the backbone of the
product.

7. Detailed Mockups
Detailed mockups can either be the highest
fidelity wireframes or the next iteration of
concept mockups.

8. lough detailed

9. 3. Detailed Mockups
Some 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.

10. PSD to HTML is Dead
Detailed mockups can either be the highest
fidelity wireframes or the next iteration of
concept mockups.

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

12. lough detailed
UX

13. Communication & collaboration ( 交流と共同 )
Gauge feasibility while reducing waste( 実現可能性をはかる )
失敗することで新しい気づきを得られる。良いとこと悪いところが分かる。
Sell your idea( アイデアを売る )
プロトタイプは長ったらしい言葉ではなく、体験と共有することでビジョンを伝えられる。
Test usability earlier( ユーザビリティテストを簡単に )
プロトタイプによって早期にユーザビリティの課題をみつけられる。
Set your design priorities( デザインの優先順位を決める )
プロトタイピングにより現実的でインタラクションを加味したデザインが考えられる。
Why prototype in design process ?

15. 1. LOW FIDELITY
Better and more honest feedback
People 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 mistakes
Focuses on flow instead of pages
One of the most important decisions isn’ t what a page looks
like, but what happens before and after.

16. 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 time
Users may significantly reduce development
Better idea of scope
High fidelity prototypes provide more detailed information for
accurate engineering cost estimates early in the process

17. More faithfully

18. More interactive
More Comunication

19. Design Specifications
仕様書
While prototypes show interaction and aesthetics,
design specifications describe the processes and
artistic assets needed to make all that work.

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

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

22. I Think ... Key UXD Step

23. Prototyping is teamplay

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

25. Define,
Design and Refine
定義ーデザインー洗練

26. "The goal of wireframing and prototying is
delivering great product concepts, not
deliverables."