UX Designer
Designing My Portfolio
A brief walkthrough of the design thinking behind my portfolio website, showcasing the decisions and elements that improve usability.
Introduction
This project documents how I design digital experiences: investigating user needs, structuring information, and refining interfaces through layout, hierarchy, and interaction states. It showcases my UX and UI practice through user research, information architecture, interaction design, wireframing, and branding, supported by my wider design toolset.
Moodboard
When developing my moodboard, I had to step back and think about what my portfolio actually represents and how I want it to reflect me as a designer. I looked for inspiration that felt both considered and characterful: interfaces and visuals that felt sleek, but still had a sense of fun and playfulness. I wanted my portfolio to feel professional and polished while also expressing that I’m open, optimistic, and not afraid to bring personality into my work.
Content Ideation
These early wireframes and sketches capture how I explored structure, colour, and visual identity before refining the final design. Experimenting quickly and informally helped me test ideas, understand what aligned with my portfolio’s tone, and identify the elements that would shape a clear, cohesive direction for the website and brand.
Choice Of Tools
For this project, I chose Wix as the platform for building my portfolio website. Although I’m comfortable working with HTML, CSS, and JavaScript, using Wix allowed me to move faster and focus on exploring the visual and interaction elements of my design rather than spending time on technical implementation. Its flexibility made it easier to translate ideas directly into polished layouts, experiment with structure, and refine the overall look and feel. Alongside Wix, I used Procreate during the early stages to sketch my logo and wireframes, which helped me quickly develop the visual direction before moving into the build.
Design Styleguide
My style guide grew from broad early explorations into a more focused visual system. I refined the palette into higher-contrast, accessible colours, selected Roboto and Montserrat for clarity and tone, and developed my logo variations. Each element builds on ideas from the original moodboard, now shaped into a cohesive identity.
 |  |  |
|---|---|---|
 |
Early Designs
My early homepage design used separate buttons for featured case studies as well as a standalone portfolio page. Sections sat on different background colours with smaller typography, creating a more fragmented layout. At this stage I was focused on showcasing information clearly, before later refining hierarchy, flow, and visual cohesion.
Feedback From Peers
Peer feedback highlighted that the site felt visually disconnected, with each section sitting in its own block rather than reading as one journey. People also found the body text small and harder to read, especially on laptops. They preferred a simpler entry point into my work instead of three separate case study buttons. Reflecting on this, I realised how much clarity depends on consistent layout, accessible typography, and a focused primary action. It reinforced the value of testing early, listening to how others move through the page, and being willing to let go of details I was attached to.
Professional Presence
I used this project as a chance to bring my LinkedIn in line with my personal brand, designing a new header that applies my chosen colour palette and personal logo. I also designed a matching business card, carrying the same visual language across.
 |  |  |
|---|
Final Outcomes
In response, I simplified the homepage to a single clear route into my work, increased body and heading sizes, and aligned layouts across pages. Consistent margins, shared backgrounds, and updated graphics now create a more cohesive, accessible experience that better reflects the visual identity defined in my style guide.
 |
|---|