My First Second Portfolio

Screenshot of Figma workspace with a hi-fi desktop mockup, color swatches, text button components, and plant illustration components

One of the hardest parts about transitioning into a design position is making a first portfolio. Between unreachable perfectionism and imposter syndrome, the entire process is emotionally intense.

I made my first portfolio site during my apprenticeship and needed to have a professional way to present my case studies for our final interviews in a limited amount of time. After a lot of stress and hair pulling, I ended up compromising with an Adobe Sites template adjusted enough to let my personality show through, while also using the polish of the template for quick and easy set up. I told myself “Its ok, its only your first portfolio. You’ll make another soon.”

And even as I gained more and more work experience and saved case study artifacts, I knew I would be able to update my portfolio to be bigger and better soon…

Maybe tomorrow…

…

Much, much, later…

A few years later and with several new projects ready to be organized into case studies, there was no more pushing it off. It was time to make my first second portfolio!

Step 1: Who is this portfolio for?

The first step to updating my portfolio is to keep in mind who this portfolio is for. I made sure to list my intended audience so that I could tailor my decisions around providing the best experience for my intended users.

This would include: Recruiters: Because I’m re-entering the job market, I know that primarily I’ll be sending my resume and portfolio to recruiters. I want to make sure that this new site is easy to navigate, and can communicate who I am to them clearly and succinctly.

Other Designers(That I don’t know yet…but am excited to meet!): Along with recruiters, I also aim for this site to communicate who I am to design directors and other UX designers. This site is acting as an archive of my own work for other designers to look through and get an understanding of who I am as a designer. To do this, the site needs to communicate my workflow and values.

Other Designers(That I do know and have worked with…Hi!): I will admit, sometimes I check out portfolio sites of old colleagues to see what they’ve been up to. And just in case I’m not the only one that does this, I want to make sure that my own site is up to date so they can know what I’ve been working on! My intention is to keep the site up to date and invite designers to reach out and talk more about our developing skills and processes.

Things I plan to keep: -I liked my color branding and gardening theme. I see my work and professional experience as ever growing, and want to retain that visual metaphor. -I’ve gotten good feedback on my use of illustrations and comics in my portfolio. I’d like to lean into that and incorporate more comics into my case studies to summarize complex information.

Things I plan to let go: -While the template worked in a pinch, I wanted more control over the layout and presentation -Some of the sections and case studies worked for when I was a beginner, but now are less relevant

With my audience in mind and my goals set, it was time to start the actual process of redesigning my portfolio to meet those needs.

Step 2: Updating Designs in Figma

I’m not going into this with a clean slate. I still want my design to build on top of the branding that I used in my first portfolio while also refining it.

For architecture, I knew that I wanted to keep the main pages for a home page, case study navigation, and an about page with resume information. With more freedom, I also wanted to make a case study template that used a style system to help with rewriting old case studies as well as building new ones.

I was inspired by other designers that incorporated articles into their portfolio to show more of their process outside of case studies. For this version, I decided that I wanted to highlight my medium blog within the top navigation and monitor its click rate and any feedback to decide if I would want to incorporate a dedicated article page in the future.

When first designing my portfolio and brand I did a lot of exploring on how I wanted my logo to look. I ended up deciding on a budding plant to represent my growth mindset and desire to learn. At the time, I had a lot of directions I wanted to go in but wasn’t sure which one to take yet, so the bud represented the opportunity to specialize as I found my way in my career.

Sketch explorations of my flowerpot logo, mainly focusing on explorations of the bud and flower type

When exploring design, I leaned more in to this plant branding theme with soft and dark green colors and plant illustration buttons to signify each phase of my case study template. I wanted the flowers themselves to represent the design phases, like how the ideation flower branches into different blossoms in exploration.

During the process of rewriting my case studies, I tried to find specific moments and information on the user that I wanted to highlight and visualize though comics. These mainly focused on user personas and pain points.

Getting to use my illustration skills helped me feel like my portfolio was my own, and fet like reconnecting with my background in animation and traditional art.

A comic of a stressed user submerged in a sea of mail, asking “where was that article again?”

Step 3: Where to Build

Once my Figma design was in a place that I felt comfortable with, it was time to transition into actually building the site. I already knew I wanted to utilize a no-code builder for this iteration, and researched the pros and cons of sites like Webflow and Squarespace.

I ended up going with Framer after reading about its Figma to HTML Plugin that would speed up my production significantly. Once my design was imported, I got to explore Framer’s interactive tools.

My favorite part was learning about assets. I was able to implement my design system using component assets that could use responsive design elements, and easily reuse on multiple pages. For example, I created a case study gallery asset that I could put on my home and about that I could update across all pages when I added a new case study.

A screenshot of my case study section asset in Framer with layers open

It took a lot of tutorials, and a lot of testing, but Framer ended up being a very great tool to work with for building responsive design and interactivity.

Step 4: Getting feedback

And now the final and most important step. I genuinely love getting feedback, but I will admit that I am also a bit too shy when asking for it.

Through this entire process, I was able to get consistent feedback from a fellow designer from initial design to implementation in framer during monthly design meetups where we would share our progress and work. These meetups really helped boost my confidence and get an outside pair of eyes on my in progress designs.

I’ve gotten to the point that I’m ready to step out of my comfort zone and plan to seek out more design meetups and opportunities to show my portfolio to others for their thoughts. I’m currently researching places that already facilitate portfolio reviews, and building a plan to keep myself accountable.

This plan also includes you! Yeah, YOU, the person reading this! If you’ve gotten this far and have any thoughts or comments about my process or my portfolio site, please send them my way here on LinkedIn, or my email at msrogers.biz@gmail.com! I’d love to know what you think!

**Check out my portfolio here!**

Conclusion

So, is my portfolio perfect? Absolutely not.

And it never will be.

This process of remaking my portfolio has given me new tools to show off my skills and actively update it as I put together new work that I want to show. I already have more iterations I want to expand on, with password protected pages up next and sorting through feedback.

And I’m looking forward to building the next iteration!

Thanks for reading!