Experiences, Interactions, Interfaces

My process begins by consolidating the human factors that align with operating conditions and the 'forces' of influence.

Historically, this has consistently produced compelling experiences that engage people and deliver substantial value back to the brand and the end user.

01

Verifone (inernal) product reband

year

2024

stack

Figma, Adobe Ai/Ae/Ps, HTML5, CSS3

Figma, Adobe Ai/Ps/Ae, HTML5, CSS3

Figma, Adobe Ai/Ae/Ps, HTML5, CSS3

Figma, Adobe Ai/Ps/Ae, HTML5, CSS3

.notes

I produced this internal video to introduce the new look, feel, and interactions for the rebranding of the product spaces. This is a good quick overview of the gigantic global effort.

(audio muted)

.problem

Before I joined Verifone, there wasn't a formalized or centralized UxD team or leadership. Product features, revisions, and updates were added on top of legacy and new products, creating a culture where design was seen as more of an 'output' service rather than an integral part of the process. The developments were disjointed, which created disjointed experiences, resulting in complexity or ambiguity along the user pathways.

With client deadline pressures, one-off features were often added, leading to a need for unification and better cross-functional operations. It was important to manage client expectations and show them how their needs would be met by demonstrating what 'better' looks like, not only in 'better output' but also with better collaboration internally for Verifone and the partnerships.

Above: Exposing relational 'sidebar' data from a row cell. Existing patterns did not promote paths to cognition to promote paths of 'cognitive recall' within heavily laden data sets. Far right: variance of side bar data sets.

Above: Exposing relational 'sidebar' data from a row cell. Existing patterns did not promote paths to cognition to promote paths of 'cognitive recall' within heavily laden data sets. Last: variance of sidebar data sets.

Above: Exposing relational 'sidebar' data from a row cell. Existing patterns did not promote paths to cognition to promote paths of 'cognitive recall' within heavily laden data sets. Last: variance of sidebar data sets.

Above: Example of web app flow. Unnecessary step segregation, especially when step three, in this instance, is confirmation of the aggregate of the last two screens.

Below: Example of web app flow. Unnecessary step segregation, especially when step three, in this instance, is confirmation of the aggregate of the last two screens.

Above: Legacy web apps (Petro/Gas Station interface shown) in need of UX improvement and IxD consistency, however, with a large user base with 'muscle memory' of flow and context within the existing app.

Below: Legacy web apps (Petro/Gas Station interface shown) in need of UX improvement and IxD consistency, however, with a large user base with 'muscle memory' of flow and context within the existing app.

.the solutions

Collaborate, plan, plan to communicate, communicate broadly, then do.

Above: Where dev teams were in silos and not using a design framework in a unified fashion (instances of the framework, duplication of assets and efforts), I established the source/sources of truth and new workflow streams. In addition, the UxD team created a centralized CDN, automated asset optimization, and set a course for development teams to embrace a CICD culture.

Below: Where dev teams were in silos and not using a design framework in a unified fashion (instances of the framework, duplication of assets and efforts), I established the source/sources of truth and new workflow streams. In addition, the UxD team created a centralized CDN, automated asset optimization, and set a course for development teams to embrace a CICD culture.

Above: Internal reference site created. Big themes, layers vs. pages, consistency of interactions and visual language, and new method to distill complexity and cognitive overload.

Below: Internal reference site created. Big themes, layers vs. pages, consistency of interactions and visual language, and new method to distill complexity and cognitive overload.

Above: In preparation for the 'grand' execution, further efforts led to the UxD team developing a more efficient standard for documentation, ease of development, and ensuring practices and standardization were able to be managed and kept in check. To do this, we utilized Storybook leveraging existing BULMA (CSS) to then standardize the use of variables and the outcome stability for the derived variables. We later created an Angular version of Storybook, integrated with Figma, leveraging Storybook Knobs and Controls to make lives easier for all dev partners.

Below: In preparation for the 'grand' execution, further efforts led to the UxD team developing a more efficient standard for documentation, ease of development, and ensuring practices and standardization were able to be managed and kept in check. To do this, we utilized Storybook leveraging existing BULMA (CSS) to then standardize the use of variables and the outcome stability for the derived variables. We later created an Angular version of Storybook, integrated with Figma, leveraging Storybook Knobs and Controls to make lives easier for all dev partners.

Above: We collaborated intensely with the Petro team as they had the most complex environment with the most aggressive delivery schedules. The pitch was that they should adopt the new design system now vs. creating in the old to only have to redo the efforts after the new brand launch. Additionally, it would prove to be beneficial for the global portal teams to leverage Petro's advancements for the new brand transition… those teams would see by example the 'better path.' They'd be the heroes… and they were.

Below: We collaborated intensely with the Petro team as they had the most complex environment with the most aggressive delivery schedules. The pitch was that they should adopt the new design system now vs. creating in the old to only have to redo the efforts after the new brand launch. Additionally, it would prove to be beneficial for the global portal teams to leverage Petro's advancements for the new brand transition… those teams would see by example the 'better path.' They'd be the heroes… and they were.

Above: Defining The new common landing for the aggregated portal activity. Quick pivots and layered reveal of detail/data.

Below: Defining The new common landing for the aggregated portal activity. Quick pivots and layered reveal of detail/data.

Above: Portal web apps are more compact and keep relevant inputs in a single vs. segregated view.

Below: Portal web apps are more compact and keep relevant inputs in a single vs. segregated view.

02

Oak OS Dashboard

year

2018

timeframe

3 months

stack

Adobe Ps/Ai, HTML5, CSS3

.notes

The OAK OS dashboard provided a single viewport solution for total device estate telemetry, software distribution, and experience management.

The design drew from the concept of a 'stellar formation.' A configuration like a galaxy can be customized to meet customer requirements (area, region, outlet, jurisdiction, and so on). The 'sun' symbolizes the central unit (kiosk/device group). The sub-units, or interactions, are depicted as 'circling celestial bodies.' Selecting a task or identifying problems was just a matter of zeroing in on the desired option within the user interface.

03

Home Depot How to Hub Kiosks

year

2016

timeframe

7 months

stack

Adobe Ps/Ae, HTML5, CSS3

.notes

The Home Depot kiosks were developed to provide in-store product locating and meaningful contextual shopping and instructional pivots.

The user journey provided 'up-sell' and product recommendations within how-to instructional videos, useful buyer tools, and automated shopping list list creation based the user's project scope/needs.


Left: Looping 'Attract/Idle Screen'

below: Looping 'Attract/Idle Screen'

below: Looping 'Attract/Idle Screen'


• Defining the interaction zones


• Thoughtful pivots & transformative UI informs and guides the experience with situational context.


•UI selections outside of the primary interaction zone are presented with a 'soft focus' and create a feeling of depth.

NEXT: below

• Defining the interaction zones

• Thoughtful pivots & transformative UI informs and guides the experience with situational context.

•UI selections outside of the primary interaction zone are presented with a 'soft focus' and create a feeling of depth.

NEXT: below

• Defining the interaction zones

• Thoughtful pivots & transformative UI informs and guides the experience with situational context.

•UI selections outside of the primary interaction zone are presented with a 'soft focus' and create a feeling of depth.

Future evolution. Concept to extend the experience for full self-service, from selecting, to purchase, and scheduling installations/contractor services.


04

Oak Labs "Magic" mirror

year

2015-2018

timeframe

60 days dev to live

60 days

60 days

stack

OAK OS, Adobe Ps, HTML5, CSS3

.notes

First developed and deployed during my tenure at the eBay Retail Innovation Lab, and launched with Rebecca Minkoff in 2014, this entirely new stack included our Debian-based OS (OakOS), which made client integrations, the administration and management of devices and experiences incredibly efficient.

Client deployments included Ralph Lauren, continuation and upgrades for Rebecca Minkoff, and an evolution outside the fitting room for Ulta Beauty (makeup mirror).


Fitting room mirror experience

Adapted stack for Ulta Beauty

05

Verifone Booth Wayfinding

year

2020

timeframe

2 months

stack

Adobe An, HTML5, CSS3

.notes

This experience incorporated a 3D modeled environment of the floor plan for Verifone's tradeshow booth at NRF 2020.

The kiosk served to inform and visually draw foot traffic for users to engage and discover Verifone's product and service offerings.

06

Interactive wayfinding kiosk

year

2014

timeframe

3 months

stack

Unity, Adobe Ps, HTML5, CSS3

.notes

During my tenure at eBay Retail Innovation, I had the honor to envision a project for Simon Property group. We had just about three months for production, which included engineering of the kiosk housing, experience production, a CMS build, and hardware installation.

I hired 'First Person' (1P), a full-stack agency in SF, to develop the vision for Front-End (First of its kind: 3D contextually immersive GUI), the Middle-Tiers, and Back-End. LGMRI manufactured the case form and supplied the literally, bullet proof touch display. This was awesomely intense and an almost 'impossible task', with all parties delivering beyond my expectations.

Starting interaction.

Starting interaction.

Targets highlighted,

Targets highlighted,

Proto testing @eBay lab.

Proto testing @eBay lab.

Proto testing @eBay lab.

07

Verifone kiosk commerce app

year

2022

timeframe

2 weeks

stack

Adobe Ps/Ai, Figma, HTML5, CSS3

timeframe

3 weeks

stack

Adobe Ps/Ai, Figma, HTML5, CSS3

This demo app was showcased as an example of Verifone’s commerce integration and ‘white-label’ capabilities at NRF 2022 trade show. Notably, this was also a ‘skunk-works’ app dev and software distribution / management exercise. We utilized an IOT platform (Balena.io) to manage the software provisioning and the peripheral device connections/maintenance (Payment Terminal, Touch Controller, Printer, etc).

The results were:

- One-hour remote set up with an on-site associate without knowledge of the stack.

- ZERO operating downtime.

-Saved 3+ months of dev time (built by myself and one full-stack SW engineer in 1.5 weeks)

08

Shoppable Storefronts

year

2014

timeframe

3 months

stack

Adobe Ps/Ai/Id, HTML5, CSS3

.notes

This was an incredible undertaking! In just 3.5 months, we successfully sold, planned, and executed a major project. As a result, Sony, Toms Shoes, and Rebecca Minkoff took over empty storefronts in San Francisco's Westfield Shopping Center. I was responsible for crafting the Interaction Design for all three brands, assisting the brands hands-on with the visual design, and the entire environmental design, including overseeing production and installation. It was an amazing experience!

09

Verifone service feature flow

year

2022

timeframe

Less than 16 hours to fulfill

16 hours

16 hours

stack

Figma, Quicktime, Adobe Ae

Figma, QT, Adobe Ae

Figma, QT, Adobe Ae

.notes

When I was at Verifone, our President of North America Sales came to me 'last minute' and requested one of our stock assets of a demo flow showing how we were extending the Cryptocurrency payment feature experience outside of the payment terminals and into client brand experiences. He said he needed it by the next morning. I took the liberty of creating something special for him and the client by applying some brand 'flavor' specifically tailored for Taco Bell. I heard later that they loved the context of the 'brand-designed' thoughtfulness.

09

eBay 'My Gadgets'

year

2013

timeframe

5 months

stack

Adobe Ps/Ai, HTML5, CSS3

.notes

My Gadgets was an eBay portal that was integrated into the Electronics Marketplace. Users could easily add electronics and then see the ʻnet worthʼ of an item or an aggregate of a collection. It provided further convenience for listing an item by leveraging historical sales and catalog data, automation for auto-fill, and setting target price alerts against market trends (popularity) based on other users’ selling trends.

This experience set interaction methods for listing/comparison models across eBay later.

  1. Landing page within Electronics. Grid/Index of the collection of items added.

  1. Landing page within Electronics. Grid/Index of the collection of items added.

  1. Adding a Gadget. Simplified UI and interaction patterns foreshadow upcoming common interactions across the domain.

  1. Adding a Gadget. Simplified UI and interaction patterns foreshadow upcoming common interactions across the domain.

  1. The search yields additional details and pivoting opportunities to list, schedule, or get a cash offer for the user's item to be listed.

  1. Expanded detail of an item with pricing trends and listing prices by sellers with similar items.

  1. Aggregated collection value with quick detail on hover to target key data about an individual item.

  1. Quick pivots to get details and statistics about the user's currently listed items.

In addition to creating the 'My Gadgets' experience, I produced a commercial for the product. I enlisted Sandwich Video and had the privilege of collaborating with Adam Lisagor during the early stages of his rise to fame. Despite facing tight constraints, a limited budget, and a strict timeline of one week for kickoff and script, one week for pre-production, and two weeks for the final cut to align with the product launch—we successfully delivered the project.

10

Crypto eComm Payment Integration

year

2021

timeframe

6 months

stack

FIGMA, Ae, HTML5, CSS3

Above: In addition to creating the Crypto payment flow for Verifone's payment terminals (in partnership with BitPay), I produced the flows for Verifone's 'white-labeled' e-commerce service integrations (Hosted Checkout).

Below: In addition to creating the Crypto payment flow for Verifone's payment terminals (in partnership with BitPay), I produced the flows for Verifone's 'white-labeled' e-commerce service integrations (Hosted Checkout).

Below: In addition to creating the Crypto payment flow for Verifone's payment terminals (in partnership with BitPay), I produced the flows for Verifone's 'white-labeled' e-commerce service integrations (Hosted Checkout).

Above: Cryptocurrency transactions require a different level of communication and clarity compared to traditional credit card and payment service transactions. Below is a flow created for client and partnership integration discussions. It illustrates the mechanics involved in disambiguation, identifies potential issues, and offers solutions and key takeaways to enable pragmatic integration planning for clients to consider.

Below: Cryptocurrency transactions require a different level of communication and clarity compared to traditional credit card and payment service transactions. Below is a flow created for client and partnership integration discussions. It illustrates the mechanics involved in disambiguation, identifies potential issues, and offers solutions and key takeaways to enable pragmatic integration planning for clients to consider.

Below: Cryptocurrency transactions require a different level of communication and clarity compared to traditional credit card and payment service transactions. Below is a flow created for client and partnership integration discussions. It illustrates the mechanics involved in disambiguation, identifies potential issues, and offers solutions and key takeaways to enable pragmatic integration planning for clients to consider.