Portfolio

I began my website update by conducting secondary research focused on two parts:

1. Recruiters

   I learned from this article that recruiters spend on average about 3 minutes per portfolio while design managers spend 5-10 minutes. In today's competitive market, it may be even less. So I needed to make my portfolio stand out in some way if I wanted to catch their attention.

   In particular, I needed my site to emphasize my main competitive advantage: the ability to provide both UX knowledge and frontend development skills. That is my sweet spot!

   Based on this research, I developed user personas to characterize the type of individual most likely to review my portfolio.

2. Other UX portfolios

   There are a lot of UX designers and there are a lot of frontend developers. There are not as many that toe the line between the two into UX/UI Engineering roles. So my research focused on evaluating the portfolios of UX designers, but really homed in on a few portfolios of individuals that have similar cross-functional skills.

   I completed a competitive analysis of two portfolios that struck my eye and identified both strengths and weaknesses to help me base my own portfolio off of. 

Using my existing portfolio site as a base, I was able to define my site architecture and add some additional pages to include a page dedicated to Development and UX. As I already had some content to draw from, I incorporated some of my old copy (along with some lorem ipsum) in my digital wireframes to see how images and text flowed together. 

The high-fidelity prototyping phase was where things started to come together and I was able to select colors, fonts and iconography. As this was my own site, it was both fun and challenging. I needed to think about how I wanted to present myself — not only showcase my professional abilities, but also who I am as a person. I wanted to focus on the intersection between the creative side of UX and the logical, problem solving side of development while also presenting my personality.

I explored different color palettes using Adobe Color and Coolors for inspiration. I settled on a color palette of purple, green, bright orange and yellow — colors you may find waking up to a sunrise. Sunrises evoke new beginnings and fresh starts, which I also wanted to bring to my design. I landed on two different sans serif fonts — Kanit and Gothic A1 – to provide a modern and clean textural presentation. I used Kanit sparingly for h1 and h2 headings for emphasis and Gothic A1 for the remainder of the text.

After completing the high-fidelity prototypes, the final step in the process — development — was now ready.

The Backend

After evaluating my current portfolio site and the technologies, I chose to keep my existing Django backend. The new design had more content, which required building new apps within Django, adding fields to existing models, and updating the graphQL schema. It proved to be much easier to update the existing structure rather than start a new Django application from scratch.

The Frontend

My previous site used Vue.js on the frontend, but as I've mostly been working in React recently, I chose to transition this site to a Next.js app. Next, a React framework that uses both server-side and client-side rendering, is a popular choice in the development community and offers built-in routing based on the file structure. Having previously worked with Next, I decided to use this framework based on the documentation from the React website, which encourages users to begin new projects with a framework like Next. And, as the saying goes, don't reinvent the wheel if a solution already exists!

The frontend is where most of the development took place — setting up config files, defining custom styles, integrating tests, creating components, and debugging as things broke (which they always do!).