This article showcases five different iterations of my personal portfolio site in chronological order from my first scrappy home on the web to the site you're visiting today. For each site I discuss my inspiration and technical setup, highlights, issues, and takeaways.

At the end of the article I offer a few humble words of advice to other designers based on how my portfolio has changed over time.

I coded this site just after finishing a free web design course. The inspiration for the site came from a series of gifs I created while collaborating with designer Erik Brandt, who is well known for his Ficciones Typografika initiative. Many of the gifs I created made their way on the site.

I made everything on the site myself and wrote all the code. I used A Small Orange for hosting and the primary purpose was to build my web design abilities while having fun.

The site is bold, loud, and lightweight. It was a joy to make, simply because I was exploring new concepts and using code and design purely as a way to express myself.

The site was more experimental than practical. I made it so that I could learn to code, not necessarily to showcase my work.

This site was pivotal because it introduced me to the magic of the web. Reflecting on the work, I realize that making something for yourself is crucial, especially when building a personal site because by nature it should be representative of your take on design. There’s heart and spirit in this simple site and I’m happy I launched it.

I wanted to redesign my first site in order to better showcase my work and attract a broader audience. I’d completed many design projects since my first portfolio launch and I needed a more extensible way to showcase them. I also wanted to use a predictable, clean design that would appeal to a broad range of tastes. My solution was custom built and I wrote all the code for it. I used A Small Orange for hosting.

The site was heavily gridded and regular. This made it extremely easy to navigate, and to use as a tool for presenting my work. As a result, the site helped me land one of my first big design jobs. I was also able to introduce several usability improvements (e.g. states) not present in my first site, though there was still ample room for accessibility improvement.

One popular part of the site was a page where I shared links to my favorite design resources. This received a lot of views from visitors; I regularly heard feedback from friends and got emails from strangers expressing appreciation for the repository I maintained. This was the seed for what is now the writing section of my site. You can still read about my favorite resources for new product designers in without leaving this site today.

With increased site traffic came increased security risk. I discovered this the hard way when viewing the site on a friend’s computer. Unbeknownst to me, there was a bug that allowed third parties to embed ads on my site, essentially cannibalizing all of the negative space I incorporated as part of the design and rendering my portfolio unusable. While I enjoyed coding my site from scratch, I began to question if it was practical. I was confident in my ability to learn about and employ best practices, but I had limited time and knew that the core function of the site was to showcase my design abilities, not my coding expertise.

I ultimately learned about the importance of security on the web. My dissatisfaction with security options available through my hosting plan eventually led me to move my site to a content management system. Another reason for this move was that I began to take on more design work, leaving little time to edit code, keep up with new browser releases, and wrangle with my website host whenever I wanted to make an update.

One positive takeaway was that I saw an opportunity to add content other than projects to the site. My popular resources page made it clear that this approach was a successful way to drive traffic to my portfolio and unlock future career opportunities. I would later capitalize on the popularity of features like my list of resources by penning short articles on sites like Linkedin or Medium.

The inspiration for this site design was a desire to reduce the amount of effort I was spending to update content and keep my site secure. I wanted to maintain the simple, structured approach used in my second site so I began to look for a template that would match. The focus of my work also began to shift from graphic design to product design. I began to talk with other product designers in the New York area and had the chance to connect with Kevin Smith. I loved his case studies, and saw that he was using a customized Squarespace template that had many of the features I was looking for. I reviewed other content management systems targeted towards designers and found their features to be limited (wix) or overly complex (Wordpress.) I also considered building a simple home page that could link to external content repositories such as Behance or Dribbble. I decided against this distributed model because I wanted control over the content and how it was displayed. I also wanted access to metrics and I didn’t want to be beholden to chances in platform governance or popularity. In the end I chose Squarespace because it provided a streamlined backend, minimalist themes that let content shine, and helpful built-in analytics that didn’t require me to connect additional tools or cruch numbers to uncover actionable insights.

Moving my site to a content management system made it unimaginably easy to update my content. I no longer had to update code, but could make real-time changes to projects from my desktop computer or any device. The result was that I constantly added to and refined case studies I had published. My website was no longer a repository to record what I had done; it was a place where I could brainstorm, draft in real time, share my work as it happened, and test new ideas. Using a content management system also helped me keep up with changes in technology. My site now worked on a greater variety of viewport sizes and the headache of tracking security issues no longer devoured my time and attention.

Templates are limiting. That’s part of the point: to standardize as much as possible so that a site owner doesn’t have to work as hard to manage technical details. As a result, the Squarespace version of my site was minimal and visually clean, but it was also bland and didn’t convey much about my personality or my approach to design.

Because Squarespace provided analytics tools that were easy to access and visual in nature I came away with a better understanding of who my audience was and how they interacted with my content. I began to make design decisions based on this.

While I appreciated the simplicity using an out-of-the-box site template, I also began to hit a point in my career where my ability to take on new work had less to do with my skill set and more and more to do with my personal approach to design and my career experience. This need would inspire the next iteration of my site.

This version of my site was an enhancement of what I previously built on Squarespace; I used the same underlying template as in version 2 but maxed out all available customization features. My goal was for the site to better reflect my personality and help me stand out in a crowded field of talented New York City designers.

My primary visual reference for the site was Werner’s Nomenclature of Color, which inspired the use of a coffee-colored background and serif body text. I was certain that no other designers would have a tan site and hoped the choice would give me a mnemonic advantage. Thankfully, I later rethought that strategy.

I continued to host the site on Squarespace but I added plugins for Google Analytics and a heat mapping tool called Hotjar to get more detail about user activity.

This iteration of my site allowed me to start exploring my personal brand. It helped set me apart from competitors in the field and brought back some of the personality present in my earlier portfolio iterations.

Another success was a new design for my about page, which quickly became popular with users. This confirmed that who I am was becoming just as important to visitors as my project content.

I also evolved my case study documentation process by standardizing and streamlining my project format. I created a word document template that could be used to archive any design projects I tackled using common terms and sections. Key categories were defined based on concepts that were important to my clients. The new format was also designed make my work easy to scan; I created clear category titles and re-wrote sections to be succinct and use less technical language. As a result the content also became more evergreen and manageable.

As I took on more product design work the limitations of a content management system began to interfere with how others interpreted my abilities. I could get away with using small text or with using sub-optimal interface components when my site focused on graphic design, but these were ultimately factors that reflected negatively on my product design abilities even though I had no hand in creating them. The thorough customization of my site created confusion as it made it difficult to tell what was dictated by a template and what was informed by my own practice.

Introducing a personal brand gave me a unique voice, but it also diminished the distinctions between each of my case studies and a new blog section I added to the site. In some instances my loud personal branding competed with my case study work. This visual conflict led me to believe that my case study pages could play a greater role in subtly communicating design decisions behind each project. I hypothesized that improving the contrast between my content would also help me showcase the breadth and diversity of my work.

Yet another negative was the tiered structure of my site. Analytics data showed that people were spending plenty of time on my site, but few visitors were actually going beyond my homepage to view my work. One section in particular, a page detailing my client services and offerings, received very little traffic and created confusion about my availability to take on new work. I was glad I experimented with different kinds of pages and organizational models, but it seemed that a simplified architecture overall could benefit visitors.

My core insight was that I needed more control over all site design elements than I had in Squarespace. I began to evaluate tools and methods which would give me the flexibility I needed to showcase both my work and my unique approach to product design.

With the current version of my portfolio I aimed to (1) make a more consumer-grade site that would better showcase my approach to product design (2) further highlight my personality by refining my personal brand and expanding my "About Me" section (3) increase pages views, with a focus on project pages (4) visually differentiate the kinds of content offered on my site.

I'll be honest, my new site was inspired by trends in web design, especially those showcased on Awwwards. I wanted to show potential clients that I was familiar with popular elements in contemporary design (e.g. marquees, oversize text, unusual display fonts) while also demonstrating my understanding of usability best practices. I wanted my site to feel consumer-grade and bespoke, but I also needed to make it change-resilient and easy to update.

My site is currently built on Webflow. I considered other options like portfolio template tools Semplice or Carbon Made. I also thought about hiring a developer to help me realize my vision, but felt I would lose an opportunity to communicate my unique view of product design if I did. I ultimately chose Webflow because it gave me both granular control and the benefits of a standard content management system. Another selling factor was that the Webflow interface leverages concepts from front-end development. Because I coded my first two sites, I was comfortable with this approach. I also felt confident that I could use my own knowledge of code to make a site that was both sustainable and easy to enhance with custom snippets when I saw fit.

One clear risk is that my old site was successful (based on metrics and user feedback); my new site may not appeal to the same audience and could see a drop in traffic. Second, it is unclear whether the new site architecture will increase views of projects or written articles. To account for this I plan to monitor analytics and make changes as needed. A final risk is that while I feel the site is more professional and consumer-grade overall, others may not agree. I am taking some risks by using large text, a funky display font, mouse follow animations, and very loud colors. These decisions reflect my personality but If they prove unpopular it could require me to redesign site elements.

I’ve just launched my site. I’m still monitoring analytics data to uncover insights and outcomes. That said, my current site is a drastic improvement from my first gif-adorned portfolio and I’m proud to see how I’ve grown. Specifically, it appears that my disciplined, consistent, iterative, and data-driven approach to managing my design practice has produced compounded returns. It’s easy to lose sight of that cumulative overall impact from update to update, but taken as a whole it’s apparent that I’m on the right path. There’s plenty more that I want to do and learn, and I can’t wait to see what my site looks like in another 10 or 15 years.

Now that I have control over how content is presented I’d like to redesign some of the decks I use to talk about design for the web. I’m inspired by precedents penned by Ehsan Noursalehi, Frank Chimero, and Brad Frost in particular. I also think there’s an opportunity to add interactive elements to my writing and case studies to make them more impactful, similar to comparison buttons Chris Annetts added to his case study of a Tesco loan calculator.

In the future I’d like to make my site even more interactive. One way to do this would be by creating and adding video content about my work. I may test this by creating a short film about one of my projects and seeing how it fares; even a Loom recording of a project overview may be a sufficient test case. I may also consider working with a developer in the future to add more elegant animations in order to make the site feel more cutting-edge. I’m hesitant to do that now because I feel it’s more important for me to be able to manage all parts of the site independently, especially given that I am constantly implementing and testing new ideas.

Separately I may add a newsletter sign up form so that I have direct access to my audience. Right now I have easy access to my target demographic but I know that this could  change with the whims of Silicon Valley. For a newsletter service to be worth my effort, I’d have to do more work to grow my audience and develop a content/business plan that would appeal to their interests. If I went this route, I’d likely attempt the automated model used by Matej Latin in his self-service email course, Better Web Type. This would provide value to my audience without requiring constant content development.

It's easy to realize how much you grow when you update your portfolio. The change between one iteration and the next may not feel substantial, but if done consistently for several years the benefits will be immense simply because you'll learn more about your voice, your audience, and your content.

Don't be afraid to fill your site with new ideas, even if they're not "ready" to see the light of day. Your portfolio shouldn't be a closet where you store things from the past. It should be a living ecosystem you can use to quickly test the validity of an idea. Trying new things, listening to your audience, and iterating is the best way to improve.

Similarly, don't just update your site to keep up with the times. Use your site redesign as an opportunity to refine your content, learn a new skill or tool, or as a way to connect with your audience. This will transform the task from a housekeeping chore into a more engaging avenue for growth.

It can be overwhelming to figure out how to position your portfolio, especially if you haven't yet found an audience. Your career goals will shape your site design just as much as your metrics. Think about where you want to take your career and react accordingly.

Your personal approach is half of the value of your portfolio. Don't be afraid to let your portfolio reflect your personal style. Do be strategic and make sure that how you employ your style furthers your career goals and meets the needs of your audience.

If you've made it this far, thank you so much for reading. I hope that sharing my long-term journey towards becoming a better designer inspires you to invest in your work and career today and every day.