T WITCH G AME D EVELOPER L IBRARY F INAL P RESENTATION UX Design - PowerPoint PPT Presentation

T WITCH G AME D EVELOPER L IBRARY F INAL P RESENTATION UX Design — Alexis Miller 8/11/15 Amazon | Twitch Seattle | Confidential

P RESENTATION O VERVIEW I. UX Design Spec II. Design Customer Scenario III. Developer Customer Scenario IV. Producer Customer Scenario V. Conclusion 2

UX D ESIGN S PEC 3

D ESIGN R EQUIREMENTS I. Documentation with code samples II. Search (internal & external) III. “Task-driven” information architecture IV. Game-maker role filter system V. Browsing & search VI. Clear call to action VII.Timeline of product & feature releases VIII.Visually group information on the Article Page 4

F OCUSED D ESIGN 5

6

Prominent Search Call to Action Browsing All Categories listed, links to Article Landing Page Links to Article Links to Article Landing Page Back to Twitch.tv 7

Article Landing Page Visually group content Task-driven information architecture Game-maker role filter system 8

Article Page Table of contents for page Articles + Forum links Content pulled by tagging system Code samples Easy to copy & paste Page feedback 9

S CALABLE D ESIGN 10

11

12

Twitch Identity for video feed Call to Action Timeline of Product & Features Links to blog Toggle between posts by moving date cursor or clicking on image below timeline Content pulled from blog.twitch.tv/category/dev 13

Browsing 14

Live feed of from Game Development Feed Twitch hosts live office hours Three additional video feeds 15

Links to Blog Back to Twitch.tv 16

Article Landing Page Visually group content Task-driven information architecture Game-maker role filter system 17

Article Page Table of contents for page Articles + Forum links Content pulled by tagging system Code samples Easy to copy & paste Page feedback 18

C USTOMER S CENARIO : G AME D ESIGNER L OOKS FOR I DEAS 19

Kim arrives on the Kim wants to home page from a Kim scans the She finds a cool optimize her game Getting Started Google Search. page and looks at idea and shares for Twitch but takes Kim to an She scans the other articles in the page link with doesn’t know article page content & clicks the category her colleagues where to start on Getting Started 20

21

22

23

24

25

26

C USTOMER S CENARIO : G AME D EVELOPER S EARCH F OR A Q UICK A NSWER 27

Carlos doesn’t see Carlos uses a After the page Carlos needs to The first hit takes the object he He types some quick link on the loads Carlos find the Twitch him to a landing needs. A key words into a page to navigate searches for a REST API page in Twitch discussion link Google Search to the API keyword using reference list documentation catches his eye & information control F he clicks on it 28

29

30

31

discuss.dev.twitch.tv 32

C USTOMER S CENARIO : G AME P RODUCER F INDS P RODUCT R OADMAP 33

Mark is planning his development Mark plays around Mark looks at the roadmap and Mark arrives on the The timeline with the timeline, prospective timeline needs to know home page from a immediately reading the recent dates & finds when Twitch will Google Search catches his eye updates & older relevant information release new updates features 34

35

36

Goes to Blog Returns 37

Goes to Blog 38

C ONCLUSION 39

W HAT I LEARNED Communicate with stakeholders who have different perspectives & motivations Communicate high level direction while nose-deep in the project Design work is never done 40

W HAT ’ S N EXT Graduate May 2016 B.A. Interactive Entertainment & Game Design, Minor Entrepreneurship President, Delta Omicron Zeta Professional Leadership Fraternity 41

T HANK Y OU ! Yuyi Hsu, Abizar Vakharia, Sella Rush, Stephen Wang, David McLeod, Aaron Krasnov, Allen Lee, and Trenton Payne 42

A LEXIS M ILLER anmiller@usc.edu lexinteractive.co https://www.linkedin.com/pub/alexis-miller/3a/914/532 43

Q UESTIONS 44

A PPENDIX Reasoning behind singular topic pages Time it takes to arrive on Topic Page & begin to find answer Singular Topic Page SubTopics on Different Pages Descrip(on Opera(on Time ¡(sec) Descrip(on Opera(on Time ¡(sec) Move ¡pointer ¡to ¡Doc ¡ P ¡[menu ¡item] 1.10 Move ¡pointer ¡to ¡Doc ¡ P ¡[menu ¡item] 1.10 Dropdown Dropdown GOMS/ KLM Methodology Click ¡on ¡Doc ¡ K ¡[mouse] 0.2 Click ¡on ¡Doc ¡ K ¡[mouse] 0.2 Dropdown Dropdown K = pressing a key or button Consider ¡what ¡to ¡do ¡ M ¡[key ¡word] 2.15 Consider ¡what ¡to ¡do ¡ M ¡[key ¡word] 2.15 P = pointing with the mouse to a target on display next next H = moving hands to the home position on the keyboard or mouse Move ¡pointer ¡to ¡Topic P ¡[nav] 1.10 Move ¡pointer ¡to ¡Topic P ¡[nav] 1.10 M = mentally preparing for a task Click ¡on ¡Topic K ¡[mouse] 0.2 Click ¡on ¡Topic K ¡[mouse] 0.2 Move ¡pointer ¡to ¡ P ¡[content] 1.10 Move ¡pointer ¡to ¡ P ¡[content] 1.10 Appropriate Page Lengths content ¡area content ¡area Page length needs to support the primary use of the web page. Scroll ¡Page H ¡[content] 0.4 Scroll ¡Page H ¡[content] 0.4 Longer pages are acceptable to: Control ¡F K ¡[content] 0.2 Control ¡F K ¡[content] 0.2 • Facilitate uninterrupted reading, especially on content pages • Simplify page maintenance Eyes ¡adjust ¡to ¡info ¡ H ¡[content] 0.4 Eyes ¡adjust ¡to ¡info ¡ H ¡[content] 0.4 jump jump • Make pages more convenient to download and print 6.85 Didn’t ¡find ¡correct ¡info H ¡[content] 0.4 • Support control F Move ¡pointer ¡to ¡nav P ¡[nav] 1.10 Click ¡on ¡Sub ¡Topic K ¡[mouse] 0.2 Move ¡pointer ¡to ¡ P ¡[content] 1.10 content ¡area Control ¡F K ¡[content] 0.2 Eyes ¡adjust ¡to ¡info ¡ H ¡[content] 0.4 jump 9.65 Direction | Summary | Methodology | Detailed Findings | Assumptions | Next Steps 45