Introduction
My Portfolio
My new portfolio builds upon lessons learnt in my previous 2 portfolios and I've opted to go for a more simple, minimal interactions/hover effects focused purely on my product/ui/ux work. I've used this redesign to also just clean up on some bad habits or practises from my old portfolio.
The goal is to provide people for any reason coming to my portfolio easily find what they need or look at the dual design-dev work of a few select projects. Working on improving my use of colors and how I assign values as in backgrounds, text and containers. Reducing the amount of components and variants to easily edit and stay on top of.
2025
2-4 weeks
Product Designer
Personal Portfolio
Problem
Previous portfolio was overloaded with many different components, lazy use of color, & poor accessibility. Multiple different projects, split design & dev work to lacking in-depth projects or case studies.
Basically I think my skills, projects and general direction I was going my old portfolio wasn't the right choice. There are of course aspects of it I like for example it has motion albiet after much improvement and learning is quite good. It also did not support light/dark mode, had poor accessibility and I had a multitude of usability concerns from my previous portfolio.
Instead of creating naming like, card-background & on-card-background I instead just used Grey/80 & White which is probably fine for a portfolio but I wanted to put a bit of effort in and its some practise.
Solution
A whole new portfolio wireframed in Figma, built with Framer. Honestly just improvements across the board, although lacking in content because of the more narrow focus.
With better color usage I've improved the accessibility with a light/dark mode and better contrast. I've also made it a priority to create better project pages and case studies to be more engaging and easily understood at a glance.
Wireframing
I had a good idea how it would look, still wanted to wireframe, utilized this Blocks plugin to speed it up a bit. Mainly to get an idea of the layout and structure of the site & pages.
The plugin did most of the heavy lifting and I just basically had a bit of fun creating some different layout ideas for each page. I did have a pretty good idea of how the top level pages would look in my brain but I did spend some more time on the project pages.
Final design
I think the portfolio visually and interaction wise is good. I just need to start filling it up with compelling and impactful content.
Its quite simple but I think works quite well. At some point I might consider recreating it in a front-end framework like react or vue but for now Framer is just so easy and works exactly how I need it to for this purpose. At some point in the future I might look into adding some loading in animations like on my previous site.
Outcome
Got a good new foundation to build upon. Better showcase of my work and how the pages are structured. Hopefully more interviews and job offers to follow.
The new portfolio I believe is a massive improvement mostly across the board. I've been fortunate that Florian over on LinkedIn gave it a review giving me good feedback along with any others who shared their thoughts on it over here. My previous portfolio helped me land my recent internship with Council and considering the improvements, hopefully better opportunities follow.
Retrospective
My previous portfolio has aspects I like and others less so. The motion for one is great but the quality of content and how its shown was lacking. Motion is also subjective, some like it others despise it.
For the time being I'll probably slowly but surely improve it, I do have a Notion board of various tasks I need to complete for it usually being content issues, weirder layout things, duplicated content, new features/ideas to explore, and content I'm yet to add etc. I think another lacking side of my work and rightfully so is my development work isn't really shown because I am much more inexperienced in that area so I'll probably need to just start making stuff.
Another crucial aspect I need is some more measurable insights/impacts my work has made. Unfortunately I am a bit weaker in the UX side but I've already started to work on it in my more recent projects. But also both of my projects I worked at Council it was a bit more difficult as the app was 0 -> 1 project and current DisasterHub site is only tracking analytics on the homepage which doesn't help too much.
Simplicity
I've approached building this portfolio with just delivering the minimal amount to then build upon into the future. Similar to both portfolio designs before it, I create it then for about a year improve, then rinse and repeat.
Better project pages
This was definitely a crucial aspect I've improved. By making the title sort of the one liner "I did this" with supporting smaller text and the animated mockups of said "I did this" makes them much easier to read.
Accessibility
I've tested with google lighthouse and went from 80 -> 94 accessibility. So quite an improvement and I already know the next areas I'll look at to improve this.
Changes Since Final Design
Internal Feedback (Me)
Improving project pages on mobile
Better implementation of the back button on all relevant pages
Improve the readability of project cards
Improve link styling on text
Rework the ideas page to be more clear & easier access
Improved component & color naming/organisation
Reduced complexity in Typography sizes & naming
External Feedback
The logo in the top left should be clickable & take me back to the homepage
Improve the presentation of work
Refine the top level navigation bar to be more clear
Mobile Jump Stepper
Feature
Users can utilize two arrows on the project pages to easily jump between sections.
Now that I think about it this feature could be on desktop as well but for now I'm going to keep it on mobile need to do some thinking and tinkering with it anyways. Mainly added this to be a sort of accessibility feature as the project pages can get quite long and for anyone wanting to skim through it whilst keeping the structure this makes that possible. I do think moving these down towards the middle and on the side would probably make it even more accessible.
It does look a little weird with the spacing at the moment so some more testing and exploration to be had.
Dynamic nav bar
Feature
When progressing through the site checking it out the nav bar on mobile & desktop changes to include a clear back or back home button.
This feature was implemented based on feedback from here. I wanted to keep my navigation a bit more simple and I do think this was a good solution. Instead of the static back button at the top it now scrolls with the user which I think is a better UX and follows similar patterns found in many apps.
Cards
Redesign
Redesigning the cards to be simpler, straight to the point, and more scannable.
After having my portfolio reviewed my Florian I quickly and fortunately set up google analytics so I could see how people were browsing and consuming my portfolio. I noticed on the homepage the average duration was something like 30-40 seconds. So I've decided to redesign the cards to be more scannable and straight to the point, and reducing the UI elements which should help to reduce the cognitive load a bit as well.
The previous design was good enough. I do believe it was a bit much, a lot of small different text to read. I think the black and white tag acted as a sort of anchor for your eyes to immediately go to first. After some thinking, I don't believe this information whether a project is an app, website, web app etc does not matter. Its important but not crucial and supporting imagery can fill in the gaps for people.
I believe the more important text would be the description which is basically the projects main goal its trying to solve. Its also much more interesting to read then, "Culina" which doesn't really tell you anything important. Maybe if my projects were working on more recognisable/influential software I would keep the name visible. But I think its more valuable for me to try hook people in.
Previous
Culina
App
Health & Fitness
Product Designer
2025
—
Building an app that helps young adults better organise their dietary habits & knowledge
Redesign
Helping young adults better organise their food knowledge
App Concept
Health & Fitness
Product Designer
2025
With this simplified design it should be relatively easy to redesign it again to include more intriguing information like any realised/measured improvements.
Increased onboarding efficiency 34%
Refreshing Culina, a Health & Fitness app with 3 million users
Increased onboarding efficiency 34%
Refreshing Culina, a Health & Fitness app with 3 million users
Adjusting Width & Typography
Redesign
I've somewhat reworked a reasonably significant part of my portfolio in the max width and all text sizes.
I'm basically a user of my portfolio or at least I try to be so I'm usually clicking through and checking it every now and again to make sure its looking good and no errors anywhere. I also do this on different screen sizes to see if my colors are good, layout is responsive etc. One thing I've noticed is I am just about every time I view my portfolio zooming it in on the browser to 125% and realised I need to probably look at working on increasing basically the size of my portfolio.
I think compared to before and after its a big difference and makes it much more readable. If you zoom out to 80% currently that is what the previous portfolio looked like at 100%. In terms of the typography changes the Heading styles were increased around 4-8px the text styles were increased around 2-4px and the rest were increased around 1-2px if at all.
Previous
Redesign
Typography
Redesign
Further changes made to my typography, in this case removing and simplifying the options available. I've reduced it from 14 styles to now using 9 styles.
I've achieved this quite easily by just looking to which styles are being used in Framer. I've also slightly changed some of the smaller text sizes for example previously I had two different tags a small and large but that is just more complex then it needs to be. Now though all tags used are 14px large whereas they were either 15px or 13px respectively. I think this is just a reasonable refinement and greatly reduces the complexity of the portfolio.
I want to get these core styles correct and will continue to refine into the future as when or if I decide to update my portfolio I can at least within reason transfer these over and keep them. Reducing a good amount of design time as there is at least something to build upon rather then creating from scratch.
Previous
Current
