---
tags: fellows
---

# Sharol Liu

# **Portfolio Project:**

**SUMMARY**
Our portfolios store the design/research process of our work, our skills and expertise, and more. It gives our employers and peers a glimpse of our talent, personality, and ability to solve problems in a professional manner. It’s always good to have a portfolio handy once an opportunity pops up.

Case study is a good way to make sure that our portfolio is not merely a collection of pretty pictures. Case study explains a designer's journey from the problem to the solution, showing the whats, whys, hows, and the behind-the-scene stories of a project.

*In summary, every case study in your portfolio should **tell a story**, and your portfolio as a whole should **build your personal brand**.*

**TODAY'S MILESTONES**
1. identify your personal brand(s)
2. think of one project that shows your personal brand(s) and tell a story about your project

**PART 1: What Goes into a Portfolio?**
----
* **Intro/Headline**: introduce yourself in 1-3 sentences in a conversational tone

[](https://hannahtam.com/)

[](https://www.glorialo.design/)

> **Activity💪**
> * Think of the industry or niche you hope to enter
> * Here's a pretty cool 👉 [website](https://www.spillthebean.org/) to check out if you want to hear from others' stories in your desired industry!
> * Come up with something unique about yourself (could be a skill, a talent, a goal, an experience, a character trait, anything!) or something special that you bring to the table that could be helpful in your industry. Hold on to this thought. We'll come back to it later.
---
* **Project/Home Page**: case studies(related to art, design, coding, etc.), published research, writing samples, illustrations, etc.

**Open up your mind!** Almost anything can turn into a project! (Notice how portfolios differ from one another depending on their purposes but also share many commonalities.)
1. Product design portfolio: [1 ](https://uxfol.io/sabrina.davies117); [2 ](https://www.glorialo.design/); [3 ](https://www.yichenxie.com/)
* [App Improvement](https://simonpan.com/work/uber/)
* [Prototype design](https://www.yichenxie.com/inworks)
* [Physical product design](https://www.yichenxie.com/luminaire-jar)
* [Adding a feature](https://www.elizabethylin.com/design/project/student-progress/)
2. ELearning portfolios: [1 ](https://www.elizabethylin.com/); [2 ](https://www.aleksdrobik.com/); [3 ](https://joannacappuccilli.com/)
* [Teaching Experience](https://www.elizabethylin.com/teaching/project/labs/)
* [Digitization in education](https://www.moritzoesterlau.de/portfolio/an-approach-to-digitization-in-education.html)
* [In-class game design](https://www.elizabethylin.com/design/project/review-game/)
* [learning experience research](https://lx-research.netlify.app/)

3. Research portfolios: [1 ](http://www.juleslee.com/); [2 ](https://www.katiemccurdy.com/); [3 ](https://carljpearson.com/)
* [volunteer work](https://www.katiemccurdy.com/work/blood)
* [research and strategy on healthcare](https://www.katiemccurdy.com/work/wayfinding)
4. Art portfolios: [1 ](http://www.emmablock.co.uk/); [2 ](https://www.adriancoxart.com/into-the-spirit-garden-2020-solo.html); [3 ](https://www.rickyleungart.com/)
5. Game design portfolios: [1 ](https://www.chauhogamedesigner.com/); [2 ](http://www.jayvanhutten.com/)
* [game design](https://www.elizabethylin.com/design/project/monsterz/)

👉👉👉 [**Sample Case Study Analysis 1**](https://www.cindykhuang.me/work/galeries-lafayette-new)
------
[](https://drive.google.com/file/d/1DJQnVCUwYP-kHWw7iaDaOFGXMcSeWG5c/view?usp=sharing)

**How to tell a complete story**
---
From this example, we can use an acronym, **POWER**, to summarize necessary elements to include in a case study
* **P**roject:
* project description, project background, the problem you are trying to solve
* **O**bjective:
* goals, personal roles, tools used
* **W**ork:
* research data, competitive analysis, empathy map, storyboards, wireframes, work progress snapshots
* **E**nd Results:
* prototypes, impacts, findings, evaluations, reviews, demo video
* **R**eflections:
* future plans, lessons learned, possible improvements

👉👉👉 [**Sample Case Study Analysis 2**](https://www.oliviatruong.design/routr)
------
[](https://drive.google.com/file/d/18WGWnVnYjVEUDPsHzdIjTYPclOTlKdvP/view?usp=sharing)

**How to make a story memorable**
---
From the second example, we can see the elements that make ideas stick: **SUCCES**s, proposed by Chip and Dan Heath

* **Simple**: The art of simplifying is to encapsulate the core idea in terms that anyone can understand, without changing the meaning.
* **Unexpected**: When confronted with the unexpected, your brain jolts out of autopilot and into manual control; the unexpected receives our full attention.
* **Concrete**: using clear, concrete terms drives a message home. A retail worker hasn’t just “delivered outstanding customer service;” they’ve given a customer a refund on a shirt even though it was purchased at another branch.

* **Credible**: One way is to have your story backed by real, trustworthy people, such as experts and real clients. Another way of adding credibility to a story is to use facts and figures to illustrate the point.

* **Emotional**: To get people to donate to starving African children, there are two possible approaches: either present facts and figures about the millions of children starving and perishing every day, or show a picture of just one child in need who could be saved by a donation. The second approach appeals directly to the emotions. Visuals sometimes speak louder than numbers and words.

* **Story**: When selling an idea or product, tell the story behind it. Subway profited immensely from the true story of Jared Fogle, an overweight man who slimmed down to a healthy weight with two Subway meals per day. No slogan could match a story like this.

(Read more at: https://www.heathbrothers.com/download/mts-made-to-stick-chapter1.pdf)

----
>**Activity💪**
> 1. Think of one project you've done that helps show your personal brand! Better yet, the project lends itself to a narrative and features some drama. Any challenges or unexpected changes you encountered? How did you respond? What outcomes did you achieve? Tell a story about how you did your project!
> 

>
> 2. Based on what we've seen and your own experience, what are some efficient storytelling techniques? How can you use them in your discipline?
> * Use **POWER** and **SUCCESs**
> * Use visual artifacts
> * Use numbers to show your results and impacts
> * Use comparisons
> * Acknowledge mistakes, failures, and challenges and then show how you overcome and grow from them
> ...

* **About Page**: Give more detailed information about your background.
* E.g., goals, hobbies, relevant work history, educational background, links to CV and resume, social media links to your professional profile/s (LinkedIn, Instagram, Behance, etc.).
* *Samples*: [1 ](https://www.clairekantner.com/about-1), [2 ](https://www.tushar.work/about), [3 ](https://www.jeremy-stokes.com/about), [4 ](https://www.yichenxie.com/about)

* **(Optional) section for less relevant work**: put other less important projects in another tab; can include smaller, less formal work to show your hobbies, passions, and skills.
* *Samples*: [1 ,](https://alicehuth.com/new-page) [2 ](https://www.glorialo.design/music)

* **(Optional) Footer**: Be creative with footer

**PART 2: What Platforms to Use?**
----
Options: coding personal websites from scratch, Wix, Squarespace, Webflow, WordPress, EditorX, etc.

Wix and Squarespace are the most popular website builders for beginners, but they have very different editors. I recommend experimenting with both before building your portfolio and carefully choosing one that best fits your need and preference.

* **Wix**:
1. gives users more freedom to customize templates;
2. drag-and-drop;
3. allows users to have a free website
4. cannot change templates without loosing all the content
5. has backup and restore features
[Sign Up Page](https://users.wix.com/signin?overrideLocale=en&loginDialogContext=signup),
Tutorial{%youtube cU2jEsI1qfM%}

* **Squarespace**:
1. more structured and curated;
2. edit existing templates within a structure
3. simple modern templates
4. not for free
[Sign Up Page](http://login.squarespace.com),
Tutorial{%youtube Gh0Faa9hT7M%}

> **Activity💪**(10-15 min)
> Watch the tutorials of Wix and Squarespace and choose a website builder that you like (can choose other ones too!) to create a Home page with a short self-introduction.
>

**PART 3: Detail!**
----
* Tips:
* **Quality over quantity**: there's no hard rule about the quantity of projects. If you are a student or early in your career, include 2-4 projects that you are most proud of and most relevant to your desired positions.
* **Mobile optimization**: your portfolio should also look good on mobile devices.
* **Add your personality**: portfolios are very personal, so feel free to express yourself, be creative and let viewers learn about you as a person through your portfolio.
* e.g. 
* e.g. 

* **Easy navigation**: use simple layout and interface design so that audiences can easily find your strongest work.
* Design proper affordances—make sure links are underlined/have a different color.
* Build hierarchy-use different but consistent font types and sizes to build hierarchy. Use bullet points and lists when possible.
* Ensure readability-maximize color contrast (refer to https://webaim.org/resources/contrastchecker/).

**PART 4: Great Artists Steal**
----
I find looking at others' portfolios and projects a good way to find inspirations and learn what works well and what doesn't (and then use those great ideas in my portfolio). It also helps me to jump out of my designer role and critically evaluate my work from a viewer's perspective. Be shameless about stealing great ideas (I stole this sentence from Steve Jobs)!

* **Some inspirations and resources🤓**:
* [collection of sample portfolios](https://cofolios.com/)
* designer communities: [dribbble](https://dribbble.com/), [behance](https://www.behance.net/)
* [web design and development](https://www.awwwards.com/)
* [mobile UI design](https://screenlane.com/?ref=uimovement)
* [icon library](https://iconscout.com/)
* [Figma resources](https://www.figmacrush.com/)

> **Activity💪**(10 min)
> Take a look at the following portfolios and case studies. What they did right and what can be improved?
>
> | Portfolio | Case Study |
> | ---------------------------------------- | -------------------------------------------------------------- |
> | [P 1](https://www.cindykhuang.me/) | [C 1](https://simonpan.com/work/amazon-prime-music/) |
> | [P 2](http://theworstportfolioever.com/) | [C 2](https://www.aleksdrobik.com/portfolio/project-two-4t35k) |
> | [P 3](https://www.francestung.com/) |[C 3](https://www.elizabethylin.com/design/project/exercises/)
>
---
*To create user flow chart, wireframes, and prototypes:

* High-fidelity prototypes: Figma, Sketch (these two are very similar, so if you are familiar with one, it’s very easy to pick up the other.)
* Low-fidelity prototypes: Basalmiq, etc.
* User flow: ProcessOn, Lucidchart, etc.

If you don’t have a preference, I recommend Figma because:

1. It’s free for 3 projects, but you can create as many files within each project as you want.
2. It’s easier to manage files on Figma.
3. It allows easy real-time collaboration.
4. It has a Youtube channel with comprehensive tutorials between 5-10 minutes
5. Take advantage of free Figma templates: https://www.figmacrush.com/free-figma-ui-kits/

Other UX-related tools: