In the competitive world of design, having a remarkable portfolio is crucial for standing out from the crowd. Traditionally, designers have relied on platforms like WordPress, Squarespace, or Wix to create their portfolio websites. While these platforms offer convenience, customization options are often limited, resulting in portfolios that look similar and lack uniqueness. As a designer looking to make a lasting impression, I decided to take a different approach and revolutionize my portfolio by building it entirely with Figma. In this blog post, I will share the reasoning behind my decision, the methods I used to bring my vision to life, and the extraordinary outcomes that followed.
🤡 A Competitive Job Market
With the job market becoming increasingly competitive, securing a design job is not easy. As someone who has gone through countless interviews in the past few months, I can attest to the challenges even experienced designers face in today’s market. Hiring managers are overwhelmed with hundreds of applications, often leading to a pause in the hiring process. It’s clear that standing out among the competition is essential, regardless of your level of experience.
♟️ Crafting a Game Plan
Knowing the difficulty of the game I was about to enter, I developed a strategy to differentiate myself while remaining relevant to the role and the companies I was targeting. Imagine being a hiring manager sifting through a mountain of applications. With limited time to capture their attention, it’s crucial to make them interested in getting to know you better.
In this post, I’ll focus specifically on the portfolio aspect, but it’s worth noting that crafting an outstanding resume and other application components is equally important. However, for hiring managers, reviewing a candidate’s work is where the real magic needs to happen.
I must emphasize that my approach may not be perfect or applicable to every case. Understanding your target audience, their expectations, and crafting a compelling story that effectively communicates your experience is vital. I want to share my journey of taking an unconventional approach to building my portfolio and how it allowed me to differentiate myself, surpassing my own expectations.
🎸 Breaking Barriers and Unleashing Creativity
Why did I choose Figma? As designers, we always consider the feasibility of our creations. While we often collaborate with engineering partners to bring our ideas to life, when it comes to our personal portfolios, we become both the designer and the engineer. However, building a portfolio that matches our imagination requires a significant investment of time and effort to learn the necessary development skills.
Enter Figma, the tool that broke down barriers for me. Although Figma doesn’t provide unlimited freedom, it offers enough flexibility to unleash creativity and design impressive visuals that leave a lasting impression. This approach aligned with my goals and catered to my target audience, which consisted of HR/recruiters, hiring managers, and fellow designers. I assumed these individuals would likely have larger monitors, fast computers, and internet speeds. Since I was reaching out to them through applications, I didn’t need to focus on SEO or ranking high in Google. Accessibility and page speed were not significant concerns.
⚒️ Executing the Vision
To make my portfolio presentable on the web and provide a seamless browsing experience, I implemented the following steps:
Canvas Size
I designed my canvas with a width of 1440px based on previous visitor data. Instead of creating a fully responsive design, which can be complex in Figma, I chose a simpler approach of scaling the entire website as the screen size changes. While this may not be the most optimal solution, it proved effective since the majority of visitors tend to have larger screen sizes. Even on a small 800px width screen, the text remained legible, ensuring a satisfactory user experience.
Embedding the Prototype
Once I completed the design, I needed a way to embed the Figma prototype in a web page. While a basic HTML file would have sufficed, I opted for WordPress due to its ease of setup and management.
To embed the Figma prototype, follow these steps:
1. Go to your portfolio prototype in Figma and click on “Get embed”.
2. Copy the source (src) code from the embed code.
3. Paste the copied source into the following iframe template:
<iframe src="Paste your source here%26hide-ui%3D1" frameborder="0" width="100%" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
Lastly, copy the entire iframe code and paste it into your webpage. Voila, you’re all set!
🚀 Rapid Learning and Iteration
One significant advantage I discovered was the speed and ease of iteration. With Figma, I could make design changes and see them instantly reflected on the live website, which feels truly magical ✨.
As feedback and data came in, I could quickly iterate on designs. Here are a few examples of the adjustments I made:
- Mobile Redirect: Initially, I didn’t prioritize mobile optimization, assuming most visitors would view the website on desktop. However, analytics revealed a significant number of mobile visitors. To improve the user experience, I implemented a mobile redirection strategy. When the screen size became too small, mobile visitors were redirected to a page with a friendly message, encouraging them to view the site on a desktop device.
- Highlighting Archive Work: Analyzing session replays showed that visitors spent a considerable amount of time exploring my archive work. Initially, it wasn’t prominently displayed in the main menu, but I later added it to make it easily accessible and more prominent.
- Content Prioritization: By studying session replays, I noticed that most visitors spent the majority of their time viewing my Hagerty case study. Although I initially featured a different case study, I adjusted my portfolio to highlight the Hagerty project during the walkthrough.
These examples are just a glimpse into the numerous adjustments I made throughout the process. The speed and ease of making changes with Figma were invaluable.
🥁 And the Results Are In!
The impact of my portfolio was truly remarkable. Here’s a summary of the results:
Quantitative Data
Website Metrics: The portfolio received 207 views/sessions, with 113 new users and 29 returning users. On average, each user viewed the portfolio twice, indicating strong engagement.
Conversion Metrics: The portfolio led to a total of 210 applications, which resulted in 61 initial calls, 36 interactions with hiring managers, and 14 onsite interviews. At present, I have received 4 job offers. As the interview process is still ongoing, these figures are subject to change. It is important to note that the optimization of my resume and application occurred later in the process, as I did not initially have sufficient data to make those improvements. With proper optimization right from the beginning, the conversion rate leading to initial calls would have significantly increased.
Qualitative Feedback
Hiring managers and teams provided glowing feedback:
“Your portfolio really stood out. The team is incredibly impressed by your work.” – Head of Talent
“Your portfolio shows thoughtfulness, craftsmanship, and creativity.” – Design Manager
These testimonials highlight the portfolio’s ability to leave a lasting impression and effectively communicate skills and creativity.
The combination of quantitative and qualitative data demonstrates that my portfolio had a significant impact. It attracted a substantial audience, engaged hiring managers, and resulted in multiple job offers. The positive feedback further validates the portfolio’s success in standing out and effectively communicating my value as a designer.
Final Thoughts
It’s important to note that there is no one-size-fits-all solution when it comes to building a product design portfolio. Each person’s journey and circumstances are unique. However, valuable insights and strategies can be derived from the approach and methodology I employed.
One crucial aspect of creating an outstanding portfolio is differentiating yourself from the competition. In a saturated market, finding your unique story and presenting it in a compelling way is essential. Consider what sets you apart from others and how you can showcase your skills and experiences in a manner that resonates with the specific company and role you are targeting. Tailoring your portfolio to align with their needs and expectations can significantly increase your chances of standing out.
A rapid feedback loop is another key component of portfolio success. Being able to quickly iterate and make adjustments based on feedback and data is invaluable. Pay attention to analytics, session replays, and user behavior to gain insights into how your portfolio is received. By leveraging these insights, you can make data-driven decisions to optimize your portfolio and ensure it captivates and engages the audience effectively.
While Figma was my chosen tool for building my portfolio, it’s important to consider that there are numerous other tools and platforms available. Selecting the right tools for your specific needs is a personal choice that should align with your skill set, goals, and target audience. Evaluate the feasibility, flexibility, and ease of use offered by different tools to determine which one will best enable you to unleash your creativity and deliver an impressive portfolio.
Above all, remember to enjoy the process of building your portfolio. Embrace the opportunity to showcase your skills, passion, and unique approach to design. Allow your portfolio to be a reflection of your personality and style as a designer. When you genuinely enjoy what you create, it shines through in your work, making it even more captivating and memorable.