Jay DiNitto - UX portfolio

Jay DiNitto, UX Designer

Over 20 years experience in UX design, front-end web development, and writing. Emphasis on minimalism and simplicity while aligning to industry coding and accessibility standards. Strong in documentation and communication, tactical and exploratory thinking, stakeholder consensus-building, and integrating design cycles into agile methodologies. Wordpress-friendly, but can easily play in framework-free environments with just Photoshop and Notepad. Enneagram type INTJ 5w4.

Read more autobiograpghy

Portfolio

Skulltoaster - Official Site

Seth from Skulltoaster liked the layout the Drudge Report has always had: simple, monochrome, straightforward, like a newspaper. That's more or less the design he had when he asked me to lend a hand. I added some thick borders for better readability, optimized some of the code, and made it mobile-friendly. The winds of change blew harshly through the Internet and Skulltoaster has since been put to rest, so this design's reign of terror is over.

Shai Hulud - Official Site ↗

If you're using Tolkein's bestiary to convert lifespan timelines, Shai Hulud has been around for like two elven years. The band is signed to Metal Blade Records, and I created their official site by customizing a standard WordPress theme, using images from album artwork. Tour dates and merchandise links are given priority. No band members are orcs.

Mobile Banking Website

This was created using an early version of WURFL and a very limiting front end language, the name of which escapes me right now. That front end language had proprietary tags that compiled into normal HTML and CSS. It was limited for a good reason, as the site had to work on very early versions of browser-capable flip-phones, which all are probably occupying trash heaps now. The design looks basic and unrefined on normal browser versions today, but across nearly all generations of devies, it works the same. Try achieving that with parallax effects and 2M SVG animations.

Mutual Fund Finder ↗

Search and sort mutual fund and mutual fund families that a certain bank has to offer—putting the "fun" back in "mutual funds!"" This was done in tandem with another developer, kind of like tag team wrestling legends The Can-Am Connection, except we're both American and one (or both) of us doesn't wrestle.

PIN Entry Pad ↗

A simple number pad to input and verify a four-digit PIN, created for a corporate desktop application. It was created with another developer, but I did the design work; it was modeled after a typical ATM keypad. One my favorite parts about this is that it doesn't immediately put you into an error state until both entry fields are completed. I've experienced way too many "confirm entry" fields that yell at the user when they navigate focus off the first entry field. It's the authentication equivalent of (UX analogy inbound!) some joker passing by your screen and saying "that looks wrong!" when you're clearly not finished with the design yet.

Deposit Rates Search ↗

An "old redesign." Lets users search the current savings accounts rates for an entered zip code. It's essentially a reskinning of what was already in play. I don't remember what the previous design looked like but I doubt it wasn't anything noteworthy. This was a first foray into using jQuery to display data. This old redesign was replaced with a new redesign, so my work is gone with the wind. It was due for an overhaul, anyways.

Workout Randomizer ↗

An “app” (HTML page with CSS and JavaScript) I created, ideally for mobile devices, to randomize the moves in a given workout. The next move is always hidden until the user taps the current move. All subsequent moves are hidden, so the user doesn’t know how much longer until the workout ends. It sounds like torture but it’s actually motivating, though my testing sample wasn't large (just me).

Impresaria - Official Site ↗

*kicks tires* This here website was done for a movie script I wrote. No, you can't read the script. I did not do the illustration, but Matthew Woodson at ghostco.org did. All of the links are inactive except for the desktop downloads. What's funny about this site, if you look at the code, is that it's made with very web 2.0 HTML; there's no CSS anywhere. Font tags, table cells with just images in them to create a background feel, area maps to make links on images...and, in checking the site in all the latest versions of Chrome, Firefox, and Edge, it all still looks as expected. Huh.

Miscellaneous Designs

Weird and annoying old stuff, extracted from a broad period of time in the past. These are mostly old band sites, unused graphics, or things that won't work because it involves Flash. At the time, these designs were somewhat fashionable, but have since become a little unsightly in the light of new standards, technology, and so forth.

Some of those designs I retained as working sites, except for the Flash animations:

Coding Projects

Calling Returned Methods From An IIFE

Calling Returned Methods From An IIFE with Protected Methods

Multi-line Truncation

A method for truncating text with line wrapping.

Random Number Generator

Get some random numbers within a range of numbers.

Stacked Column Fixed Width

Fix the column width over a series of stacked tables.

States Game

Generates a random question about state capitols or nicknames, and provides the object with the correct answer.

Workout Randomizer

Randomizes moves within a chosen workout type and hides all of the moves except for the current one.

Design Autobiography

I started user experience design in the early aughts, doing a lot of band websites after going to school for graphic- and front-end web design. Streaming sites like Myspace and Purevolume were just little pups on the scene, so smaller indie bands had to create an actual website to get their info and music out. In all, I created a good 50 or 60 static websites from scratch, sometimes using album or t-shirt artwork as a design basis, or a photograph, or nothing at all. No coding frameworks were around (or at least not enjoying heavy adoption), little JavaScript was needed, and font tags were popular ("CSS what?"). All we needed was a pirated copy of Photoshop, and FTP client, and a text editor.

Flash then arrived, and we all know what happened there. I got into the game during its peak by teaching myself and subsequently plastering that stuff over every freelance project from there on out. Though I take full responsibility, you must know that everyone else was doing it too. Regardless, this was a first exposure to not just designing a user experience, but dealing with DOM manipulation. Granted, one could produce front-end only Flash, but interactivity required one to dive into Flash's console (or whatever it was called).

Then my first real job came with PNC Bank, as a front-end developer for their online banking site. With spotty or no dedicated UX designers, you can imagine that the front-end developers become the default UX creators. And your imagination wouldn't be just that; it's real life, man. It's very rare that, in a corporate environment, one can perform both jobs effectively without diving deep into one of Dante's circles, but it could happen, inconsistently. Not ideal, but stuff gets done one way or another.

I ended up working on the bank's wealth and investing section of said online banking offering, still in the same technical capacity, but now with a different team and (somewhat) separate codebase. I helped the team transition into a version of an agile dev framework, as well as adopting git as a versioning tool.

As such things go, I got an offer to move into a senior UX Designer position for the same team, which I accepted, and although this is an informal portfolio, I thought it best to have one out there as a way to mark myself onto the creative map.

Hobbies

  • User experience design (duh), front-end development
  • Creative and technical writing
  • Reading books (print is best)
  • Resistance training, cycling, running
  • That deep part of YouTube
  • Music (soundtrack, metal, symphonic, but not symphomic metal)
  • Virtual church eldership ↗ (you do not know what this is)

Resume

  • Senior UX Designer - PNC Bank
  • Jan 2018 - Present
  • Software Engineer - PNC Bank
  • Feb 2007 - Dec 2017
  • Freelance Web & Graphic Designer
  • Dec 2002 - Present

Software

  • Photoshop & Illustrator
  • Sketch & InVision
  • Sublime & Git

Awards

  • Second Place
  • PNC's Triple Crown APIfest - Sept 2018
  • Finalist
  • PNC Bank's inaugural APIfest hackathon - Apr 2016

Footer