Role: Senior UX Engineer (Contract)
Client: Google
Team: Google Nest, Magnit
Technology: TypeScript, HTML, CSS, GSAP, XState, LitElement, Open Web Components, GCP

Overview

Video history, within the Google Home app, is a way for users to quickly find footage on their Google Nest cameras.

Goal

Improve the Google Nest cameras experience within the Google Home App.

Challenges

• Enable video history scrubbing for finer-level control in portrait and landscape orientation
• Enable consistency across all cameras in the Nest portfolio

Role and Team

My responsibilities included delivering high-quality prototypes in multiple orientations and configurations. These prototypes were used to conduct a number of user research studies, collect feedback and incorporate critical feedback into future prototypes. I collaborated closely with UX team including designers, engineers, researchers, design program managers, design managers.

Results and Learnings

• The improved experience was released in the redesigned Google Home App.
• The final prototype was used to facilitate product and engineering decision-making.
• The Google Home App garnered attention in The Verge, engadget and CNET.

Role: Lead Developer
Client: Meta
Team: ustwo
Technology: CocosCreator, TypeScript, JavaScript, Facebook Instant Games, Azure PlayFab, Azure Functions, Azure Logic Apps, Node.js, Gulp, Facebook Analytics

Overview

Go Go Bots is a competitive, fast-paced, robot climbing Facebook Instant Game set in a glitchy, cyberpunk future.

Goal

Build a flagship game to showcase the capabilities of the Facebook Instant Game platform.

Challenges

• Enable friendly competition and instant playability
• Engage users via a high-quality, casual, gaming experience
• Inspire developers by showcasing the unique possibilities of the Instant Games platform

Role and Team

My responsibilities included leading the architecture of the game front-end as well as the backend.

For the front-end, I laid the foundation for and contributed to the core game systems including custom (Redux-based) state management, finite state machines for animation, a custom level editor plugin and the core game mechanic. I was also responsible for developing numerous prototypes to validate assumptions and game play mechanics through the beginning phases of the project.

For the backend, I used Azure (Functions, Logic Apps, PlayFab) and Facebook Instant Games. I was also responsible for implementing Facebook Analytics for tracking all important KPIs at a fairly granular level using.

The team consisted of 3 developers, 2 designers, 2 technical artists, 2 project managers and 2 QA engineers collaborating closely with client stakeholders.

Final Product

Results and Learnings

Role: Full-stack Developer
Client: SSENSE
Team: ustwo
Technology: Vue.js, JavaScript, SCSS, Webpack, WordPress, WordPress REST API, Node.js, Express.js, Docker, Travis CI

Overview

SSENSE is a multi-brand, luxury fashion retailer with a unique editorial section, originally founded as an e-commerce platform.

Goal

Create a scalable and flexible system for content authors to easily create and manage articles, each with a unique layout.

Challenges

• Systematize a plethora of layout variations into configurable UI components and an easy to use backend
• Systematize a variety of typographic variations that utilize a custom font

Role and Team

My responsibilities included significant contributions to the frontend design system which consisted of a variety of sophisticated, reusable, Vue.js UI components. I also contributed to the WordPress backend to create custom fields for content authors to easily create and configure thousands of layout variations.

The ustwo team consisted of 3 developers, 1 QA engineer, 1 designer and 1 project manager collaborating closely with SSENSE’s product team.

Final Design

Results and Learnings

• The WordPress backend was well received by the editorial team and enabled them to amplify their productivity.
• I quickly adopted new technologies and made contributions to optimizations for website performance via server-side rendering via a Node.js/Express.js backend-for-frontend. And automation via a build, test and deployment system via Webpack, Docker, Travis CI, GitHub and bash scripts.
• I also made optimizations to speed up development by streamlining the usage of an overwhelming amount of properties shared by highly customizable UI components. I did this by creating a flexible way to distribute reusable functionality across components via Vue.js mixins and abstracting the properties into reusable and composable objects and mixins.
• I was successful in partnering with designers to define component configurations, reusable typographic styles and systematizing designs into reusable components.
• I also created a VuePlay UI component library to showcase the various configurations of components so that they can be easily adopted and reused in the future.

Role: Senior Developer
Client: Ohio State University Wexner Medical Center
Team: Potion Design
Technology: Cinder, C++, OpenGL, GLSL, Node.js, Python, SQLite, WebSockets, LED, NFC, DMX Lighting, Bash Scripts, LaunchDaemons, Multi-Touch, Mesh Networks, Multi-Platform, BeagleBone Black, Embedded Linux

Overview

Forest Friends is a multi-location interactive environment that provides positive distraction for pediatric oncology patients.

Goal

Create an interactive experience that provides positive distraction for patients through various phases of their treatment.

Challenges

• Positively distract pediatric oncology patients while providing continuity through their treatment journey
• Enable hospital staff to easily maintain the installation without additional burden
• Create an experience that compliments each treatment phase

Role and Team

My responsibilities included developing the core interaction and animation systems for 3, 2D animal companions (rabbit, frog, duck) via animation and finite state machines. Each animal exhibited up to 13 unique behaviors in different situations and locations, as well as had some level of autonomy. I also built a Node.js service to create a mesh network between installations in multiple locations.

The Potion Design team consisted of 4 developers, 1 designer and 1 producer in close collaboration with a number of stakeholders and vendors.

Final Product

The experience is spread across the oncology floor and consist of 4 main areas/interactives:

Waiting Room

Patients begin their journey in the waiting room. They choose a virtual Forest Friend (rabbit, frog, duck) in the form of a bracelet with an embedded NFC chip. They can then scan their bracelet in each of the spaces and interact with their chosen companion. The experience consists of a 6-screen multitouch wall where patients can explore a dynamic, evolving, forest environment. They can play with their forest friend, interact with other patients’ forest friends and discover hidden interactions in the forest environment. Focused sound domes provide an ambient soundscape with soothing audio and interactive feedback for patients.

Exam Rooms

Each of the 3 exam rooms contain a multitouch kiosk in vertical orientation. The patients can use their NFC bracelet to bring up their forest friend and play a game of hide-and-seek. The installation also consists of soothing ambient LED lighting that complements the background on the screen. Once the examination commences, the interactive can be ‘muted’ which changes it to a calm environment and a soothing ambient light.

Induction

This room is where patients are sedated prior to their treatment. The interactive in this room consists of a projection in a dark room that plays an animation of the patient’s forest friend settling down for a nap. This provides a soothing and calming experience.

The Bell

In keeping with tradition, patients ring a bell to celebrate the end of their treatment. The bell is augmented with an ‘invisible’ piezo sensor and ARM-based microcontroller. When patients ring the bell, it sends UDP messages to all interactives on the network that set off a multitude of celebratory animations and sounds on each interactive.

Results

• The end result was well received by pediatric oncology staff at Wexner Medical Center and became integral to their activities.
• I authored, co-authored and contributed to three open source libraries over the course of the project that were adopted and used on a number of other interactive installation projects – a spritesheet block for Cinder, a basic sound management block for Cinder and a 2D scene graph block for Cinder.
• I learned a lot about animation state machines and finite state machines, I was able to utilize, apply and refine these learnings on numerous projects thereafter.
• Forest Friends won the Communication Arts, Award of Excellence.

Role: Lead Fullstack Developer
Client: Vibrant Emotional Health
Team: ustwo
Technology: JAMStack, React, Gatsby, Contentful, Netlify, Tailwind CSS, Framer Motion, PIXIjs

Overview

Safe Space is a repository of free resources and tools for extra emotional support while callers are on the line with 988 Suicide & Crisis Lifeline, administered by Vibrant Emotional Health.

Role and Team

As the sole developer, I collaborated closely with a designer and multiple client stakeholders to build a mobile-friendly and accessible JAMStack website. The project resulted in additional business from the client. My responsibilities included the following:

• Scoping, technical design and documentation, authoring a user manual
• Partnering with a designer to systematize components, assess feasibility, ideation and concepts for the shader
• Frontend development, backend development and devops
• Custom shader development utilizing Pixi.js
• Enabling designers to customize shader parameters via a UI tool
• Implementing UI animations and transitions in CSS and with Framer Motion

Final Design

Role: Senior Developer
Client: Prodigy
Team: ustwo
Technology: React Native, TypeScript, React Query, Apollo, GraphQL, Restyle

Overview

Prodigy Education creates standards-aligned Math and English games for grades 1-6. The Prodigy for Parents cross-platform app is a way for parents to stay informed and involved in their child’s education.

Role and Team

Focused on the building components within the insights section utilizing API’s to display data. The insights section displays various statistics to track the child’s progress and performance.

Role: Senior Developer
Client: Solid Waste Authority of Palm Beach County
Team: Potion Design
Technology: Cinder, C++, OpenGL, GLSL, JavaScript, Node.js, Express.js, HTML, Jade, CSS, SCSS, Python, WebSockets, WordPress, PHP, MySQL, Multi-Touch

Reduce, Reuse, Recycle, and Rethink is a 20+ person multitouch interactive located at the education center in the Solid Waste Authority, West Palm Beach, Florida.

The interactive consists of a 20 foot multitouch table and a large video display system.

On the touch table, tour groups can explore an interactive map to learn more about the renewable energy facility and the area surrounding it. Users are also invited to participate in 3 interactive, educational games and learn more about recycling, waste and how to be more environmentally conscious. The experience is led by an instructor and controlled via a browser-based iPad application.

My responsibilities included developing a variety of features in the interactive map, 2 educational quiz games and an iPad controller application. The Potion Design team consisted of 1 designer, 3 developers and a producer.

Role: Technologist
Client: Shake Shack
Team: Big Spaceship
Technology: JavaScript, HTML, CSS, SCSS, jQuery, Bootstrap, PHP, WordPress, WordPress Plugin API, Python, MySQL, Facebook API, Foursquare API, Instagram API, Twitter API

Shake Shack is addictive burger shop that grew from a small hot dog cart in Madison Square Park to become a New York Institution.

The website is powered by WordPress, a custom responsive, modern, theme and numerous custom plugins that employ popular social API’s to showcase Shake Shack’s large community and immense social following.

Visit the site.

Role: Senior Developer
Client: Brooklyn Historical Society
Team: Potion Design
Technology: OpenGL, GLSL, C++, Objective-C, OSC, XML, Lighting, LED strips

In Pursuit of Freedom is a permanent, interactive exhibit at the Brooklyn Historical Society. It narrates the untold stories of important abolitionists via images (or lack thereof), illuminated artifacts and text to reveal relevant contemporary questions.

The experience is comprised of four sections each dedicated to the stories of 3 activists. Each section contains a suspended, 8 foot projection column, a pulley system to ‘scroll’ and suspended, light-boxed artifacts related to each story. Users can use the pulley system to ‘scroll’ through the story of each activist which also lights up the artifacts based on the narrative context.

Each pulley uses an arcade spinner controller and custom hardware. The light-boxes are fitted with LED strips that are controlled via OSC routed through a lighting controller.

Role: Technologist
Client: Hewlett-Packard
Team: Big Spaceship
Technology: HTML, CSS, JavaScript, jQuery, LESS, PHP, Bootstrap

During my time at Big Spaceship, I collaborated with a team of designers, developers and producers to develop the front-end for Hewlett-Packard’s internal communications platform called OneHP. The design system consisted of a number of reusable components and was built with Bootstrap and PHP.