[class: PM Camp@Fast Campus#12] UX #4 – 디자인 산출물 만들어 보기 (my note is WIP)

6. 17 수

UX #4 – 디자인 산출물 만들어 보기

UX 디자인 산출물 UX 디자인 산출물의 종류와 예제 UX 디자인 산출물을 위한 기법 – 파워포인트와 키노트 예제 제품을 사용하여, 실제 UX 디자인 산출물을 제작하는 간단한 실습

Mr.M

1. UX design deliverables [Sanghun Woo@Naver, UGC Development Center (Cafe, Blog, Knowledge Man)]
1. lesson:
1. Powerful Sketch plug-ins (e.g. Sketch Plugin Filter)
1. Sketch Content Generator Sketch Plugin > Persona
2. Prerequisite for agile development: all teammates in one place
3. benefit of storyboard: user input and system state
1. transition and state
4. importance of glossary: enhancement of communication e.g. scroll thumb
5. read Communicating the User Experience: A Practical Guide for Creating Useful UX Documentation by Richard Caddick (Author), Steve Cable (Author)
6. downloading book contents: http://avxhome.se/
7. tool
1. interaction: try framerjs (link), Pixate
8. term: drag release, drop image, drop indicator
9. Pixate (200 USD/year)
10. scroll requires view and contents

2. personal takeaway:
1. icon resource for storyboarding: Icon Finder, Noun Project
2. web related resource: Smashing Magazine

[class: PM Camp@Fast Campus#11] UX #3 – 제품의 기능을 묘사하는 방법 (my note is WIP)

6주차

6. 13 토

UX #3 – 제품의 기능을 묘사하는 방법

좋은 제품을 빠른 시간 안에 만들기 위한 방법 살펴보기 Sketch를 사용한 흐름도 작성해 보기 스토리보드의 의미와 요소 과학적 글쓰기와 사용자 스토리

Mr.M

1. Storyboarding [Sanghun Woo@Naver, UGC Development Center (Cafe, Blog, Knowledge Man)]
1. lesson:
1. flow chart: user perspective
2. task: describe each activity in user perspective <-base of feature list in the future
1. user task for vending machine (1,000 won coffee 600, tea 300)
1. approach vending machine
2. look at menu to find out menu and price and find out the menu is still available and the money input area displays acceptance signal
3. pick up wallet and pull out money
4. put money in and wait
5. check whether money is in or not
6. …
3. exceptions
4. swim lane flowchart (c.f. blueprint)
5. homework:
1. vending machine flowchart after coin input and black coffee consumption
2. submit service flowchart
3. study tools (e.g. Sketch 3, )
6. check out yo service
7. read
1. The User Experience Team of One: A Research and Design Survival Guide by Leah Buley
2. Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies) by William Buxton
3. Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter) by Dan Brown
8. purpose of storyboard: fast product launch (c.f. each teammate can imagine the same product to work on their parts)
9. key frame: displaying status change of users
10. key components of storyboard: key frame (status), interaction (transition), description, title (c.f. chapter cover, story) <- read Communicating Design by Dan Brown
11. tool: gesture, popapp.in, skala preview

2. personal takeaway:
1. read books how to write affinity diagram
2. don’t provide too much unnecessary information to teammates

[class: PM Camp@Fast Campus#10] UX #2 – 사용자 알아보기 (my note is WIP)

6. 10 수

UX #2 – 사용자 알아보기

사용자 리서치 맛보기 다양한 사용자 리서치 방법을 익히고 조별 활동으로 간단한 리서치 활동을 수행

Mr.M

1. User research [Sanghun Woo@Naver, UGC Development Center (Cafe, Blog, Knowledge Man)]
1. lesson:
1. user scenario is used in acceptance test
2. user modeling: e.g. movie audience type (e.g. single, friends, couple, family)
1. user property: age, gender, etc.
2. important property: e.g. marriage, children, living location
3. user research: e.g. unfocused group interview (i.e. expert)
4. group activity (윤희, 혜경, 유라, 지현, 길수)
1. topic: discuss challenging area in using mobile services through personal story
2. precondition: capital 20억, technology well-supported
5. affinity diagram
1. affinity
2. affinity column
6. persona making process
1. name, picture
2. motivation, needs
3. scenario, feature
4. behavior
7. homework
1. install PowerMockup
2. install Pixate

2. personal takeaway:
1. help all meeting participants to say something: start conversation with ice-breaking e.g. what’s your feeling color?

[class: PM Camp@Fast Campus#9] UX #1 – UX의 이해 (my note is WIP)

5주차

6. 6 토

UX #1 – UX의 이해

UX 트랜드와 이론을 살펴보고, 제품의 가치에 대해 이해한다. 대표적인 모바일 트랜드와 이를 학습하는 방법 UX와 UI의 개념

Mr.M

1. Understanding UX trends and theory [Sanghun Woo@Naver, UGC Development Center (Cafe, Blog, Knowledge Man)]
1. lesson:
1. homework
1. try task management tool such as Trello, Jira, Slack
2. install Sketch 3 (for wireframe design) and Pixate
3. read Internet Trends 2015 by Mary Meeker
4. read NYTimes Innovation Report
5. read The Wall Street Journal Guide to Information Graphics by Dona M. Wong
6. read Now You See It: Simple Visualization Techniques for Quantitative Analysis by Stephen Few
7. read Beautiful Evidence by Edward Tufte
8. read Business Insider’s Chart Of The Day
9. read iOS Human Interface Guidelines
10. read 100 Things Every Designer Needs to Know About People (Voices That Matter) by Susan Weinschenk
11. read About Face 3: The Essentials of Interaction Design by Alan Cooper
12. read Mental Models: Aligning Design Strategy with Human Behavior by Indi Young
13. read Rapid Contextual Design: A How-to Guide to Key Techniques for User-Centered Design (Interactive Technologies) by by Karen Holtzblatt (Author), Jessamyn Burns Wendell (Author), Shelley Wood (Author) (focus: affinity diagram)
14. test most popular apps of the year
15. study flow chart for exceptional cases
16. next Wed: challenging area in using mobile services
17. consider soft.macx.cn/index.htm for free software trial :)
2. project management process: feature -> design -> develop -> QA
3. data based mobile trends
1. mobile: fast growing sales, time spent on mobile devices
2. app vs. web: rate of interactivity, content update frequency
3. myth vs. fact: homepage visitors, PV, time spent
4. popular content type in Korea: time killing content (contact, connect, communication, entertainment, productivity)
5. tablet usage: watching TV, lying in bed
4. UX
1. gesture: e.g swipe (for contextual function) vs. flick
2. terms
1. UI component: e.g. menu, window, drop-down
2. module: term used in architectural sense
3. standard vs. customized component: e.g. changing color on menu
4. contextual function: displaying things (e.g. right-click, pop-up, contextual menu)
3. input design:
1. try to eliminate input, otherwise make inputting experience (e.g. recent destination for flight destination input area)
2. put critical content top of page
4. care for exceptional cases
1. consider drawing a flow chart
5. purpose
1. of storytelling: sales
2. of UX design: maximizing UX through repurchase
6. characteristic of good UI (can be measured quantitatively): good mental model, fast response, consistency (c.f. UX can be measured qualitatively)
1. c.f. good UI for good UX is basic
7. definition
1. of UX: all emotion and experience when users experience product/design before (e.g. ad), during (e.g. UI) and after (e.g. after service)
2. of design: problem-solving process
5. UI: medium connecting users and machine
1. in wireframe design, priority of information is important
6. presentation prep: summarize a topic by including a subject and finishing your summary in one sentence
7. insight for product: consider ideas which improved previous paint points just a little bit instead of introducing radical features
8. UX development and deliverables
1. define service: service concept and goal
2. define user: persona
3. define user’s needs: persona (+ mental model)
4. define function: function list (which solves users’ needs)
5. define IA (information architecture): service flow
6. design UI: wireframe
7. design interaction: storyboard (final reference before design and development; purpose is to launch fast)
9. behavior-based interview (avoid good, evil, emotion): asking about fact (e.g. frequency, behavior)
10. developer's challenge: sync, backup, mobile & PC

2. personal takeaway:
1. tell developers exceptional cases