About

Text introducing UX engineering knowledge
01
I'm a full-stack designer: I'm fluent in code.
Just like an architect needs to understand engineering principles in load bearing or material mechanics, I needed to understand exactly how my designs would be built, and make sure that my work was rooted in reality. I trained myself extensively in hands-on front-end programming.

As a result, my skillset range is wider than the average designer (I'm often called a 🦄), and have a more comprehensive insight into what goes on in the development process. More importantly, I'm able to have deeper conversations with engineers without too much getting lost in translation.

Whether it's about asking the right questions about constraints, or trying to negotiate new options that work for everyone, I'm often able to get better outcomes in what design is trying to achieve.

I hand-coded this website. I used an existing HTML template and built over it using the this stack: PHP, CSS, Javascript, Bootstrap, SQL with PHPMyAdmin, Strapi

02
My Toolkit
Domain Knowledge

Areas I have worked in:

Online
  • Enterprise SaaS, B2B/B2C Platforms, Intranets
  • Mobile Aps – Progressive Web Apps (PWAs) and Native/Platform-Specific Frameworks
  • Geospatial Analytics – Satellite Imagery, Tasking, Object Detection, GIS Data & Mapping
  • GIS Data – Vectors, JSON, Raster Tiles, 3D Imagery, Layer Customization
  • eCommerce & Payment Gateways, CRM Platforms, Content Management Systems
  • Domains & Hosting | Shared & Reseller Models, VPS, Load Balancing, cPanel
  • Responsive Design | Media Queries, Column & Grid Systems, Flex Grid & Flexbox
  • Platform Observability & Incident Management
  • Security & Authorization – SSO, Auth0
  • Accessibility, Inclusivity, Web Standards, CAN-SPAM
  • Ad Banner & Google Keyword Campaigns
  • SEO Optimization, Social Media Management & Marketing, Email Marketing Campaigns
Print & Packaging Design
  • Brand design, magazine, catalogs, packaging & books
  • Exhibition design & merchandise
Other
  • Spatial/Architectural Graphics
  • Motion Graphics, Video & Audio Editing
  • 3D Modeling
Product Design & Engineering Skills
Concepts & Methods
  • Design Thinking, Workshop Facilitating, Research Synthesis
  • Information Architecture, Information Hierarchy, Taxonomy, Object Relations
  • Heuristic Principles, Cognitive Load, Design Pillars/Drivers
  • Technical & Design Debt
Research & Discovery | Artifacts & Diagramming
  • Low to High Wireframing & Prototyping
  • Component Specifications (both in Figma and in code)
  • Sitemaps, Context Diagrams, Flowcharts
  • User & Future-State Journey Maps, Service Blueprints
  • Design Sprint Templates
  • Personas, Affinity Maps, How Might We, Empathy Maps, Icebreakers Crazy Eights, Future Headlines, Jobs-to-be-Done, Problem/Challenge Statements, MoSCoW Prioritization Matrix, Stakeholder Maps, Cost Benefit Analysis
  • User Research & Testing
  • Product & Functional Requirement Documents
Design System Governance
  • Design Guidelines, Code Documentation & Specifications
  • Live Code Repositories (Backlight)
  • Integrations | Supernova, Storybook, Figma-to-Code Synchronization (Code Connect)
  • Theming, Tokens & Variables
Agile Process
  • Jira Tickets, User Stories, Confluence Documentation, Acceptance Criteria, Quality Assurance, Backlogs
  • Daily Stand-Ups, Sprints & Epics, Grooming, Story Points, Retrospectives, Post-Mortems
  • Git Repos, Branches, Pull Requests & Merging, Deployment Processes
Where I draw reference from
Reference: Nielsen Norman Group, IDEO, IxDF Interaction Design Foundation, Material UI (Google),Carbon Design System (IBM), Mozilla MDB Web Docs, Google Learning, W3Schools
Software Proficiency
Proficiency In
General
  • Adobe Studio | Photoshop, Illustrator, InDesign, XD
  • Video | After Effects, Premiere, Avid, Media 100
  • Microsoft Enterprise 7 Google Cloud Services
  • AI | ChatGPT, Claude, Replit, Descript, Midjourney
  • GIS | ESRI ArcGIS, Mapbox, QGIS, Carto, Felt
UX Research & Product Design
  • Figma, Adobe UX, Sketch
  • Figjam, Mural, Miro, Dovetail, Confluence
  • Airtable, Notion, Evernote
  • UI Specs & Syncing | Backlight, Supernova, Code Connect, Avocode, Figma Code Connect
Engineering
  • VS Code, Jira, Github
  • Languages | HTML, Bootstrap, CSS, SCSS, Vanilla Javascript
  • Frameworks| React, Vue, Vuetify, Material, Material UI, Tailwind
Basic Understanding
  • Back End | GraphQL, REST APIs, Strapi, Postman
  • Decoupled/Headless vs. Monolithic Architectures, Single Page Apps (SPAs) and Frameworks (React, MUI, Vue/Vuetify, ShadCDN, Tailwind)
  • 3D | Blender, Sketchup, AutoCAD, Unity Engine
  • LAMP | WordPress, cPanel, MySQL, PHP
03
UX Engineering Initiatives
Faster Design<>Code Translation

Diving into Vuetify repos to see how global theming is structured, and how components are styled, to assess how may we streamline engineers' design-to-code translation process. The goal was to ensure parity and sitewide consistency, facilitate updates and deprecation, and to reduce technical and design debt.

Integrated Documentation

Exploring automated consolidation of design system guidelines, by leveraging:

  1. Figma Code Connect - doing a 1:1 pairing of Figma components to their .vue counterparts
  2. Backlight - creating a live-code mirrored view of all components and patterns in production
  3. Storybook - automatic generation of each component’s stories to ensure documentation is always updated with each version shipped.

Live Component Testing

Testing a major styling overhaul of the design system. Particularly, new patterns that were implemented to better accomodate specific tasks and workflows that had previously been overlooked.

Analysis Process
Roadmap of an exploration process into understanding the impact of the design process in engineering, and vice versa, and the development of initiatives that help improve performance, speed and accuracy.