Previous Website (v3)

Problems on Desktop

The old website was initially built as an online replacement for my PDF portfolio, which had not been updated since 2022 (when I finished my second year of undergraduate study at Loughborough University). I started building it in January 2024, jumping straight into Webflow to build out the website.

The old homepage had a clunky modal to take visitors straight to my CV

The website had an interface for choosing project pages right from the homepage.

Each project was on a separate page with a large hero animation at the top.

As I fleshed out the site and product design portfolio, my other projects increased in count. Naturally, my site became host to these projects: YouTube videos, a blog, and other kinds of content beyond an industrial design/engineering portfolio. Since the site was never meant to hold all of this content, the integration of these features was somewhat half-baked.

Layouts were designed for the desktop breakpoint first, with a plan to 'figure out' mobile at a later date.

Each project had a separate page. A site structure I had subconsciously inherited from other online portfolios, but nevertheless a major UX problem. Potential employers preferred ease of single-scroll that a PDF provided.

Because the site architecture was made up as I went along, (slightly) more advanced layouts had poor implementation.

As it was only my second time building a full site with Webflow, some best practice guidelines were not followed. Classes and structure were not designed from the beginning for the variety of layouts I might use.

Problems on Mobile

The whole site was completey unoptimised for mobile viewing. The initial idea was to build the desktop version as quickly as possible and 'figure out' adaptation to mobile later. As the site grew so did its complexity, quickly revealing the dilemma imposed by this mobile-second approach. In 2024, not optimising my portfolio site for mobile viewing was unacceptable. This lack of attention to mobile viewing left bugs when the site was viewed on a mobile viewport.

Horizontal scroll bugs

Text overflow bugs

Clunky residual layouts from desktop

Prototyping

As design students, we are taught and made to practice the design process: commonly depicted as a double diamond. A critical part of this process is prototyping - a low-investment and rapid way to evaluate design ideas.

Now, embarking on the mission of a full redesign, it seemed bizzare to me that I should consider building a whole new site without building prototypes first.

While I was familiar with Adobe XD, this endeavour presented the opportunity to learn a new design tool: Figma. Within a week, I found myself able to produce new layouts and designs efficiently and at high-speed.

Final prototypes for the website are shown below. These prototypes gave me an excellent reference when building in webflow and (because they were tested) provided assurance that the layout I was building would look and work great. On all breakpoints.

Building a prototype of the Design Engineering portfolio

Advanced layouts could be tried out, planned for in advance, and made to adhere to one consistent design language. Everything aligns to a vertical grid, too.

Designs were prototyped across breakpoints to ensure excellent UX no matter the viewport.

The bento box system allows the same portfolio page to work effortlessly on mobile and look great doing so.

Looking for final outcomes?

You're using it