Slide 1

Slide 1 text

UX PORTFOLIO WORKSHOP by Michelle T. Chin | @soysaucechin @exploreUX | #UXPortfolio

Slide 2

Slide 2 text

ABOUT EXPLOREUX @exploreUX | #UXPortfolio

Slide 3

Slide 3 text

ABOUT EXPLOREUX Announcements

Slide 4

Slide 4 text

ABOUT EXPLOREUX Rate our group!

Slide 5

Slide 5 text

WHO ARE WE?

Slide 6

Slide 6 text

WHAT ARE WE DOING?

Slide 7

Slide 7 text

WHY THIS WORKSHOP?

Slide 8

Slide 8 text

WHY A PORTFOLIO? • Transitioning to a UX career • Looking for a new job • Adding credibility to your career

Slide 9

Slide 9 text

RULE #1: LET IT GO. “I will not get attached to my work.”

Slide 10

Slide 10 text

RULE #1: LET IT GO. This is a process. Iterate.

Slide 11

Slide 11 text

RULE #1: LET IT GO. “I will not get attached to my work.”

Slide 12

Slide 12 text

RULE #2: YOU ARE WHAT YOU PRESENT.

Slide 13

Slide 13 text

DEVELOPER OR UX’R?

Slide 14

Slide 14 text

DESIGNER OR UX’R?

Slide 15

Slide 15 text

UX’R OR WIREFRAMER?

Slide 16

Slide 16 text

WHAT’S DIFFERENT? UX portfolios show process.

Slide 17

Slide 17 text

UX PROCESS

Slide 18

Slide 18 text

THIS WORKSHOP: 1. Recognize what goes into a UX portfolio

Slide 19

Slide 19 text

THIS WORKSHOP: 2. Start the base for yours

Slide 20

Slide 20 text

THIS WORKSHOP: 3. Meet some UXers like yourself

Slide 21

Slide 21 text

THIS WORKSHOP: We’ll be applying our UX skills! GET PUMPED!

Slide 22

Slide 22 text

MEET YOUR GROUP! Open your cards and assemble!

Slide 23

Slide 23 text

INTRODUCE YOURSELF • Your name • What you do / are trying to do • Your favorite food truck

Slide 24

Slide 24 text

WHAT IS YOUR GOAL? What kind of work do you want to do? (UX/interaction designer, user researcher, full time, contract)

Slide 25

Slide 25 text

WHAT IS YOUR GOAL? Where do you want to work? (Large company, agency, government)

Slide 26

Slide 26 text

WHAT IS YOUR GOAL? Anything else? (Build credibility, speaker, blogger)

Slide 27

Slide 27 text

ACTIVITY: WHAT IS YOUR GOAL? Take a few minutes to determine your goal. • What kind of work do you want to do? • Where do you want to work? • Anything else?

Slide 28

Slide 28 text

INVENTORY What are you going to put in it?

Slide 29

Slide 29 text

INVENTORY Projects from start to finish

Slide 30

Slide 30 text

START TO FINISH

Slide 31

Slide 31 text

INVENTORY Work that involved UX process

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

ACTIVITY: INVENTORY • List at least 5 projects relevant to your goal • Start to finish • Work that involved UX process • But what if… • I can’t list projects? • I don’t have any? • What projects would you like to do?

Slide 34

Slide 34 text

INVENTORY What activities have you done on those projects?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

ACTIVITY: INVENTORY • List the UX activities done for each project • User research • Content inventory • Wireframes • Prototyping • Usability testing • and others

Slide 37

Slide 37 text

INVENTORY Do you have the contents?

Slide 38

Slide 38 text

ACTIVITY: INVENTORY Do you have the contents?

Slide 39

Slide 39 text

INVENTORY What about the missing artifacts?

Slide 40

Slide 40 text

INVENTORY Recreate them. (Do not lie - it’s bad & you’ll be figured out)

Slide 41

Slide 41 text

INVENTORY What if you don’t have the projects?

Slide 42

Slide 42 text

INVENTORY Make it up. (Not lying here either.)

Slide 43

Slide 43 text

INVENTORY There’s no shame in taking the time to practice your UX skills and demonstrating a great job.

Slide 44

Slide 44 text

HOW DO I “MAKE UP” PROJECTS? 1. Pick a problem to fix.

Slide 45

Slide 45 text

[reformatting Craigslist, Wikipedia]

Slide 46

Slide 46 text

HOW DO I “MAKE UP” PROJECTS? 2. Create a project - app, site, etc.

Slide 47

Slide 47 text

[INSERT MILLION DOLLAR APP IDEA HERE.]

Slide 48

Slide 48 text

WHAT IF YOU’RE MISSING THE SKILLS? Give yourself a project that allows you to practice the skills.

Slide 49

Slide 49 text

WHAT ARE YOUR GAPS? Think about what skills and work you’re missing.

Slide 50

Slide 50 text

ACTIVITY: WHAT ARE YOUR GAPS? Add those stickers to your name tag.

Slide 51

Slide 51 text

ARCHITECTURE How will you organize this work?

Slide 52

Slide 52 text

ARCHITECTURE By topic (e.g., mobile, user research, etc.)

Slide 53

Slide 53 text

ARCHITECTURE By the project’s lifecycle

Slide 54

Slide 54 text

ARCHITECTURE Decide what’s best for you and your content, but have a method.

Slide 55

Slide 55 text

DESIGN Goal: Get you in for an interview.

Slide 56

Slide 56 text

DESIGN What do you include?

Slide 57

Slide 57 text

DESIGN Show visuals of the process.

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

DESIGN What about stuff I can’t show?

Slide 60

Slide 60 text

SECRET STUFF Blur out identifying information.

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

SECRET STUFF Password protect your work.

Slide 63

Slide 63 text

SECRET STUFF Use your discretion!

Slide 64

Slide 64 text

DESIGN Your BEST work.

Slide 65

Slide 65 text

DESIGN If in doubt, leave it out.

Slide 66

Slide 66 text

DESIGN Tell a story.

Slide 67

Slide 67 text

Intro Architecture / storyboarding Prototype development Usability testing Iteration

Slide 68

Slide 68 text

DESIGN Less is more. You have 10 seconds to make an impression.

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

DESIGN Show the highlights of the project.

Slide 71

Slide 71 text

DESIGN Unique activities, challenges, or really cool stuff!

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

DESIGN How much is too much?

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

DEVELOP What tools do you use?

Slide 76

Slide 76 text

DEVELOP

Slide 77

Slide 77 text

DEVELOP What should you look for?

Slide 78

Slide 78 text

DEVELOP Know your capabilities, your timeframe.

Slide 79

Slide 79 text

DEVELOP Easy to maintain - you’re iterating.

Slide 80

Slide 80 text

DEVELOP Hire someone, barter, feed.

Slide 81

Slide 81 text

TEST Does this meet my goal?

Slide 82

Slide 82 text

TEST Does this portray me?

Slide 83

Slide 83 text

TEST Ask for feedback; take the feedback.

Slide 84

Slide 84 text

TEST Who can I ask?

Slide 85

Slide 85 text

TEST Your friends, people in your group, exploreUX members

Slide 86

Slide 86 text

TEST Don’t forget to thank them!

Slide 87

Slide 87 text

TEST Iterate, retest.

Slide 88

Slide 88 text

PRO TIPS Go one step beyond - it’s worth it.

Slide 89

Slide 89 text

PRO TIP: Stylize your content - make it look good.

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

PRO TIP: Take pics of EVERYTHING.

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

PRO TIP: Get a URL

Slide 94

Slide 94 text

AVOID: Lengthy URLs: bluedalek.wix.com/portfolio student.umd.edu/~bluedalek michelletchinUXdesigner.com TRY: Shorter, memorable URLs: simplebits.com edmundyu.com michelletchin.net

Slide 95

Slide 95 text

PRO TIP: Maintain your portfolio!

Slide 96

Slide 96 text

DON’T FORGET • Rule #1: Let it go. • Rule #2: You are what you present. • Iterate; maintain. • Stay in touch with the folks you meet today. • Complete the eval, please!

Slide 97

Slide 97 text

QUESTIONS?

Slide 98

Slide 98 text

ACTIVITY: NETWORK • Exchange contact info with those in your group • Talk to those that have complementary stickers on their name tag. • Maybe you guys can work on a mock project together…?

Slide 99

Slide 99 text

THANKS! Don’t forget to rate the meetup! @exploreUX | #UXportfolio Michelle T. Chin - @soysaucechin

Slide 100

Slide 100 text

IMAGE CREDITS • Slide 13: http://codepen.io/motorlatitude/pen/wmpux • Slide 14: http://www.duolingo.com • Slide 14: http://www.etsy.com • Slide 14: http://www.nike.com/us/en_us/c/nikeplus-fuelband • Slide 15: http://ideas.semanticfoundry.com/2012/09/09/shades-of-grey-wireframes-as-thinking-device • Slide 15: https://www.flickr.com/photos/anthonyarmendariz/4448219885 • Slide 15: http://creately.com/blog/diagrams/wire-frame-benefits/ • Slide 23: http://tipplesbrews.com/2014/03/28/april-2014-food-truck-schedule • Slide 45: http://www.wikipedia.org/ • Slide 45: https://dribbble.com/wirwoluf/projects/104912-wikipedia-redesign • Slide 61: http://www.alertdiver.com/ • Slide 69: http://www.fumikoyu.com/ • Slide 74: http://www.simonpan.com/ • Slide 90: http://foundation.zurb.com/ All other images were from Michelle’s own collection.

Slide 101

Slide 101 text

EXAMPLES Here are some examples for inspiration, but always do what’s best for you! • Abby the IA: http://abbytheia.wordpress.com • Edmund Yu: http://www.edmundyu.com/ • Sarah Spitler: http://www.sarahspitler.com