HMG

Challenge: An early-stage startup needed to transform their functional but unpolished Applicant Tracking System into a professional, branded product ready for market.

Approach: I led a comprehensive design transformation, starting with brand strategy and extending through to a complete design system implementation.

Discovery & Brand Development

I began by analyzing the existing interface and conducting competitive research to identify opportunities for differentiation.

Drawing inspiration from modern productivity tools, I developed a warm, approachable visual identity that balanced professionalism with accessibility.

Design System Creation

I established a comprehensive brand foundation including typography, color palette, iconography, and interaction patterns.

To ensure scalability, I built a modular design system in Figma with reusable components, auto-layout, and design tokens for consistent implementation.

Implementation & Results

I systematically applied the new design language across the application, working closely with developers to ensure high-fidelity implementation.

Additionally, I designed and developed their marketing website in Webflow, enabling the team to maintain content independently.

Impact: The rebrand positioned Hya as a professional, modern solution in the competitive ATS market, significantly improving user perception and market readiness.

Challenge: Financial literacy around retirement planning is critically low among younger generations, with complex pension information often presented in inaccessible formats.

Solution: I created a web application that translates the UK's Retirement Living Standards into an intuitive, actionable tool that helps users understand their pension needs.

Design & Development Approach

I chose to design directly in code using TypeScript and Remix, allowing for rapid iteration and immediate validation of complex financial calculations.

The visual design was intentionally bold and approachable, using vibrant colors to make financial planning feel less intimidating and more engaging.

Built with Remix and TypeScript, the application features server-side rendering for optimal performance and SEO.

I implemented complex financial calculations including compound interest, annuity valuations, and UK tax implications to provide accurate retirement projections.

The API processes user inputs and returns comprehensive pension health assessments, including projected monthly take-home income in retirement.

Technical Implementation

I implemented stateful user sessions using HTTP-only cookies, enabling persistent data across visits while maintaining security. Forms are built with Conform and validated using Zod for type-safe data handling.

The application includes comprehensive dark mode support and responsive design optimized for both desktop and mobile experiences.

Impact: This tool makes retirement planning accessible and actionable, helping users understand exactly how much they need to save for their desired lifestyle in retirement.

Challenge: Social media platforms and messaging apps rely heavily on Open Graph meta images to create engaging link previews, but generating dynamic, branded images at scale remains technically complex and resource-intensive.

Solution: I developed Linkpic, a cloud-native service that dynamically generates customizable Open Graph images through template-based rendering, enabling developers to create compelling social media previews programmatically.

Architecture & Infrastructure

Built entirely on Cloudflare's edge infrastructure using Pages, Workers, and KV storage for optimal global performance and minimal latency.

The Next.js application renders HTML and CSS templates server-side, capturing high-quality screenshots through Chromium automation for consistent image generation.

I implemented Handlebars templating to enable dynamic variable injection, allowing users to customize text, colors, and layout elements programmatically.

The system initially leveraged FaunaDB for template storage, providing experience with FQL query language and distributed database architecture.

Performance optimization led to migration to Cloudflare KV, achieving significantly faster response times for the simple key-value operations required by the templating system.

Development Tools & User Experience

I built a sophisticated live editor featuring real-time template preview through iframe integration, enabling immediate visual feedback during template creation.

The code editor leverages Monaco Editor (the open-source foundation of VS Code) to provide syntax highlighting, autocompletion, and error detection for HTML and CSS development.

Security & Authentication

Integrated Clerk authentication system to manage beta user access and secure template management, ensuring controlled testing environment during development phase.

Impact: Linkpic demonstrates expertise in edge computing, dynamic content generation, and developer tool creation, showcasing the ability to build scalable, performance-optimized services for content creators and developers.