Web developer × UI/UX designer
I help growing businesses turn ideas and outdated websites into visually strong, responsive, and functional experiences—designed to earn trust and convert visits into inquiries, bookings, or sales.
01 Selected work
These self-initiated studies demonstrate strategy, interface design, responsive frontend development, and business-focused storytelling. They are clearly labeled conceptual and do not claim real client outcomes.
01 Fitness & coaching
Concept projectA focused landing-page concept that moves a visitor from skepticism toward sign-up through offer clarity, program structure, and repeated calls to action.
02 Food & beverage
Concept projectA warm café website concept that uses atmosphere, menu discovery, location details, and reservation touchpoints to encourage a real-world visit.
03 Home services
Concept projectA trust-led service website concept that makes urgent booking easier through strong hierarchy, clear services, reassurance, and mobile-first contact paths.
Transparency note: FitForge, Brûlé, and ArcticFix are self-initiated conceptual projects. Any brands, testimonials, statistics, or results shown inside the live concepts are fictional presentation content.
02 Services
I can work from a rough idea, an existing brand, or a site that no longer represents the business clearly.
For a new offer or a business starting online
Structure the message, prioritize the right content, and design a responsive interface around the action visitors should take.
For a polished, functional site ready to launch
Turn approved direction into a fast, accessible build with purposeful interactions, forms, integrations, and deployment.
For an existing site that feels dated or unclear
Identify what is holding the experience back, then improve its hierarchy, mobile behavior, visual system, performance, and calls to action.
03 Working system
My range lets me consider the interface, business message, responsive behavior, technical constraints, and launch—not just one isolated part of the website.
Research · Content hierarchy · Wireframing · UI systems · Responsive design
HTML · CSS · JavaScript · Laravel · WordPress · MySQL · API integration
Accessibility · Performance · SEO foundations · GitHub · Vercel · Supabase
04 Process
Every stage has a purpose, an input, and a concrete output so the project stays understandable as it moves.
We clarify: audience, offer, goals, scope, references, timeline, and what success should mean for the website.
Output / Project direction
You provide: business context, current content, brand assets, and the questions customers ask most often.
Output / Sitemap & hierarchy
I shape: the responsive visual system, content rhythm, interaction states, and primary conversion path.
Output / Responsive UI direction
I develop: semantic pages, reusable styles, interactions, forms, and the agreed technical integrations.
Output / Working website
We review: content, keyboard use, mobile layouts, links, performance, forms, and deployment settings.
Output / Production release
05 About
I’m John Mark Bataller, a BS Information Systems graduate and web developer with experience across frontend development, WordPress, Laravel, technical support, and digital production.
I approach UI/UX as part of the build—not decoration added after it. The goal is a website that communicates clearly, responds well across devices, and gives people a confident next step.
2025 — Present JCO Marketing Inc.
Office network troubleshooting, hardware maintenance, technical documentation, digital graphics, and production-system support.
2025 MISOut
Built and integrated Laravel and JavaScript features, resolved 20+ production issues, and improved responsive UI components.
2022 — 2025 NoypiGuru
Developed and maintained a WordPress website, implemented on-page SEO and AdSense, and improved speed and cross-device compatibility.
Graduated 2025 University of Rizal System
Additional training includes TESDA NC II, software testing, ICT conference participation, and leadership development.
06 Common questions
Landing pages, service-business websites, portfolio websites, WordPress sites, campaign pages, and frontend interfaces. For larger systems, I can define the scope and recommend an appropriate architecture before development begins.
Yes. I can audit the current structure, identify usability and conversion problems, preserve useful content, and rebuild the interface with stronger hierarchy, responsiveness, performance, and calls to action.
A clear description of the business, the website’s goal, available brand assets and content, useful references, required features, target timeline, and any current site or technical constraints.
Both depend on the number of pages, content readiness, integrations, review cycles, and project complexity. After reviewing the scope, I provide a clear proposal and milestone plan rather than guessing from a single template price.
FitForge, Brûlé, and ArcticFix are self-initiated conceptual case studies. They demonstrate my design and development approach. Any business claims or results inside those concepts are fictional presentation content unless explicitly stated otherwise.
07 Start a project
If the form is not your thing, reach me directly. I typically respond within 24 hours.
Email jmarkbataller.work@gmail.com ↗ WhatsApp +63 976 065 9288 ↗