Scroll Up

Digital World

Portfolio Project

Dec 2025

A portfolio redesign that reframed my identity as a systems-minded product designer—balancing business clarity, UX craft, and technical depth.

I redesigned my portfolio to position myself as a product designer who can think in systems, bridge UX and engineering, and communicate business value with clarity. Investors look for evidence of conviction; recruiters look for credibility and coherence. This project brings those needs together through a structured identity, scalable content architecture, and a design language rooted in precision, pragmatism, and technical fluency.

Role

Portfolio Author

Disciplines:

Human interface design

See Results

1. Introduction to the portfolio project

My portfolio presents me as a B2B/SaaS product designer with a computer science foundation and strengths in systems design, content strategy, and technical problem‑solving. It is aimed at roles in small, cross‑functional teams where a designer is expected to think in products, not just screens. I wanted to show that I am a reliable, credible professional, but also a human with clear values and ways of working. A Uxcel UX Design Skill Mapping (fig. 1.1) helped me identify strengths and gaps and confirmed my positioning as a versatile “one‑person army” who can connect business goals, user needs, and implementation detail.

Figure 1.1—UX Design Skill Mapping report from Uxcel, based on the Nielsen Norman Group skill mapping template

2. Moodboard and portfolio inspiration

I developed a confident, organised visual direction inspired by Swiss typography and personal journals (fig. 2.1)—a kind of letterpress manifesto for a modern product designer. The approach is simple, with strong grids and restrained colour. I also drew inspiration from industry peers: Bradley Ziffer’s tactile digital interfaces, Jordan Hughes’s content‑driven systems (Untitled UI), and Jony Ive’s (fig. 2.2) idea of “inevitable” design. Together, these influences support how I want to be seen: pragmatic, systematic, and thoughtful rather than purely decorative.

Figure 2.1—Moodboard showing layout, typography and visual tone references.

Figure 2.2—This figure shows professional headshots of Jordan Hughes, Bradley Ziffer, and Jony Ive, displayed in the respective order. The selection of these figures reflects a deliberate psychographic positioning strategy: by aligning my visual identity with designers and innovators who embody digital humanism, I signal that my professional values—clarity, craft, and user-centered thinking—are central to my work, not just aesthetic choices.

3. Vision and process reflection

This project was an exploratory exercise rather than a strict design‑thinking sequence. After several iterations, I defined a broader “Almanac” concept—a yearly professional journal beyond a standard portfolio. Drawing on Edmiston’s (2014) argument that online presence should create competitive advantage through engaging content, I initially planned a rich ecosystem of work, articles, and reading notes (fig. 3.1). However, this exceeded MVP scope, so I pivoted to a focused “Recruiter’s Handshake”: a clear value statement, four strong case studies, and simple navigation that can scale into the Almanac over time.

Figure 3.1–Shows a visual representation of the initial portfolio's content strategy and sitemap. The architecture is layered to provide recruiters with direct access to key assets via the homepage, while encouraging deeper community engagement through the central "Almanac".

4. Choice of tool and template comparison

I chose Webflow for its CMS and multi‑reference fields, which let me model content as interconnected artefacts (fig. 4.1) rather than static pages. Webflow also supports technologies like MCP and AEO, which offers valuable future‑proofing beyond this project’s immediate needs. I started from a lightweight starter layout rather than a full portfolio template, then re‑structured the navigation, CMS schema, and visual system so the final result reflects my own architecture and “digital humanist” style. I used Relume to rapidly prototype wireframes (fig. 4.2), which allowed me to test flows and content hierarchy before committing to visual detail.

Figure 4.1–The Webflow CMS data model, illustrating the Many-to-Many relationships between core content collections and a granular taxonomy. This relational structure allows each "artefact" (e.g., a case study) to be linked to multiple skills, themes, and related articles, ensuring maximum content flexibility and interconnectivity.

Figure 4.2—Wireframes produced with Relume showcasing the landing page structure on both desctop and mobile breakpoints.

5. Early sketches and work‑in‑progress

The first design attempt directly reflected the moodboard and Almanac concept. I began with sketches and low‑fidelity layouts that explored denser editorial pages, heavy typographic hierarchy, and more expressive imagery. Although I liked this direction, industry peers felt it was too conceptual for someone early in their career. In response, I made the practical decision to simplify: a mostly black‑and‑white palette, clearer hierarchy, and more conventional layout patterns that still align with the original digital humanist concept.

Figure 5.1–As mentioned earlier, this project was about experimentation, so my first instinct was to jump straight into Figma and start building raw designs to see what resonated. This figure shows the initial design exploring the vintage almanac concept as a direct translation of the moodboard aesthetic.

Figure 5.2—The second iteration represents the final design direction. This version strips back the visual complexity, relying on a restrained color palette and straightforward typographic hierarchy while still nodding to the conceptual underpinnings established in the moodboard.

6. Design styleguide and development from moodboard

The styleguide translates my moodboard into rules. I use a strict grid and a neo‑grotesque typeface to communicate rigour and clarity, but layer in subtle texture, angled photography and conversational microcopy to avoid a cold, corporate feel. This “digital humanist” approach is a deliberate response to generic, highly polished portfolio aesthetics.

Figure 6.1—An excerpt from the styleguide derived from earlier visual exploration. It defines typographic hierarchy, primitive and semantic design tokens, the UI component kit, and the underlying grid structure.

Once the direction was clear, I extended the visual system to physical artefacts—primarily business cards—that reinforced my identity and specialist positioning.

Figure 6.2—The business card design (front and back) maintains visual consistency with the style guide and moodboard, reinforcing both specialist positioning and creative direction.

7. Anonymised feedback and reflection

Peer and professional feedback provided concrete insights into how my portfolio was being interpreted. Drawing on Petrides and Vila de Brito's (2024) framework of branding, engagement, networking, and conversion (fig. 7.1), I identified specific gaps in my self-presentation. For instance, one reviewer pointed out that my "About" section underplayed my technical background and mentoring work—both central to my positioning as a versatile generalist. This prompted revisions across both my portfolio and LinkedIn to better surface these capabilities.

Figure 7.1–shows a framework from Petrides and Vila de Brito (2024) that breaks down digital presence into four clear objectives: branding, engagement, networking, and conversion.

Figure 7.2–shows the "About" sections before and after revision, comparing how my positioning evolved across both the portfolio and LinkedIn following peer critique sessions.

Separately, Yi-Hsuan Lin's talk "What No One Tells You About Your First Design Job" reinforced a structured feedback loop—start with context, align on goals, then be explicit about the type of work you're presenting. Applying that framework, I replaced abstract project titles with straightforward descriptors that clearly communicate project type and scope at a glance.

I also used generative AI tools to rephrase and compress copy during later iterations, treating them as assistants rather than authors and ensuring that final decisions and narrative structure remained my own.

Figure 7.3—Following Lin's talk, I revisited the presentation of case study previews, shifting to more descriptive labels that clearly signal project scope and invite deeper exploration.

8. Final outcomes and changes after feedback

The final outcome is a responsive portfolio that functions as a clear “Recruiter’s Handshake” while quietly seeding the longer‑term Almanac vision. I extended the visual system to LinkedIn and business cards so the same voice and visuals carry across touchpoints. Revisions to the About section, case study labelling, and homepage copy directly support conversion, networking, and sustained engagement (Petrides and Vila de Brito, 2024). Next, I plan to develop the Almanac hub once the core portfolio has time to perform with recruiters, adding deeper case studies and writing without compromising the clarity of the initial experience.

Figure 8.1—Final portfolio designs showing light and dark modes alongside responsive layouts across devices.

Figure 8.2–shows the revised LinkedIn profile developed alongside this portfolio project.

Edmiston, D. (2014) ‘Creating a personal competitive advantage by developing a professional online presence’, Marketing Education Review, 24(1), pp. 21–24. Available at: https://doi.org/10.2753/MER1052-8008240103 (Accessed: 5 November 2025).

Petrides, L. and Vila de Brito, M. (2024) ‘The impact of digital presence on the careers of emerging visual artists’, Social Sciences, 13(6), p. 313. Available at: https://doi.org/10.3390/socsci13060313 (Accessed: 5 November 2025).

OpenAI (2025) GPT-5.1 [Large language model]. Available at: https://openai.com

‍

Coming Soon 🚀