Mubaraq's Portfolio Website Design and Personal Branding

Mubaraq Somuyiwa

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: The building block to individual design element
Design System: Including other reusable 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
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
Like this project

Posted May 26, 2025

Designed and developed a portfolio website for Mubaraq using Figma and Webflow.

Likes

1

Views

0

Timeline

May 26, 2022 - Jul 26, 2022

TaskMe Support Web App - Cloud-based CRM & CMS Solution
TaskMe Landing Page. Figma Designto Framer Development
TaskMe - Mobile App Design for Artisans
Responsive Website | Landing Page| Web App Design

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc