UX Portfolio Design on Webflow

Responsive Web Design
Role: UX Designer, Web Designer, Art Director, Copywriter
Client: Mario Smith-Mena
Tools: Figma, Webflow, Illustrator, Photoshop, Procreate
Deliverable: Website

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.


Understanding the Problem

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.

Defining the Goal

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.

Comparative Analysis

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.

Competitive Analysis

I then took notes from portfolios, both within the UX community and outside, that inspired me.

I also looked at non portfolio related websites.

Identifying Users

Intended users of my portfolio would be hiring managers and senior UX Designers.

User Interviews

I grabbed 4 fellow UX Designers and 2 recently Hiring Managers and went over my previous portfolio with them.

  • "What is your first impression of the purpose of this site?"
  • "How would you find a Case Study from the home page?"
  • "Where might one be able to find a resume on this site?"

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."

User Flow/Information Architecture

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.

Layout of available 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?

1st Iteration Prototype/User Testing

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.

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.

  • Users were not wholly aware that information lay beneath the fold.
  • Users weren't sure how the case study section and personal project section were different. Were personal projects UX related?
  • Users weren't sure why my name appeared so often.

2nd Iteration Prototype/User Testing

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.

2nd Iteration Landing Page
2nd Iteration About Page

I repeated this user testing with 6 users and incorporated the feedback into my designs.

  • Landing Page was too simple, left much to be desired.
  • Site seems rather sanitized.

3rd and 4th Iteration Prototype

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.

3rd Iteration
4th Iteration



Pleased with the information architecture, layout, and overall UX of the prototype, I switched hats and began thinking about the actual development. I had briefly considered using wordpress, but had heard that webflow gave ultimate freedom with a pretty steep learning curve. Always up for a good challenge, I decided to dive in and start learning.
Webflow Training Page
I started out by watching quite literally every training video on the Webflow Academy Page. I knew I needed to brush up on my HTML and CSS so I supplemented this stage with some w3schools.com training as well. I drew Div Boxes on paper, referencing the Figma prototype so that when I went to start building the pages, I could have the framework handy.
After over 40 hours spent on videos, mockups, and research, I finally had a brand new portfolio.

Lessons Learned

  • Learning a new system or platform can be very time consuming, account for that in your design and don't be rushed to digest new information. A mistake made, whether due to platform unfamiliarity, or finger misplacement, in the research and design stage can lead to wonderful new ideas that you may not have thought of previously. Enjoy the journey of learning, take your time with new concepts, and most importantly, don't be afraid to make mistakes. Sometimes, refined mistakes are where the golden nuggets lie.
  • The more notes, sketches, and brainstorming performed in the research phase, the easier it is to pivot from and to an idea when an issue is raised.
  • If time allows, iteration on iteration will yield a much more refined product. Admittedly, it was pretty time consuming building each prototype and then transferring an idea to webflow. At times, I wondered if so many iterations were worth it. Now, standing closer to the finish line, the hours spent going in a certain direction only to realize it was a dead end, helped inform my final design.

Next Steps

Far from being over, now that the website has launched I plan on conducting the following: