After a year in the Design industry and an adventurous career transition, I wanted to UX my very own Portfolio with the skills I had learned.
I had received a good amount of feedback from fellow UX Designers and hiring managers that my previous portfolio felt less like a UX Portfolio and more, perhaps, like that of an illustrator or hobbyist, which may put some hiring managers off.
Redesign my portfolio to better represent myself as a professional UX Designer, imbuing more personality, design skills, while still maintaining a level of creative freedom by incorporating elements of illustration and art direction.
To kick off my research, I decided to look at what I had previously done with my portfolios (where I had been) and took notes of what stuck out to me after a year of design work.
For my first portfolio, I had just moved back from Tokyo and was still very inspired by the minimalism that was everyday life in Japan. I tried to keep only required elements in my design.
After landing my first Design related job at FINRA, I decided that I wanted to be more expressive with my portfolio.
I wanted it to say more of who I was as both a designer and as a person. I also had been hearing that Wix gave creators more freedom when building a website so I decided to try it myself.
My goal for the landing page on my second iteration was to have it be immersive. Whereas I only had one main color on my first iteration, I wanted to repeat a color pattern throughout the website that would match the hero section. I illustrated four large semi-abstract backdrops as Case Study holders based on the theme or topic of the case study.
While perhaps visually pleasing, it did not showcase the UX Skills I had learned thus far. Users had to scroll to see each case study and had no way of going from one case study directly to another. I had also previously sold some of my artwork on the site, but a few hiring managers had mentioned not knowing if my website was a portfolio or online store.
I then took notes from portfolios, both within the UX community and outside, that inspired me.
I also looked at non portfolio related websites.
Intended users of my portfolio would be hiring managers and senior UX Designers.
I grabbed 4 fellow UX Designers and 2 recently Hiring Managers and went over my previous portfolio with them.
Users within the design space were more inclined to understand the purpose of the website at first glance. To combat this I grabbed 4 more users that were not directly a part of the design community and asked them the same questions. They did not understand the purpose of the site without prompting and knew that I had to instantly convey portfolio "vibes."
Before I began sketching idea down I wanted to know what pages were imperative that a user visit, and which would just be "nice to have's." I wanted the user to see the bread and butter of my work, so Case Studies were a priority. This meant that users should not have to click to find out where the case studies were. I also knew that I wanted anyone who had arrived at my portfolio to download my resume, so it needed to be accessible from all pages.
I started out with very rough, hand drawn wireframes of what, based on the information I had gathered in the research phase, would need to go into the portfolio.
I had this cool idea in my second sketch to have the landing page be the two brain hemispheres (a big theme in my artwork), where a user could choose to go into UX or Illustration. But the more I thought about the actual UX of this idea, the more the poor experience came to light. Why should I make users have to click even once just to see where my case studies are located?
Moving into Figma, the first "Low Fidelity" Mockup ended up being higher fidelity than intended, but with plenty of research and user testing conducted, I felt comfortable with the general idea of the layout.
.png)
I asked my 6 original participants the same questions as earlier. 100% of the users knew it was a portfolio. But when I asked how they knew that, they mentioned that the last one was a portfolio, so this must be one as well. I recruited 4 more users who as better "control" testers.
I took this feedback and implemented the findings into the second iteration. Instead of users having to "know" that there was content beneath the fold, I wanted to have a portion of the case studies appear just enough above the fold so that users could see, without having to think, that there was more content available if they scrolled down.
.png)
.png)
I repeated this user testing with 6 users and incorporated the feedback into my designs.
For my third iteration, I was really inspired by how black played with the feel of the page. The black also removed the sanitized feel of the space, without detracting from the minimalism. Based on feedback from the 3rd Iteration, I switched to an all black theme as the black and white juxtaposition "broke the mood." With an all black theme, I could use more colors and still stay within Web Content Accessibility Guidelines.
.png)
.png)
.svg){kind=small}
