Technical Exploration
A technical exploration into real-time data processing and state management using Vanilla JavaScript.
Vanilla JS
Product Design
UI Engineering
Unitfy is a logic-driven utility designed for instantaneous data transformation. Built to bridge the gap between static UI design and functional frontend execution, the tool enables real-time calculations across multiple measurement systems with zero latency.
While the core logic started in the Scrimba curriculum, I decided to push the interface beyond the standard exercises. I modified the UI to align with a modern, minimal aesthetic—balancing visual simplicity with technical rigor. The goal was to ensure that the user experience felt as premium as a professional productivity tool, even in a single-function utility.
Design provided by Scrimba
Personal Design
Miguel
Construction Foreman
Miguel is a 52-year-old construction foreman in Ontario who values long-term relationships and clear communication. As a primary provider for his family, he needs a healthcare partner that respects his budget and speaks his language—literally and culturally.
Age: 52
Location: Ontario, California
Tech Proficiency: Moderate
Gender: Male
[Goals]
Access dental care information in his native language to fully understand treatments and insurance coverage without ambiguity.
Find a reliable provider for his children and grandchildren that offers fair pricing and transparent billing.
Minimize time away from work through efficient scheduling and clear pre-visit instructions.
[Frustrations]
Struggling with confusing English-only insurance terms that create anxiety about potential hidden costs.
Past experiences with clinics that "upcharge" or judge based on background, leading to defensiveness.
Overly complex booking systems that don't offer simple, direct confirmation methods.
Sofía
Digital Marketing Specialist
Sofía is a 28-year-old digital marketing specialist in Guadalajara who equates visual quality with service quality. She treats healthcare like any other premium service: she researches, compares, and expects a frictionless, tech-enabled experience before she even steps into the clinic.
Age: 28
Location: Guadalajara, MX
Tech Proficiency: High
Gender: Female
[Goals]
Verify the clinic’s quality through high-resolution photos of facilities, social proof, and modern branding before booking.
Manage appointments and inquiries digitally to fit her busy lifestyle, avoiding phone calls whenever possible.
Ensure the clinic uses modern technology and hygiene standards, reflected in their digital presentation.
[Frustrations]
Skepticism towards clinics with outdated or low-quality websites, associating them with outdated medical equipment.
Frustration with "call for price" models; she demands transparency to evaluate value upfront.
Any friction in the booking process (e.g., waiting on hold) leads to immediate abandonment and looking for competitors.
[Process]
[01] User Research
Analyzed digital standards of top dental clinics in Ontario vs. Guadalajara to identify gaps in service presentation.
Conducted sessions with both long-term and potential patients to understand anxiety triggers and decision-making factors.t
Audited the existing phone-based booking flow to pinpoint operational bottlenecks and drop-off points.
[02] Insights
Users subconsciously equate the quality of the website's photography with the hygiene standards of the clinic's medical equipment.
Lack of transparent pricing and process details was identified as the primary reason for site abandonment among new patients.
While older patients prefer phone calls, 80% of younger demographics abandon the process if digital booking isn't available.
[03 Design Solution]
Implemented a seamless bilingual toggle and culturally relevant copywriting to cater to both local and expat communities.
Integrated a direct WhatsApp API and simplified appointment modals to capture leads instantly on mobile devices.
Prioritized high-resolution team photography and embedded Google Reviews to validate clinical expertise and build social proof.
[04] Testing & Iteration
Validated the navigation structure to ensure older demographics could find contact information without confusion.
A/B tested different call-to-action placements ("Call Now" vs. "Book Online") to maximize conversion rates on mobile.
Collaborated with the clinic staff to select and integrate a scheduling software that synced perfectly with their internal operations.
[Outcome]
By automating the appointment request flow, we significantly reduced phone dependency, allowing front-desk staff to focus on high-value in-clinic patient care.
Established a robust digital presence that serves as a 24/7 lead generation engine, successfully attracting new patients in the competitive Guadalajara market.
Increased user conversion rates by providing high-fidelity visual proof and accurate clinical information, dismantling the "uncertainty barrier" for first-time visitors.
[Final Design]
[Photo Shoot]
To eliminate the "generic feel" of stock photography and establish genuine clinical authority, I directed and produced a custom photoshoot for Rios Dental. Every visual was strategically composed to align with the new brand values and website aesthetic, ensuring a cohesive patient experience from the first click to the physical visit.
[Key Learnings]
Trust is the First Treatment
We discovered that in healthcare, the user journey begins with emotional safety long before a clinical appointment is made. For the USA market, this required absolute clarity on insurance compatibility and coverage to reduce financial anxiety. In contrast, for the Mexican market, trust was built through high-fidelity visual proof: showing real facilities, the medical team in action, and authentic patient testimonials. By designing for "Trust First," we successfully reduced appointment no-shows and dismantled the uncertainty barrier.
Strategic Cultural & Language Support
Effective UX in cross-border healthcare goes beyond literal translation; it requires a deep understanding of local priorities. Our research showed that Mexican patients demanded high social proof and direct communication channels like WhatsApp, whereas US-based patients prioritized insurance literacy tools and professional credentials. We implemented location-aware interfaces that highlighted these specific needs focusing on family-centric imagery and transparent pricing for MX, and insurance badges for the US directly increasing user retention in both regions.
Digital Presence as Modern Caregiving
A website is no longer just a digital brochure; it serves as today’s front desk and first clinical impression. For Rios Dental, a responsive platform meant meeting patients in their most critical moments: searching for emergency care on smartphones or researching specialists during a busy workday. This synergy where instant digital messaging supports but does not replace human touch demonstrates that modern healthcare is at its best when technology acts as a seamless care partner.