An Intro to UX Design @ Goodreads

Slide 1

Slide 1 text

David Fung, UX Designer

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Graphic   Designer  2004-2008 2008-2010 2010-Present Visual   Designer  UX  Designer Graduated AICA-SF 2005 PLANET Magazine  Education Finance Partners Celery Design   Hutner SF Yardbarker  Peek  CBS Interactive Goodreads/Amazon

Slide 4

Slide 4 text

What have I done?

Slide 5

Slide 5 text

TV.COM

Slide 6

Slide 6 text

TV.COM

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

METACRITIC

Slide 9

Slide 9 text

METACRITIC

Slide 10

Slide 10 text

GOODREADS

Slide 11

Slide 11 text

GOODREADS

Slide 12

Slide 12 text

GOODREADS

Slide 13

Slide 13 text

Our Process

Slide 14

Slide 14 text

Wireframes  Omnigrafﬂe UX Pin Mocks  Adobe Photoshop Adobe Fireworks Adobe Illustrator Prototypes  Solidify ! Research Ears Recording Tool  Pear Note, Evernote

Slide 15

Slide 15 text

INTERVIEWS  SURVEYS SYNTHESIZE INTERVIEWS   BRAINSTORM  IDEA GENERATION SKETCHES  WIREFRAMES MEASURING  ITERATING Source: Stanford d.school

Slide 16

Slide 16 text

We design incrementally by using the AGILE Process and work parallel with Development http://www.ibm.com/smarterplanet/us/en/business_agility/article/agiledevelopment.html

Slide 17

Slide 17 text

We design incrementally by using the AGILE Process and work parallel with Development http://www.ibm.com/smarterplanet/us/en/business_agility/article/agiledevelopment.html FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK FEEDBACK

Slide 18

Slide 18 text

Sample of Design Process in AGILE DEVELOPMENT PROCESS DESIGN 2 Week Sprint 2 Week Sprint Iterate and Repeat RESEARCH Mid-sprint

Slide 19

Slide 19 text

http://365andrewssketches.wordpress.com/2013/01/26/new-images-and-a-poll-i-need-your-help/

Slide 20

Slide 20 text

SCOMM ! Super Cool One Minute Meeting

Slide 21

Slide 21 text

How we track tasks? http://eringirard.blogspot.com/2011/01/post-it-wall.html - Instead of Studio   or Project Managers we manage tasks - JIRA, our project  management tool

Slide 22

Slide 22 text

Tools ! http://www.boiseweekly.com/boise/you-just-dont-wear-a-pencil-skirt-when-youre-shaped-like-an-expo-marker/Content?oid=1282265

Slide 23

Slide 23 text

Design Research

Slide 24

Slide 24 text

ETHNOGRAPHIC INTERVIEWS Looking to find out about how users  discover books. ! USABILITY TESTING Looking to find out about how   users find books on our site. Source: Just Enough Research, By Erika Hall

Slide 25

Slide 25 text

ETHNOGRAPHIC INTERVIEWS Ethnography is a research method based on observing people in their natural environment rather than in   a formal research setting.  USABILITY TESTING Tasked-based research. Done   on-site in front of a moderator  or remotely via Skype. Source: Just Enough Research, By Erika Hall

Slide 26

Slide 26 text

Mobile Web

Slide 27

Slide 27 text

Mobile Web 1 designer, 2.5 developers Other GR Teams - Desktop - Mobile (Native) - Goodreads on Kindle

Slide 28

Slide 28 text

MVP (Minimal viable product) - Developing simpliﬁed set   of features - Get in front of users to get   learnings as soon as possible - Designing just enough,   just-in-time, iterative, and   not all upfront http://www.andersramsay.com/2012/09/24/the-ux-of-mvps/

Slide 29

Slide 29 text

MVP (Minimal viable product) - Discovery via newsfeed - Search for Books + Authors - Book, Author, and User Pages - Updating reading status on   Currently Reading books

Slide 30

Slide 30 text

Sketching   (Super Low Fidelity) - Get ideas down quick - Start collaborating early with   lightweight idea generation

Slide 31

Slide 31 text

Wireframing (Still Low-ﬁdelity) - More formalized - Shared with larger group of   developers and stakeholders - Focuses on content and   structure, rather than visual   design

Slide 32

Slide 32 text

Mocks! - “Finalized” design deliverable - Denotes that the design is ready  for developer to start work. Even  though this design is ﬁnished,  some elements may change

Slide 33

Slide 33 text

Usability Testing - Get the designs out there   as early as possible to   collect feedback - Challenge assumptions and   learn about pain points in   real life http://www.blinkux.com/insights/blog/mobile-application-usability-testing/

Slide 34

Slide 34 text

Jumping to Handoff: Annotations - Shows margins, fonts,  and other spacing visually

Slide 35

Slide 35 text

(Trying to) speak the   same language - Encourages further   collaboration with developers - Teaches you about design  limitations

Slide 36

Slide 36 text

Book Recommendations !

Slide 37

Slide 37 text

Thanks! Keep in touch! linkedin.com/in/davidfung/ https://speakerdeck.com/davidfung/an-intro-to-ux-design-at-goodreads