Great UX Portfolios

Great UX Portfolios Its all about the story!

Mary Wharmby!UX Design Director, Spring Studio!!!@marywharmby www.marywharmby.com

Presented to Tradecraft September 16, 2014

UX Portfolios… the pain

Why so hard?• Portfolios are personal

- its difficult to talk about yourself • You’re being judged

- the audience is vague and complex • The stakes are high

- job, career, lifestyle are on the line • Our work is often intangible

So, yikes! Where do you start?

When in doubt, trust the process• Apply our biggest go-to UX designer master tool: UCD

- UCD is the best way we know to solve design problems

- Applying UCD will help make the design process feel less personal taking some of the emotional charge out of it

• TREAT YOUR PORTFOLIO LIKE ANY OTHER PROJECT

Loosely sequenced UCD process

1. Discovery 2. Strategy and Concepts 3. Interaction / UI Design 4. Testing and Iteration 5. Visual Design 6. Development & Deployment

DISCOVERY

Know your audience• Search and analyze job listings

- What level of skills, experience and education are they looking for?

- How do they describe jobs?

• Talk to your mentors and colleagues

• Go on informational interviews

Who are you competing with?

• Research other’s portfolios

• Whats good and what's bad about them?

• How can you stand out?

Discover the possibilities

• What's cool?

• What might set you apart?

• What tone do you want to set?

STRATEGY & CONCEPTS(the hard part)

Who are you today?

Who do you want to be tomorrow?

Your identity may include…ux generalist

(soup-to-nuts design)

specialist (ux research, ia or gamification)

ui designer

designer/developer

entrepreneur

speaker

manager

strategist

educator

organizer

service designer

visual facilitator

a start-up person

an enterprise person

“special” expert

…a mix of specialtiesux generalist

(soup-to-nuts design)

specialist (ux research, ia or gamification)

ui designer

designer/developer

entrepreneur

speaker

manager

strategist

educator

organizer

service designer

visual facilitator

a start-up person

an enterprise person

“special” expert

…and will evolve over timeux generalist

(soup-to-nuts design)

specialist (ux research, ia or gamification)

ui designer

designer/developer

entrepreneur

speaker

manager

strategist

educator

organizer

service designer

visual facilitator

a start-up person

an enterprise person

“special” expert

Develop an overarching strategyManage your identity across multiple channels !

• publishing • blogging • speaking • competing • teaching

!

Determine how each channel supports your overall identity

Then, set specific portfolio goals

• Support professional brand • Get work seen • Get jobs • Find clients • Network • Receive contacts

Some of the content is a given…

• Skills • Experience • Work examples • Education • Downloadable resume • Contact form

But, UX is different

UX has to demonstrate fuzzy skills• Problem solving skills • UX and UCD process skills • Storytelling in both images and words • Big picture thinking • Detailed thinking • Critical thinking • Ability to work with complexity • Ability to think outside the box (creativity)

Thinking: the “invisible” skill

• How do you show thinking?

• Its invisible but you can see evidence of it all around you

Approach 1: Case study

• Usually considered the best approach

• Shows a number of projects

• Traces the entire process from discovery and problem identification to solution (and maybe implementation)

Apply a strong narrative• Problem

• Process

• Solution

• Results*

• Your Role

“Show” the story with evidence• Show, don’t tell

• Include detail but don’t force me into it (options)

• Provide the “why” for each step (what did you learn)

• Highlight pivots and evolution of thinking

• Keep it brief and to the point

Approach 2: Design process• Useful if you don't have complete projects or NDAs prohibit

a full case study approach

• Show process and problem solving but its more generalized (not grounded in a single project)

• Describe each process step and why it matters

• Show examples of deliverables from each stage

That process may look like this

1. Discovery 2. Strategy and Concepts 3. Interaction / UI Design 4. Testing and Iteration 5. Visual Design 6. Development & Deployment

Add something about you!• What’s your story?

• What do you care about?

• What do you love to do?

• What makes you unique?

• What are you looking for?

SKETCHES & WIREFRAMES

UX/UI is usually fairly simple• Create an information architecture (sitemap)

• Define your navigation scheme

• Remember everything you already know about usability:

- Make it easy to find

- Be modular (easier to update)

TESTING & ITERATION

Get it in front of people• Show mockups of your site to colleagues and mentors.

• Get their advise on your narrative, presentation, etc.

• Make changes.

• Rinse and repeat.

• Its worth the time to get something really good

Apply basic usability practices• Is it scannable? 60 second test

• Can I find something specific quickly?

• Are you resonating with the right audience?

• Is your resume downloadable?

• Are you easy to reach? (contact form not an email link)

VISUAL DESIGN

Don’t compete with yourself

• Keep it clean and simple

• Remember the site design is a framework for your work

• Put time into making your work examples look good

DEVELOPMENT & DEPLOYMENT

Lots of optionsSquarespace

Coroflot

Behance

Carbonmade

Dribble

Work on your offline presence

• Maintain a more detailed set of case studies or examples to use during interviews

• Be ready to take a large audience smoothly through your work

• Show-and-tell is a good thing

NDA Junction

NDAs• Follow the NDA

• A few techniques to show limited views of the work

- Blur/box out names and sensitive content

- Show a cropped detail that removes crucial context

- Keep it small and provide just a flavor of the work

- Create a fictional project to showcase similar work

BEST PRACTICE RECAP

Mary’s Top 101. Make your portfolio part of a larger brand strategy that

spans channels and communities

2. Know your audience (research, networking)

3. Show your thinking (show evidence and results)

4. Tell a good story (strong narrative)

5. Make it visual (show, don't tell; document everything)

Mary’s Top 10

6. Less is usually more (be selective)

7. Be honest (everyone starts somewhere)

8. Keep it simple (don’t compete with your own work)

9. Get personal (tell us about yourself)

10. Stay fresh (keep your identity up-to-date and evolving)

RESOURCES

A few examples

UX Portfolio

User Experience Design Portfolio of Simon Pan

Edmund Yu - UI/UX Design Portfolio Seattle

Brian Plemons / Designer

Resources

Five Indispensable Skills for UX Mastery

betteruxportfolios | Portfolio tips for UX professionals

How to wow me with your UX portfolio

10 Tips for a Better UX Portfolio — Medium

The UX Portfolio: Top 10 Questions for UX, UI & Visual Designers

Image Credits• Pain https://flic.kr/p/gSBKuk

• Deer https://flic.kr/p/nE2H4

• Audience https://flic.kr/p/2XuJbH

• Competition https://flic.kr/p/auoXPH

• Inspiration https://flic.kr/p/5VcbTv

• Toolbelt https://flic.kr/p/4fSezm

• Bulldozer https://flic.kr/p/53YCtb

• Craftsman https://flic.kr/p/71fq4J

• Different https://flic.kr/p/4ob8eT

• About you https://flic.kr/p/nnL5Y9

• Stop https://flic.kr/p/cM1FCS

Thank you!

Mary Wharmby!UX Design Director, Spring Studio !!@marywharmby www.marywharmby.com