Loading...
0%
UNIT TESTS
A/B-TESTING
UX/UI RESEARCH
BANKING UX/UI
DESIGN SYSTEMS
MOBILE UX/UI
VISUAL ENGAGEMENT
SYSTEM ENGINEERING
CODE-PROTOTYPING
SERVERLESS BACKEND
KAREN ORTIZ
Karen Rebeca Ortiz - Design Engineer | UX/UI & Fullstack Development | Karen Ortiz - Design Engineer

Karen Ortiz - Design Engineer Portfolio

UI/UX • CREATIVE DEV • FULLSTACK • AI AUTOMATION • 30+ CLIENTS WORLDWIDE •

DESIGN ENGINEER • PIXEL TO PRODUCTION • NO MIDDLEMEN • BUILT TO CONVERT •

Trusted by Leading Brands to Deliver Exceptional Design Solutions

Ancient
Athenis AI
Opinator
Sodio
Spil
WebCrafters
Zoek
01
PIXEL-PERFECT, PURPOSE-DRIVEN
Your users judge your product in seconds. I obsess over spacing, hierarchy, and motion—the invisible details that make users trust your brand and stay.
02
END-TO-END OWNERSHIP
From discovery call to final delivery, I own every step of the process. No middlemen. No telephone games. One person who designs, codes, and ships your product.
03
BUILT TO LAST
Fast doesn't mean rushed. Every decision behind your product is deliberate. Accessibility, performance, and scalability baked in—so your product grows with your business.
04
YOUR GOALS, MY BLUEPRINT
Pretty isn't enough. I design for conversion, retention, and growth. Every screen, every interaction is engineered to move your users closer to your business goals.
05
PROBLEMS SOLVED, NOT JUST DESIGNED
I don't start with pixels. I start with your problem. Understanding the "why" behind every project means your product solves real needs—not just looks good in a portfolio.
06
DESIGN + CODE, ZERO GAPS
Most designers hand off a Figma file and hope for the best. I ship production code. One person. Design and development. Faster iteration, fewer miscommunications, better results.
  • 01

    PIXEL-PERFECT, PURPOSE-DRIVEN

    Your users judge your product in seconds.

    I obsess over spacing, hierarchy, and motion—the invisible details that make users trust your brand and stay.

  • 02

    END-TO-END OWNERSHIP

    From discovery call to final delivery, I own every step of the process.

    No middlemen. No telephone games. One person who designs, codes, and ships your product.

  • 03

    BUILT TO LAST

    Fast doesn't mean rushed. Every decision behind your product is deliberate.

    Accessibility, performance, and scalability baked in—so your product grows with your business.

  • 04

    YOUR GOALS, MY BLUEPRINT

    Pretty isn't enough. I design for conversion, retention, and growth.

    Every screen, every interaction is engineered to move your users closer to your business goals.

  • 05

    PROBLEMS SOLVED, NOT JUST DESIGNED

    I don't start with pixels. I start with your problem.

    Understanding the "why" behind every project means your product solves real needs—not just looks good in a portfolio.

  • 06

    DESIGN + CODE, ZERO GAPS

    Most designers hand off a Figma file and hope for the best. I ship production code.

    One person. Design and development. Faster iteration, fewer miscommunications, better results.

ABOUT ME

Karen Ortiz, Design Engineer

Based in Mexico City

You need more than a pretty website. You need a digital product that earns trust, converts visitors, and grows with your business. That's exactly what I build.

5+ Years

Creating Digital

Experiences

From startups to established brands across 10+ countries, I've designed and built products that don't just look good—they perform. Strategy, design, and code, all from one person.

Numbers That

Speak Volumes

Real projects. Real results. Here's what 5+ years of designing and shipping digital products looks like.

0
Awards won
+
0
Worldwide clients
+
0
Countries launched

Design Is Not Just

What It Looks Like

It's How It Works

Every decision I make—from layout to animation—is driven by one question: does this help the user take the next step? If it doesn't convert, it doesn't matter how beautiful it is.

Ready to turn your idea into a product that actually works? Let's talk.

GLOBAL IMPACT

Clients across 10+ countries trust me to design and develop digital products that drive measurable results—more leads, more conversions, more growth.

01
AURIN (SODIO) (Cuernavaca, México)
Design Engineer & Fullstack Developer
AURIN (SODIO) (Cuernavaca, México)
Designed mobile and web UX/UI for MonexOne and web apps like Inglesindividual, Galicia MX, Dentol MX, and Fintpay Banking, while leading fullstack development and AI automations.Developed Aurin Task Manager with Next.js, Firestore, Clerk, and AI-powered task summaries, streamlining team workflows with temporary dynamic links.
02
AURIN × ANCIENT TECH Partnership
UX/UI & Webflow Developer
AURIN × ANCIENT TECH Partnership
AURIN × ANCIENT TECH Partnership Led a collaborative four-month UX engineering project between Aurin and Ancient Tech to design and develop Ancient's main web platform in Webflow, while working directly for Aurin.Built an AI-driven interactive hero banner with WebGL animations through this strategic partnership, enhancing engagement and visual appeal.
03
OPINATOR (Madrid, Spain)
Frontend Developer
OPINATOR (Madrid, Spain)
Led the UX/UI redesign of OPINATOR's live forms WebApp, collaborating with a team of five to enhance user experience, accessibility, and developer workflows.Designed a modular design system with Figma and implemented frontend with React, boosting form response rates by 30%.
04
WEBCRAFTERS (Mexico City)
Founder & Design Engineer
WEBCRAFTERS (Mexico City)
Founded WebCrafters, a UX/UI and Web Art agency, delivering custom web applications with AI-driven features, 3D animations, and scalable architectures.Led design and deployment of visually stunning web solutions with Three.js and AI integrations, serving diverse industries.
05
ATHENIS AI (LATAM & EU)
Senior UX/UI Designer
ATHENIS AI (LATAM & EU)
Led UX/UI design for an AI-driven educational platform, creating intuitive interfaces and component libraries to enhance user engagement and developer efficiency.Crafted a Figma-to-React component library for Login and Dashboard, improving handoff efficiency by 25%.
  • 01
    AURIN (SODIO) (Cuernavaca, México) logo

    Design Engineer & Fullstack Developer

    AURIN (SODIO) (Cuernavaca, México)

    Designed mobile and web UX/UI for MonexOne and web apps like Inglesindividual, Galicia MX, Dentol MX, and Fintpay Banking, while leading fullstack development and AI automations.

    Developed Aurin Task Manager with Next.js, Firestore, Clerk, and AI-powered task summaries, streamlining team workflows with temporary dynamic links.

  • 02
    AURIN × ANCIENT TECH Partnership logo

    UX/UI & Webflow Developer

    AURIN × ANCIENT TECH Partnership

    AURIN × ANCIENT TECH Partnership Led a collaborative four-month UX engineering project between Aurin and Ancient Tech to design and develop Ancient's main web platform in Webflow, while working directly for Aurin.

    Built an AI-driven interactive hero banner with WebGL animations through this strategic partnership, enhancing engagement and visual appeal.

  • 03
    OPINATOR (Madrid, Spain) logo

    Frontend Developer

    OPINATOR (Madrid, Spain)

    Led the UX/UI redesign of OPINATOR's live forms WebApp, collaborating with a team of five to enhance user experience, accessibility, and developer workflows.

    Designed a modular design system with Figma and implemented frontend with React, boosting form response rates by 30%.

  • 04
    WEBCRAFTERS (Mexico City) logo

    Founder & Design Engineer

    WEBCRAFTERS (Mexico City)

    Founded WebCrafters, a UX/UI and Web Art agency, delivering custom web applications with AI-driven features, 3D animations, and scalable architectures.

    Led design and deployment of visually stunning web solutions with Three.js and AI integrations, serving diverse industries.

  • 05
    ATHENIS AI (LATAM & EU) logo

    Senior UX/UI Designer

    ATHENIS AI (LATAM & EU)

    Led UX/UI design for an AI-driven educational platform, creating intuitive interfaces and component libraries to enhance user engagement and developer efficiency.

    Crafted a Figma-to-React component library for Login and Dashboard, improving handoff efficiency by 25%.

SERVICES

SERVICES

Comprehensive digital solutions from design to deployment

01.

UX/UI DESIGN

& ENGINEERING

User Interface User ExperienceProduct Design Design Systems Component Libraries Mobile Design Developer Handoff

Interfaces that users trust at first glance—and that convert. Every screen, component, and interaction is designed with one goal: making your product feel effortless while driving the results you need. From Figma prototypes to production-ready design systems, you get pixel-perfect design that developers can implement without guessing.

Technologies & Tools:

Figma / Figma Make SketchClaude Code Webflow Framer

Example Project:

Led UX/UI redesign for AthenisAI app and built a reusable component library—improving form completion rates by 30% and cutting developer implementation time by 25%.

02.

CREATIVE FRONTEND

DEVELOPMENT

Landing PagesEcommerceBlogsPortfoliosInteractive Art

Websites that stop the scroll. High-performance web experiences with immersive 3D animations, fluid interactions, and pixel-level attention to detail—all optimized for speed. Your site won't just look impressive; it will load fast, rank higher, and keep visitors engaged longer.

Technologies & Tools:

WebGL/THREEJSNext.JSReactJavaScript Typescript AstroSASS/Less GSAP, Framer, Motion, AnimeVercel, Netlify, DockployBootstrap, Tailwind

Example Project:

Built an interactive portfolio with Three.js 3D visualizations and GSAP animations, achieving a 95+ Lighthouse performance score and 40% longer average session duration.

03.

FULLSTACK &

DEVOPS

Fullstack WebAppsFull PrototypesComplex Fullstack WebPagesLocal SSH ServersAPIs & Webhooks Development

The engine behind the experience. Secure, scalable backends and automated deployment pipelines that keep your product running 24/7. APIs, databases, authentication, monitoring—the infrastructure your users never see but always depend on. One developer, full ownership, zero gaps between frontend and backend.

Technologies & Tools:

Node.js Python FastAPI PrismaFirestore SupabasePostgreSQL MongoDB AtlasGitDockerVercelGitHub ActionsSentryClerkJest

Example Project:

Built Aurin Task Manager's full backend with Firestore, implemented dynamic link system and automated CI/CD pipelines—reducing deployment time from hours to minutes.

04.

AI POWERED

PRODUCTS

ChatbotsWebhook AutomationsCMS AutomationsAI CallCenters Automations

Automate the work your team shouldn't be doing manually. AI-powered workflows, chatbots, and smart automations using GPT, Gemini, and tools like N8N and Make—so your team focuses on what matters while repetitive tasks handle themselves. Less manual work, faster response times, lower operational costs.

Technologies & Tools:

N8NZapierMake Gemini/FirestoreOpenAI API IntegrationsGoogle Cloud Webhook Integrations

Example Project:

Integrated AI-powered chatbot and automated task reporting in Aurin Task Manager, reducing manual workload by 40% and response time by 60%.

DESIGN ENGINEER • PIXEL TO PRODUCTION • NO MIDDLEMEN • BUILT TO CONVERT •

UI/UX • CREATIVE DEV • FULLSTACK • AI AUTOMATION • 30+ CLIENTS WORLDWIDE •

MY STACK
REACT • NEXT.JS • TYPESCRIPT • ASTRO • THREE.JS • GSAP • FRAMER MOTION
NODE.JS • PYTHON • FASTAPI • PRISMA • FIRESTORE • SUPABASE • POSTGRESQL
FIGMA • WEBFLOW • FRAMER • BLENDER • THREE.JS • PHOTOSHOP
GIT • GITHUB • VERCEL • DOCKER • GITHUB ACTIONS • SENTRY • FIREBASE
OPENAI API • GEMINI • CLAUDE • N8N • MAKE • ZAPIER • LANGCHAIN
VITE • TAILWIND • SASS • JEST • ESLINT • PRETTIER • STORYBOOK
CASE STUDIES

Real-world UX/UI design, fullstack development, and AI automation projects — from strategy to shipped product.

01.

Building an AI-First Digital Agency Website: Multi-Agent Chatbots, n8n Workflows & LLM-Optimized SEO

A five-month journey architecting an AI-powered digital agency website with multi-agent chatbot systems, n8n workflow automation, and LLM-optimized SEO. This case study explores how modern AI technologies are transforming web interfaces, lead generation, and user experience—while maintaining cost-effective infrastructure through strategic DevOps decisions.

02.

Building a High-Performance Interactive Portfolio with Astro, Three.js, and WebGL

A four-month journey pushing the boundaries of web development: combining Astro's hybrid rendering with Three.js 3D graphics, custom WebGL shaders, and physics-based interactions to create a portfolio that's both visually stunning and technically sophisticated. This case study explores the challenges, learnings, and best practices behind building a complex, performance-optimized web experience from scratch.

Quick Projects

Landing pages, no-code builds, and creative experiments — fast turnaround projects showcasing design and development range.

  • 01
    Fullstack Plattform

    Inglés Individual Platform

    Fullstack platform managing students, teachers, and payments for 50+ English schools.

  • 02
    UI Prototype

    JarvioAI Canvas Prototype

    AI-powered prototype for Amazon seller management with interactive canvas features.

  • 03
    Complete Site

    ToTou Energy Bars

    UI redesign for Mexican energy bar brand with clean layout and vibrant product showcase.

  • 04
    Complete Site

    Cadence OTC

    E-commerce for affordable emergency contraception with nationwide store locator.

  • 05
    Landing Page

    Metaverse UI Dashboard

    Modern data dashboard for BEDU’s Data Science program with clean analytics-focused UI.

  • 06
    E-Commerce

    Health-Ade Kombucha

    Modern redesign of e-commerce for a premium kombucha brand focused on gut health.

  • 07
    Complete Site

    Ancient Tech Redesign

    Complete UX/UI redesign for an AI-powered tech consulting platform, featuring a modern interface that enhances usability and brand consistency.

  • 08
    Landing Page

    Zachariel Banking

    Fintech waitlist landing page with $100 signup bonus and premium banking features

  • 09
    Community Platform

    AWE MX

    Global XR community platform promoting spatial computing and AI innovation in Mexico

FAQS

Everything you need to know before working with a design engineer — process, pricing, timelines, and what to expect.

01.

How do you integrate design and development seamlessly?

+

I bridge design and development by creating developer-friendly design systems in Figma, paired with functional React and TypeScript components, ensuring efficient handoff and pixel-perfect implementations.

02.

What is your approach to project delivery and management?

+

I follow a streamlined process from discovery and UX design to fullstack development and CI/CD deployment, using tools like Vercel and GitHub Actions to ensure reliable, scalable solutions.

03.

How do you balance aesthetics and functionality in design?

+

I merge Web Art techniques, like WebGL and Three.js animations, with user-centric UX principles to create visually stunning, accessible, and high-performing digital interfaces.

04.

How do you incorporate AI into your solutions?

+

I enhance applications with AI-driven features like chatbots and automated workflows using APIs such as Gemini and OpenAI, boosting productivity and creating intelligent, user-centric experiences.

05.

What is your Vibe Coding approach?

+

Vibe Coding combines creative problem-solving with disciplined JavaScript and Python practices, delivering clean, maintainable code that infuses personality while ensuring scalability and performance.

06.

What services do you provide as a Design Engineer?

+

I offer comprehensive digital solutions, including UX/UI design, mobile app prototyping, fullstack development, Web Art with 3D animations, AI integration, and workflow automation, delivering user-focused, scalable, and innovative experiences.

Let's Talk

Share your project details and get a personalized response within 24 hours — no commitment required.

  • Sarah Johnson

    CEO at TechStart

    Karen delivered an exceptional website that exceeded all our expectations. Her attention to detail and creative vision transformed our brand completely.

  • Michael Chen

    Product Manager

    Working with Karen was a game-changer for our startup. She created a stunning UI/UX that our users absolutely love. Highly recommended!

  • Emily Rodriguez

    Creative Director

    Karen's motion design skills are incredible. She brought our static designs to life with beautiful animations that perfectly capture our brand essence.

  • David Wilson

    CTO at InnovateHub

    The technical implementation was flawless. Karen's expertise in modern web technologies is outstanding. Will definitely work with her again.