Client
Puget Digital
Category
Services
Product Design
Timeline
Q4 2025 [launch phase]
Product Duration
2 Months
Puget Digital delivers high-velocity results for e-commerce clients, but their lack of a digital identity created a bottleneck in the sales funnel:
Trust Gap: Without a portfolio site, potential high-ticket clients hesitated to sign, viewing the lack of presence as a risk factor.
Identity Crisis: The brand needed to signal "Premium" and "Fast" simultaneously—two traits that usually conflict in design (Premium usually means heavy/slow).
Scalability Issues: There was no infrastructure to showcase ongoing work.
This case study focuses on the 0 $\to$ 1 build, transforming a business concept into a tangible, high-performance digital product in a strictly time-boxed 2-month window.
Given the accelerated timeline, I utilized Lean UX methodologies to define the "Puget DNA" and identify the market gap.
Methods selected for this goal:
Competitive Audit (Agency Landscape) Analyzed 20+ boutique agencies.
Finding: Most competitors felt "bloated" or "corporate."
Opportunity: Position Puget Digital as the "Dark Mode" of agencies—sleek, fast, and tech-forward.
Stakeholder Extraction (CEO Interviews)
Insight: The agency’s core value is removing overhead.
Design Implication: The UI must be stripped of decoration. Every pixel must serve a function. Structure > Fluff.
Persona Mapping I defined two distinct personas to ensure the site spoke to the right decision-makers.
Persona | Description | Pain Points | Design Opportunities |
The E-Comm Founder | Visionary, impatient, values speed over process. | - Hates "marketing fluff" - Thinks agencies are slow - Needs immediate proof of competence | - "Show, don't tell" hero section - Micro-interactions that feel "snappy" - clear metrics in case studies |
The Vetted CTO | Technical stakeholder, looks for code quality and process. | - Skeptical of "design-only" portfolios - Worries about technical debt - Needs to see the "how" | - High performance scores (Lighthouse) - Technical breakdown of services - Clean, semantic structure |
A. The "Adaptive" Design System I rejected the traditional "template" approach in favor of a modular grid system. The layout uses high-contrast typography and negative space to create authority.
Strategy: Created a "Bento Box" style component library in Figma that translates directly to CSS Grid.
Outcome: A scalable design language that looks senior and established on Day 1.
B. Motion as Narrative (60fps) Static pages feel cheap. I engineered motion interactions to guide the user's eye and signify "premium" quality.
Implementation: Used distinct easing curves for "reveal" animations versus "interaction" animations.
Outcome: The site feels like a piece of software, not a brochure, aligning with the "Digital Solutions" value prop.
C. The "Zero-Loss" Development Build To hit the December deadline, I merged the design and dev phases. By building the frontend personally, I removed the translation loss that usually happens during handoffs.
Tech Stack: React / Next.js (or Webflow - adjust as needed) for speed and SEO.
Outcome: 100% visual fidelity between the Figma file and the production build.
Home Page Animation:
Services - Animation:
About Us - Animation:
System Readiness: A production-ready design system has been established, allowing the agency to scale content immediately after launch.
Brand Elevation: The new visual language has been approved by stakeholders and successfully differentiates Puget Digital from traditional heavy agencies.
Deployment Velocity: On track to deliver a fully responsive, motion-integrated site within the strict 8-week window.
Stakeholder Feedback: “The result is precise, top-notch, and perfectly captures our nimble nature.” — Yuri Karpenko, CEO.
Website Preview
