Back to UX/Design Projects  

My personal website

The Challenge

I wanted to build my portfolio as an example of a sustainably designed website that can serve as a resource hub for others looking to learn more about this topic, as well as showcase my work. As I don’t code myself, there were sacrifices I had to make to ensure I could grow the portfolio over time, but not sacrifice the weight of the website.

The Outcome

A website built exactly according to my designs, that serves as a jumping off point to learn more about the importance of sustainable design, as well as showcases a variety of my work.

The Team

Jump To:


Inspiration Gathering

Most of the research for the website came from my own unstructured browsing and searching the internet for examples of sustainable websites and learning from best practices. I was inspired by the principles of humane and positive design, which led me to feature the carbon tag in the footer and create the site as a resource hub. Beyond inspiration gathering and traditional UX research, this was a labour of love that came from my genuine energy and desire to produce something representative of my interests.


After thinking about the elements my site needed to have, I identified the key templates that would need to be created to support this site.



I started by creating a moodboard based on the core descriptors of myself and my work that I wanted the site to communicate:

The purpose is to identify elements that speak to each descriptor to get an idea of how to incorporate those into the final design. This also served as a base for the UI kit, pulling colors, and fonts for the final design.

View Moodboard


All core templates were applied the visual treatment based on the inspiration from the moodboard, and brand application.


In order to ensure the design was implemented correctly I created a design system page that held all the navigation elements, button/link/card states and colors to use. Additionally I created mobile versions of the main navigation and footer menu to ensure they translated properly to different screen sizes.

View Design System View Mobile Main Navigation   View Mobile Footer Navigation