Single page website
Tim Wylie
Project Overview
Client: Tim Wylie (Product Designer & Founder)
Type: Personal branding portfolio—single‑page website
Duration: 2‑week sprint
Tools: Figma (design & prototype), Framer (interactions), Webflow (build)
Objective: Showcase end‑to‑end design mastery—strategy, wireframes, hi‑fi UI, interactive prototype, and live site—to drive discovery calls and service inquiries.
The Challenge
Tim needed a lean, one‑page format that:
Introduces his personal brand (credentials, expertise, personality)
Highlights core services (UI/UX design, visual identity, information design)
Showcases diverse projects (web, mobile, print, code, passion work)
Drives action (download CV, book a call, or send an email)
Key hurdle: Balancing comprehensive content (bio, testimonials, services, portfolio, contact) with a scannable, fast‑loading experience that would impress recruiters, founders, and agencies alike.
Research & Strategy
Audience Profiling:
Primary: Startup founders and hiring managers seeking rapid‑turn design sprints
Secondary: Recruiters and design directors vetting candidates
Competitive Scan: Reviewed 10+ leading product‑designer portfolios—identified trends: bold hero visuals, micro‑animations, concise service cards, case‑study carousels, and sticky CTAs.
Information Architecture:
Hero → Bio Drop → Testimonials → Services → Portfolio → Contact
Prioritized content blocks by impact and scannability.
Desktop & Mobile Flows: Hand‑drawn wireflows mapping user journey from hero to contact.
Lo‑Fi Layouts:
Hero: Headline + subhead + two CTAs + hero image
Bio Drop: Text block over accent background + portrait
Testimonial Carousel: Horizontal scroll of client quotes
Service Cards: Grid of four service highlights with icons
Portfolio Grid: Filterable categories + card hover states
Contact Bar: Three quick‑access methods (phone, email, form)
Early user testing with peers revealed the Bio Drop section must be visually distinct to break up white space—so we elevated it with a tinted background and bold portrait.
Moodboard & Style Tile:
Typography: Modern sans‑serif for headings (600 weight) and body (400 weight)
Color Palette: Creamy off‑white background, pink‑purple accent band, dark charcoal text, gold CTA buttons
Illustration Style: Space and game‑inspired hero art to infuse personality
Hi‑Fi Mockups:
Hero Section: Left‑aligned headline (“Hi, I’m Tim…”), right hero collage of Tim + abstract space art
Bio Drop: Circular portrait and “PUSH” badge to draw eyes, with purple overlay
Service Cards: Soft shadows, rounded corners, pastel icons
Portfolio Cards: Image+title+category+like count, hover lift effect
Contact Icons: Large tap targets with icon + text
Figma Prototype:
Scroll reveals: Sections fade/slide into view
Hover states: Service cards lift, portfolio cards show like counts
Framer Build:
Sticky navigation that underlines active section
Smooth scroll transitions between anchors
“Book a Call” modal popup with embedded Calendly widget
Lazy‑loaded portfolio images for performance
Webflow Implementation:
Responsive breakpoints at 320px, 768px, 1024px
Optimized Lottie animations for hero splashes
CMS for portfolio items enabling quick future updates
Performance & SEO:
Compressed images, minified CSS/JS
Meta tags, Open Graph images for LinkedIn previews
Google Analytics & Hotjar installed
Engagement: Time-on-page averaged 2:15 (vs. industry avg 1:20)
Lead Generation: 23% of visitors clicked “Book a Call” in first month
Feedback: Recruiters praised clarity of skills; founders found “Bio Drop” instantly relatable
Next Iterations:
Add micro‑animations to portfolio hover states
Introduce a dark‑mode toggle
Expand contact form into “Project Inquiry” flow
Like this project
Posted Jun 28, 2025
Single‐page portfolio website showcasing end‐to‐end product design process—hero, bio, services, portfolio, and contact with interactive prototypes.
Likes
0
Views
3
Timeline
Aug 31, 2023 - Sep 13, 2023
Stooty Technologies
CodeiKids
UI/UX Design Assets
Digital Product Offerings
