Overview

The goal of this project was to update my website and my portfolio of work. Rather than just doing a visual refresh, I felt it was important to refocus my portfolio on what matters most — showcasing my creative process. My old website design focused heavily on its visual design but it did not show my process and how I go about solving problems. Therefore, I set out to create a new website that focuses on the content and the story, rather than the visual design.

This new website better describes and showcases my design process — how I gather understanding of the problem and people, concept ideas, and then execute the project based on those concepts.

Process

Research

I began a period of research by looking at the portfolios of other designers that I admired, reading articles about writing case studies, and seeking advice about what my focus should be. One of the most helpful pieces of advice I heard came from Sarah Doody's UX Portfolio course, “You are the not the user of your portfolio”. This statement helped me to focus on the end user and utilise the same process when designing any other solution — research, define the problem, iterate, and develop.

Write

The next step in this process was forming a career compass statement — one or two sentences that concisely describe what I do, why I do it, and where I want to go.

"I am a user experience and product designer skilled at designing and developing user-centric, engaging, and effective digital experiences. I love solving problems and working collaboratively on the whole product life cycle — understanding the user's needs, creating wireframes, making prototypes, and building products."

This compass statement allowed me to focus on my professional goals and how my portfolio should be presented.

Following that, I began writing case studies and gathering assets for a few projects. Rather than just showing deliverables, I wanted to focus on the journey that was taken to arrive at those conclusions. This was the first time I had really sat down to write about my process and showcase how I work. It has been a very enlightening learning experience and I believe I am much better off for practising this skill.

Design

Once I had my case studies together, I shifted my focus to the visual refresh of my website. My primary goal was to create a restrained visual style and palette so that the story the content tells would take centre stage. I drew a couple sketches for the home and content pages and then used a design tool to begin creating wireframes.

A couple sketches for my new portfolio.

Wireframes for several page designs.

Once the wireframes were completed, I developed a simple Styleguide consisting of a colour palette and typographic styles. The decisions I made when creating this system were influenced by the same desire to highlight the content rather than the design.

With these choices made, I created a few mockups from the wireframes.

Page mockups ready for development.

Develop

Finally, it was time to develop my website. I have quite a bit of experience as a JAMstack developer so it was fairly straightforward to develop my designs into a functioning website using HTML markup, CSS, and some JavaScript. I also decided to use the Bootstrap framework because it provides responsive functionality and a lot of helpful components and utility classes.