Self Branding Package

Abstract

Every designer knows the dreaded pressure of creating a new portfolio every couple of years. It's both daunting & freeing, with the ability to create whatever you want, however you want, with zero restrictions or limitations. As I evolved from the first version of my portfolio into my second, I wanted a display of my work that accurately conveyed who I am now, where my skills currently sit, and where my interests lie professionally. This time around, deeper thought was put into how I wanted my work to be displayed & categorized, with an emphasis on exploratory typography, brutalistdesign, and microinteractions sprinkled throughout the site.

Technical Considerations

With this redesign, there were several changes I wanted to make to my CMS (Content Management System) and website builder. Other considerations included scalability of the design, ease of future alteration, and how frequently I anticipated making changes to it. My previous website was built using Elementor, and while useful for rudimentary design, the structure of the site was not ideal and the ability to manage content was limited. With my old website, I had to create pages instead of blog articles for new case studies, which ballooned the site map. The frequent updates made to the theme, plugin, and WordPress also broke the site on a regular basis 🙁

Prior to wireframing, I did a fair amount of research into how other designers structured their portfolios & weighed the site traffic of my old portfolio. A majority of visitors from my old portfolio were most interested in my About (40%) and Work (55%) page, with the least amount of traffic directed to my Contact page. When looking at other portfolios, I found that my favorites were the ones that told a story about the designer's journey & who they were as a person.

Most of all, I wanted my portfolio to be one that prospective clients & employers couldn't stop looking at, reading, and browsing.

Moodboard

In order to understand where I wanted to go with my own portfolio, I broke my design research into two buckets: visual inspiration & portfolio page inspiration. Below is a sample moodboard I created for my portfolio redesign.

‍

When it came to creating my own portfolio, there were a few things I knew that were critical this time around, including:

• Experimental & eye catching typography
• Judicious & bold use of color
• Indulgent animations & microinteraction design
• Content, content, content

With my new portfolio, I focused on the story I wanted to tell with each page, and how I wanted it to feel for someone looking at it. I wanted each section to feel like a natural extension of the one before it, and to promote scrolling on the page so that content wasn't missed along the way.

With the information architecture, I knew a couple things going in: I wanted to keep the navigation structurally the same, I wanted to add a page for my design philosophy, and I wanted each section to provide more insight about how I approach design as a whole versus just case studies and work examples. I made my first portfolio in 2019, straight out of college. Back then, I didn't know who I was as a designer, where my skills lied, and what I really wanted to specialize in. Now, after having been a designer for over five years, I understand who I am and what I hope to achieve. I wanted my mission statement to feel clearer to those viewing my portfolio now, with an emphasis on design leadership, evangelism, and scalability. I now view my role much more broadly than I did when I was first starting my career, and hope my portfolio conveys this.

Additionally, I have had the pleasure of working in a myriad of industries and wanted my work page to more accurately represent the breadth and depth of my prior experiences rather than just providing an overview of what it is assumed product designers already do (ui/ux design, visual design, ux research, etc).

‍

Content Mapping

Prior to creating any low fidelity designs for my portfolio, I mapped out the content that I wanted included on each page in an outline format so that I could fully understand what I wanted to say on each page. In my own design process, the content and functionality dictates the design, so it was necessary to understand how I would break up each content section gracefully.

‍

Style & Type

There were several different typographies that I explored, but I knew I wanted a decorative header style with a more brutalist body font. I chose Mickey & Rubik because I felt the angularity of Rubik nicely complimented Mickey's bold & eye catching font. Interestingly enough, I built the type styles around Mickey rather than the other way around. The font exploration was its own research endeavor because I knew that whatever accent font I chose would have a tremendous impact on how the site is perceived. I had a preliminary idea for the design of the home page, which was where I first tested them on.

Color

With the color this time around, I knew that I wanted to utilize an electric red but also carry elements from my previous portfolio over to my new one. I chose an electric red as the primary color for numerous reasons, the first being that it's my favorite color, and the second being that it evokes energy, passion, and confidence from a color theory perspective. I was able to carry over the muted neutral gold for superscript font accents & hyperlinks, while keeping the background color white & minimal, similar to my first portfolio.

‍

‍

Final Design

‍

Unexpected Challenges

The hardest part of this project was deep diving into the CMS & how I wanted to lay out my content templates. One thing I could have done up front that I didn't think of because I had never had the flexibility to customize these aspects was to define the header styles to my exact specification. I wanted to break up the content visually using size & color, and found that not defining these things early on led to the case studies looking like a big pile of word mush. Once I designed the header styling, bullet styling, and quote blocks, it started to break up the case study sections much more clearly.

‍

Final Thoughts

When I self reflect on the creation of my new portfolio versus my old, I can confidently say that my process this time around was much more regimented, refined, and exact. With my previous portfolio, I built the entire website around the resume I had designed for myself, versus the other way around. This time, I thought about my portfolio first, the structure, the content, and what I wanted it to look like before even attempting to create the resume. I feel I had a clearer vision of what I wanted for each page, and didn't just haphazardly experiment with blocks until I created something that looked passable & 'good enough'. I'm very pleased with the implementation, and could not be happier with the outcome.

This portfolio was designed fully by me, and developed by Digital Butlers.