Transitioning to UX: Reviewing UX Portfolios
Portfolios are HARD. Varying levels of programming skills, literally thousands of ways to approach them, the information you present, all of it. That's why it's important to look at what other people do and see what you might be interested in showing, and how you might be interested in marketing yourself.
So as I redesign my own own portfolio and reorient my career, in no particular order, here are 10 UX portfolios I'm looking to for inspiration!
Mariusz has a great site. The homepage is simple, clean, and intriguing, and speaks well to his design and coding skills. Though there's a feed of recent items, he offloads the work of organizing and showing the bulk of his work to Dribble. This feels pretty effective at first, and allows him to show a wide array of great work, but it does mean that there's very little detail in terms of his process or research.
I love this portfolio. Love. The standout aspect of this site is the brilliant narrative flow of her case studies. She has tons of great visuals pulled from her studies, quotes from her users, with great insights like "the team spent a lot of time listening to loud users" instead of engaged ones, under the PaintBerri case. The subsequent sections dive more into elements that might be found on a resume, such as quotes and recommendations, work history, and publishings/side projects. The only critique I have is that it'd be great if the top menu stuck to the top of the browser window - if you're part way down her page and want to contact her, you have to scroll all the way back to the top. But that's a minor inconvenience on an otherwise lovely and well-crafted site.
While I don't find his homepage layout or information particularly compelling, the structure of his case studies is great. My favorite feature is a sticky secondary nav with "chapters" for the sections and phases of development, including iterations, prototypes, and where appropriate, a link to the final product. This not only lets you jump around if you want to, it gives each section a subtle "header" without doubling up on information. The main downside is that this format ends up text heavy and with very little whitespace and less apparent differentiation between the sections. But the functionality is great!
I really like this little "My Journey" timeline/map - it gives you a great snapshot into her background and strengths. Her homepage case studies section provides a nice, focused blurb about her primary experiences. Her case studies aren't particularly beautiful or tightly designed, but they are clear, concise, and easy to follow at a glance, with nice big section headers and clear visuals. Her "Design Process and Skills" section feels a little generic, but I'd imagine that an employer would rather see something about this than nothing! Overall it's an effective site that, while not as slick as some, effectively communicates her voice and vision without getting bogged down.
With most of the sites I chose to show a screenshot of their homepage. Edmund's is, for me, pretty bland. The interaction of the site, between swiping different directions or being able to navigate with the arrow keys, is fun in a gimmicky way, but just doesn't contain the depth of content I'd expect from someone touting 12 years of UX experience. There are no case studies, just a page of portfolio items and a page about his design process. The portfolio contains next to no information about the works presented, and the process page uses examples that are too hard to read and have no clear narrative connection. Yes, they are steps in the design process, but I don't feel like I have any insight into how he works, or how that process shaped the product he arrived at. I think this site is a great example of minimalism gone too far.
To die and come back as this site would be a step up on the path to enlightenment. It is the definition of beautiful and delightful microinteractions, a clean but effective delivery of information, and super sexy use of diagonals. His case studies are more spare and tend to be more UI focused, but they're still engaging, with playful titles, brief but effective descriptions, and useful links to the finished product where applicable. I wish there was more narrative on Stefan's projects, but what he does provide is beautifully organized, from style tiles to mock ups to final product.
Alan Shen definitely has a much more code and text-based approach to his case studies, definitely intended for being seen by those deep in the industry. I appreciate the "number of minutes to read" indicators, and when you get into them there's a snappy TL;DR right up top. Something in between the TL;DR and the incredibly granular 12 minute read would be appreciated, I think. I really like the way Alan's toolkit is set up - he's divided it up by the purpose of the program/skill, i.e. "Low Fidelity", "High Fidelity", "Analytics", etc. It's smart and immediately brings together skills and their applications.
I frickin love this sand video thing she's got up front. It's modern and somehow austere and warm at the same time, and uses an optical illusion to give the impression that her name and title are shifting grey tones with it. Of course, her most intriguing case study is the condom game app... the layout is concise, and uses visuals, mock ups, video, and more incredibly well. Little animations pulled from the app show whimsy and bring it to life. My main criticism is that some of the more "resume" type items that would be really interesting to see (skills, programs, etc) are missing.
I really like the way Nishtha approaches her skills, with categories and then detailed subskills (i.e. category skill: interaction design, subskill: persona development). It gives the info of a resume while maintaining an interesting visual hierarchy. She also provides a contact zone in between each section of her homepage - it's convenient, but maybe feels like overkill. The header of her resume is small enough that I wasn't certain what section it was. In her case studies, my favorite unique feature is a nice, clear visual representation of the core problem. Much of it is a little overly wordy and hard to scan, but visuals like heat maps and diagrams help break it up. Overall, there are some great little details well work considering.
I'll say this - you don't have to hunt for her work! There isn't much more than her case studies and her contact page, but the case studies are easily scannable and well laid out. Her process is clear and concise, with informative visuals and a clear style. The navigation is a little clunky - you'd expect the "Office of Choy" to take you back to the home page and it doesn't, clicking on "Work" brings up a menu instead of taking you back to all of her work, things like that. There's also very little in terms of further resume items or personal information - one more page with a picture and a blurb would go a long way towards giving you a better picture of who she is.
I clearly have my work cut out for me... but with the light of these insights to light my way, I've never been more optimistic!