Built with Framer
Mara — A Personal Portfolio Website for a UI/UX Product Designer
Anush | Ex–Freshworks, Cisco
Verified
Mara — A Personal Portfolio Website for a UI/UX Product Designer
Client: Mara (Independent Product Designer)
Industry: Portfolio & Creative Services (UI/UX Design, Product Strategy, Web Design & Prototyping)
Role: Brand Designer, UX Strategist, Visual Storyteller, Framer Developer
Project Type:
Personal Branding • UX Copywriting • UI/UX Design • Framer Development • Responsive Portfolio Website
Live Website:
Client Challenges
Needed to stand out in a crowded portfolio landscape — most designer sites looked templated or impersonal.
Struggled to articulate what made her process different — too much focus on deliverables, not enough on decision-making depth.
Wanted to attract higher-caliber clients (startups, product teams, founders) but lacked the structure and storytelling to do so.
No clear way to showcase range of work complexity, from enterprise systems to motion-infused creative builds.
My Role
Brand Designer, UX Strategist & Framer Developer
Partnered with Mara to design and build a portfolio site that reflected her strategic depth, design sensibility, and systems thinking.
Crafted a brand identity that was clean yet opinionated — confident typography, minimal color system, and editorial layout structure.
Designed and developed the site entirely in Framer, custom-coded for smooth interactions and a fast, polished experience across devices.
Created reusable components to help her scale case studies over time — with filters by role, format, and design complexity.
Positioned Mara as a designer who blends product strategy with craft, not just a visual executor.
Wrote all UX copy, emphasizing outcome-focused language, client voice mirroring, and subtle proof throughout.
Built the site for long-term ownership — optimized for future content updates, portfolio scaling, and project filtering.
Tech Stack:
Design & Prototyping: Figma
Development: Framer (Custom Build)
Tools & Integrations: Native Framer Forms, Smart Component System, CMS Setup (Case Study Ready)
Sitemap
Homepage Design
About Page
Case Study
Case Study Details
Contact Page
UX Methods Applied
To design a portfolio that didn’t just show what Mara made — but how she thinks — I used a hybrid of strategic UX frameworks and content storytelling:
Jobs-to-Be-Done (JTBD) for Clients: Structured portfolio by client intent — “Need to modernize legacy product”, “Validate an MVP idea”, “Redesign for scale” — not just by sector.
Information Architecture Audit: Created a scalable site map that allowed for future additions like testimonials, resources, and writing — without disrupting the core navigation.
Visual Story Mapping: Reframed case studies not as deliverable galleries, but as narrative journeys — problem → approach → turning points → visual outcome.
Design Complexity Levels: Introduced a self-developed system to showcase depth — with levels from 1 (landing page) to 4 (platform ecosystems) to help clients identify fit.
5X Emotional Resonance Copywriting: Applied brand voice strategy across homepage, case studies, and CTAs — emphasizing clarity, credibility, and real outcomes over jargon.
Async Testing with Peers: Ran 3 quick feedback rounds with peers in product and design hiring to validate clarity, tone, and perceived credibility.
Like this project
Posted Jul 16, 2025
As a full-stack UX and Web Developer, I crafted Mara’s portfolio to reflect strategic depth, scale with clarity, and resonate with product-minded clients.
Likes
2
Views
4
Timeline
Jul 5, 2025 - Aug 1, 2025
AI-based Travel Web-App | Shadcn UI Product Design + Prototype
Patagonia Store Shopify Development
Athleisure E commerce Store | UI + Design System + Brand Guide
NGO Child Welfare | Elementor based Wordpress Site + UI Design
