great ux portfolios
TRANSCRIPT
![Page 1: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/1.jpg)
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
![Page 2: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/2.jpg)
UX Portfolios… the pain
![Page 3: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/3.jpg)
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
![Page 4: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/4.jpg)
So, yikes! Where do you start?
![Page 5: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/5.jpg)
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
![Page 6: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/6.jpg)
Loosely sequenced UCD process
1. Discovery 2. Strategy and Concepts 3. Interaction / UI Design 4. Testing and Iteration 5. Visual Design 6. Development & Deployment
![Page 7: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/7.jpg)
DISCOVERY
![Page 8: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/8.jpg)
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
![Page 9: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/9.jpg)
Who are you competing with?
• Research other’s portfolios
• Whats good and what's bad about them?
• How can you stand out?
![Page 10: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/10.jpg)
Discover the possibilities
• What's cool?
• What might set you apart?
• What tone do you want to set?
![Page 11: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/11.jpg)
STRATEGY & CONCEPTS(the hard part)
![Page 12: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/12.jpg)
Who are you today?
![Page 13: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/13.jpg)
Who do you want to be tomorrow?
![Page 14: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/14.jpg)
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
![Page 15: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/15.jpg)
…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
![Page 16: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/16.jpg)
…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
![Page 17: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/17.jpg)
Develop an overarching strategyManage your identity across multiple channels !
• publishing • blogging • speaking • competing • teaching
!
Determine how each channel supports your overall identity
![Page 18: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/18.jpg)
Then, set specific portfolio goals
• Support professional brand • Get work seen • Get jobs • Find clients • Network • Receive contacts
![Page 19: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/19.jpg)
Some of the content is a given…
• Skills • Experience • Work examples • Education • Downloadable resume • Contact form
![Page 20: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/20.jpg)
But, UX is different
![Page 21: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/21.jpg)
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)
![Page 22: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/22.jpg)
Thinking: the “invisible” skill
• How do you show thinking?
• Its invisible but you can see evidence of it all around you
![Page 23: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/23.jpg)
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)
![Page 24: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/24.jpg)
Apply a strong narrative• Problem
• Process
• Solution
• Results*
• Your Role
![Page 25: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/25.jpg)
“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
![Page 26: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/26.jpg)
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
![Page 27: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/27.jpg)
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
![Page 28: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/28.jpg)
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?
![Page 29: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/29.jpg)
SKETCHES & WIREFRAMES
![Page 30: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/30.jpg)
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)
![Page 31: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/31.jpg)
TESTING & ITERATION
![Page 32: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/32.jpg)
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
![Page 33: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/33.jpg)
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)
![Page 34: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/34.jpg)
VISUAL DESIGN
![Page 35: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/35.jpg)
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
![Page 36: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/36.jpg)
DEVELOPMENT & DEPLOYMENT
![Page 37: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/37.jpg)
Lots of optionsSquarespace
Coroflot
Behance
Carbonmade
Dribble
![Page 38: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/38.jpg)
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
![Page 39: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/39.jpg)
NDA Junction
![Page 40: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/40.jpg)
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
![Page 41: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/41.jpg)
BEST PRACTICE RECAP
![Page 42: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/42.jpg)
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)
![Page 43: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/43.jpg)
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)
![Page 44: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/44.jpg)
RESOURCES
![Page 45: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/45.jpg)
A few examples
UX Portfolio
User Experience Design Portfolio of Simon Pan
Edmund Yu - UI/UX Design Portfolio Seattle
Brian Plemons / Designer
![Page 46: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/46.jpg)
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
![Page 47: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/47.jpg)
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
![Page 48: Great UX Portfolios](https://reader031.vdocuments.us/reader031/viewer/2022030310/58f9aa4c760da3da068b7791/html5/thumbnails/48.jpg)
Thank you!
Mary Wharmby!UX Design Director, Spring Studio !!@marywharmby www.marywharmby.com