Personal Web Portfolios
(resources for students 11/2017)
Cynthia Todd
Information ScienceInformation Science
What is A Portfolio and Resources to Build an Effective One
Key Points
Common Pitfalls
Good Practices
Articles and Tips
Web Hosting Platforms
Examples of Good Portfolios
What You Will Learn
2
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
It is defined by Oxford Pocket Dictionary of Current
English as “A set of pieces of creative work intended
to demonstrate a person’s ability to a potential
employer.”
https://en.oxforddictionaries.com/definition/portfo
lio
What is a Personal Web Portfolio
3
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Bentley University User Experience Center:
http://www.bentley.edu/centers/user-experience-center/ux-portfolio-
why-you-need-more-one
2016 Google workshop at Cornell:
http://infosci.cornell.edu/sites/infosci/files/Cornell%20Portfolio%20Wo
rkshop.pdf
Get Started Guides
5
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Tailor the Portfolio like you would a resume
Portfolios, like resumes, should be targeted to a
particular job description especially when it is your
dream job
Spelling, grammatical, tense, and other errors need to
be addressed
It is important to know yourself and what type of job you
are seeking when building a web based portfolio for
your work
Key Points
6
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Understand your audience
Studying several job descriptions in the field you will be
seeking work, will help you to also understand your
target audience as you are designing your portfolio
Write content that shows off your skills while addressing
the key needs of your future employer
Apply the skills learned in User-centered Design when
creating a portfolio
Don’t talk about the project in length from your perspective. Understand and design the portfolio to the employer’s perspective.
Key Points
7
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Project titles should tell what they are about from the employer’s perspective
Use "Web Design" rather than "Dr. Molar's Dental Practice"
Make it easy for the employer to know what your skills are
Make hyperlinks to take you to the projects directly
When using default titles such as "The Blog" Change the title
to reflect what it really is such as "Collection of Advertising
Designs"
Key Points
8
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Project description write so an employer can make sense of it in relationship to their
needs. Review job descriptions to best understand needs of the employers.
Include enough detail
Use photos of wireframe sketches
Show the process of the project steps
While you want the reader/viewer to know if the project was a group
project, you also want them to know what skills you possess. Describe what
you specifically did, what you recommended, or what role you played on
the team
When you speak from a group perspective it clouds the viewer from
differentiating your particular skills
Key Points
9
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
"Your portfolio must demonstrate your design process, include
but not limited to user research, wireframing, low fidelity
prototyping and attention to visual design principles (layout,
typography and information visualization)"
It’s easy to know what they were looking for in a portfolio. Other
job descriptions may not be so clear
You will need to determine by analyzing the job description how
to best illustrate those skills you have for the position
10
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Qualifications from an employer’s job description:
Break the process down into areas based on skills
the employer is seeking
Tell what you learned about teamwork, the
differences in opinion and how it was solved, or
other soft skills the employers are seeking (review
job descriptions of employers you will be sending
this to for clues) and how you worked through the
process
Insert a video about the process
The Process:
11
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Templates are good!
Some students like to program the entire webpage to
highlight their web design and development skills
While this might be appropriate for some, it is MOST
important to ensure the message about your skills is
clear
Many employers find that a site which has been
designed from a stock template more appealing and
easier to use than one coded by you
Key Points
12
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Ensure projects, job areas, and skills can be sorted
according to an employer's needs so your portfolio
can be sorted quickly and easily
Consider More Than One Portfolio
Or
Sort into several skill areas: UX Research, UX Design, or Front-End
Development
Key Points
13
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Do not violate an NDA
Make sure you have permission to use the name of the client or to talk about your project.
See more on
NDA cautions
Don’t include everything you have ever done
Keep your project choices specific to your intended audience needs
Key Points
14
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
One of the first things employers may want to do is click on your name or logo
Make sure it is clickable
Frustrating first experience for employers if it is not
Double check to make sure all links and buttons are working
If the “more about me button” does not work yet instead one must click on the about me words at the
top, fix it before sending
Make it easy for the viewer to get where they want to go
Employers often are looking at portfolios very rapidly and might get frustrated when something doesn’t
work. A tiny detail like this could mean not getting an interview
Link to resume and to social media such as LinkedIn
Use icons where linking is possible and ensure they work: Facebook Twitter and Instagram. If you link to
these make sure they are relevant to the potential employer or potential audience
Watch Out For…
15
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Link to a separate blog?
make sure the employer can get back to your page quickly and intuitively
Don’t just cut and paste from openideo page to your
portfolio
Rewrite or summarize according to the employer perspective
Describe the process
Tell what you learned about teamwork, the differences and insert a video about the
process if possible
Watch Out For
16
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
One students told the story of how a portfolio was
built http://yuqicornell.github.io/projects/myportfolio.html
Projects can be captioned to align with employer needs
Sortable by employer needs makes it easier for the employer to find the skills he has
Employers can see the evolution of the app http://cargocollective.com/Jaskeerat as well as
know she understands iteration (something most employers’ job descriptions were needing)
Include a Next button at the bottom of the page so that it might encourage employers to look at
more
Project Reports: Don't just cut and paste project reports to your portfolio. Make a link to them in
case an employer would like to read it but summarize and rewriting while keeping in mind the
user or employer perspective
Good Practices…
17
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Logo: at the top can be clicked on to bring back to home page
Contact: Take you directly to the Let’s Connect form or email
Make sure to include your contact information in several places to make you easily
accessible to employers
Ensure icons and links are all clickable
Titles: should clearly indicate what is important to employers
The titles of the paragraphs might be trends from job descriptions you are targeting
Employers seeking human robot interaction might want someone with building empathy,
prototypes, brainstorming and ideation, design and evaluation, skills. These could be titles
for paragraphs on your portfolio
Photos are important in web based portfolios
All photos should have “employer relevant” captions because sometimes these are the only
things an employer will read on the first pass
Good Practices…
18
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
“Apparently, in a design thinking workshop, just ideating is not enough, one should be able to
physically create a tangible representation of an idea- and that is exactly we were tasked ahead
to do! At this moment, my fellow business graduates were thoroughly confused, while, I was
completely ecstatic, this was my playing ground, and I was ready to get my hands dirty! But how
do you represent a service based education idea with random stationary?
Well, we were going to find out about that, weren't we. The next 25 mins were spent in more
discussion, sketches, collaborative thinking.
Surprisingly, while we participated in sketching a service model of our idea, we came across
conflicting view points within group members. This was an important learning for me. While we
all had a mental image of our collectively thought idea, our mental models differed considerably
from each other. Creating some kind of a prototype of the idea, ensured that all of us were at the
same pace, as well as made us think about some loopholes that we had previously ignored. ”
Her process is also broken down into areas based on skills where she wants to find jobs.
http://cargocollective.com/Jaskeerat
Strong interpersonal,collaboration, and
communication skills:
19
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
“The Pro Guide To The Perfect UX Portfolio”
highlights strategies for anyone needing a personal
web portfolio
http://thenextweb.com/dd/2015/07/27/the-pro-
guide-to-the-perfect-ux-portfolio/#gref
Articles and Tips
20
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
The links directly below are a few ui/ux personal portfolio ui/ux articles (which offer some nice
tips for those of you beginning to think about or starting a personal web portfolio)
Rachel Graham from Bentley University put together a wonderful guide to get you started
http://www.bentley.edu/centers/user-experience-center/ux-portfolio-why-you-need-more-one
http://www.creativebloq.com/ux/product-portfolios-61412126
http://www.hongkiat.com/blog/ui-designer-portfolios/
http://thenextweb.com/dd/2015/07/27/the-pro-guide-to-the-perfect-ux-portfolio/
http://www.slideshare.net/MaryWharmby/great-ux-portfolios-39212601?next_slideshow=1
http://www.uxbeginner.com/category/ux-portfolios/
This link is not directed to ui/ux designers but also offers some good tips
https://www.themuse.com/advice/the-35-best-personal-websites-weve-ever-seen
Articles and Tips
21
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
Microsoft
UX Designers: UI/UX designers that are working on designing elements for our software
What are we looking for: Hybrid Visual/Interaction designers in visual or interaction. Typically
our hiring managers like to see a portfolio that demonstrates some kind of UI or UX type work. If
it's only graphical or only interaction, it needs to be super good or super relevant for
application, cloud, or OS, but typically HM’s want to see a mix of both work experience and great
design experience in the portfolio.
Some industrial designers also have the ability to do UX Design, but they have to show some
interaction design in their portfolio.
The portfolio is the most important part of the resume, followed by the design of the resume.
Past internships and extracurricular activities are nice but not a must in the UX space.
2016 Survey
23
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
What do you look for when you look at a prospective candidate’s online portfolio?
Google: creativity, craftsmanship
Facebook: If they have TA'ed, past internships, involvement in SWE outside of school
If different from what you listed above, what makes a portfolio stand out to you?
Google: Attention to details
Facebook: Depends – mainly past experience or Hackathons
How important is the online portfolio in making your decision about who to bring in for interviews?
Google: extremely important
Facebook: we look at candidates we have met, are referred or apply online to our website
2016 Survey
24
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
How do you select who to bring in for interviews?
Google: based on portfolio, referral and background
Facebook: background
Do you have any advice to offer to students to make their portfolios more useful or more
meaningful?
Google: include the design process of their projects
Facebook: In terms of resume, how they are laid out. It is difficult to always determine
graduation years and it would be amazing if they all put their expected graduation year. It
helps to weed out what roles they could be a better fit for
2016 Survey
25
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
In your opinion, what mistakes do you frequently see students making in their online portfolios?
Google: have very vague information about their specific contributions and the process of their design
projects
Facebook: Resumes can be choppy, this is a personal preference but Education should always be first on
a resume. When still in school it is one of the details we have to look at to see grad year and when
experience is listed first sometimes again it can be difficult to see the break down if they interned while
taking classes or they took a semester off and co-oped.
Do you have any additional ideas, resources, or ways that I might share your thoughts with the students?
Google: it's a good idea to spend less time on creating the portfolio platform (there are a number of good
platforms out there to host design projects), and focus more on detailing the whole design and thought
process of projects
2016 Survey
26
Key
Points
Common
Pitfalls
Good
Practices
Articles
and Tips
Web
Hosting
Platforms
2016
Survey
Examples
of Good
Portfolios
