Figma to Webflow | Portfolio Website Design | Personal Branding
Client
Mubaraq Somuyiwa
Client Overview
Mubaraq Somuyiwa is a product designer with over 5 years of experience turning ideas into intuitive, results-driven digital products. He helps startups, firms, and professionals reach their audience through strategic design that solves real user problems and drives business growth.
From Africa to Europe and the UK, Mubaraq has contributed to high-impact projects across industries, crafting clean, user-centred experiences that blend clarity, functionality, and measurable outcomes.
Project Duration
8 weeks
Design System: The building block to individual design element
Design System: Including other reusable element
Project Goals
I set out to create a portfolio that reflects the depth of my experience and positions me for global opportunities. My goals were clear:
Strategically showcase my work to attract leads across the world, from high-paying clients, HR leads, and C-suite decision-makers.
Present my design thinking and solutions across industries and continents in a clean, compelling narrative.
Translate my Figma designs into a responsive, high-performing Webflow site with smooth interactions and a refined user experience.
This project was more than just a website, it was a bold step toward elevating my visibility and advancing my career on a global scale.
An interactive prototype of my portfolio website before development
Challenges
Defining a Clear Personal Narrative
It’s hard to condense years of experience into a focused story that resonates with world-class audiences. Most struggle to decide: What should I say and what should I leave out?
Balancing Personality With Professionalism
The challenge lies in showing authenticity while still appealing to clients who expect polish and clarity.
Knowing What to Showcase (and What Not To)
Trying to include everything dilutes the impact. Choosing projects that highlight strategic thinking and measurable outcomes is key, but not easy.
Structuring the Portfolio for Different Audiences
My portfolio website must speak to different people: recruiters, founders, and decision-makers. Creating a flow that appeals to all without overwhelming anyone is tricky.
Building Credibility Without Big-Name Logos
Working across industries and continents, but not always with global brands, it’s challenging to communicate your value in a way that still builds instant trust.
Writing About Your Work with Strategic Depth
Explaining what I did isn’t enough. I had to communicate why it mattered, how it solved problems, and what impact it had—in language that hooks busy readers.
Creating Consistency Across Design & Messaging
From typography and colours to tone of voice and microcopy, building a cohesive brand feel that reflects my identity takes time and intention.
Developing & Deploying the Site Without Technical Gaps
Designing in Figma is one thing. Developing in Webflow without losing visual or performance quality can be a real hurdle.
Positioning for Global Visibility
Optimising for SEO, choosing the right messaging tone, and structuring content so it resonates globally (not just locally) can be a major learning curve.
Overcoming Self-Doubt & Overthinking
Imposter syndrome hits hard with personal branding. It's easy to stall the project trying to perfect every word, pixel, or headline, delaying launch indefinitely.
Prototype Connections (Noodles) to prototype how the website will present - Best for Demo Videos, Walthrough Presentations, Test Phases
My Approach
Getting Priorities Right – Thinking, Brainstorming, Defining
This phase was all about clarity and intent. I identified My career goals, positioning my work to appeal to global decision-makers, and mapped out the kind of experience I wanted visitors to have.
Key touchpoints:
Defined target audience (HR leads, C-suites, potential clients)
Prioritised core messaging and personal value proposition
Structured the site architecture and narrative flow
Planned content around impact-driven storytelling
2. Design System, Layout & Prototyping
With clarity in place, I moved to Figma to bring it to life, building a consistent and responsive visual system. The goal: make the site feel premium, intentional, and easy to navigate.
Key touchpoints:
Created a clean, scalable design system (colours, typography, components)
Designed responsive layouts for desktop, tablet, and mobile
Built interactive prototypes to test the flow and feel
Ensured each section served a purpose, from portfolio to contact
3. Development in Webflow
Finally, I translated the design into a fully functional Webflow website, maintaining the vision while optimising for performance.
Key touchpoints:
Developed a responsive build that holds its structure across devices
Integrated smooth animations and page transitions
Optimised images and elements for fast loading and SEO
Set up a CMS structure for easy updates post-launch