What do I do? There are a lot of answers to that question that are dependent upon when that question is asked during my during my career. Since starting totally on a lark in 1981 at a tiny, weekly tabloid in Ocean City, NJ, I've worked at and for a lot of different types of companies. They range from small design firms with less than a dozen people to giant, multinationals that have tens of thousands of people all over the globe. So, let me set out to answer that question.
Through the 80's to the mid-90's, I was a graphic designer. Small newspapers, glossy magazines and a large corporation included the list of employers. Buying my first Mac in 1991 was an exhilerating experience. I could now do everything as a designer that I'd ever dreamed.
Taking advantage of the new power at my fingertips, by 1997, I was fully hooked on Photoshop and 3D. It wasn't long before I unleashed that in the workplace. For a decade, I was a CGI artist at ad agencies and a lot of my work was creating hero images for print.
Realizing that I had to venture into the world of interactive design, in '99, I created my first site. Loving what could be accomplished in Flash (even though I hated the program), I opted for that. For the time, it was rather unique and even included a standard definition resolution video of my first 3D demo reel.
In short order, I started doing both front end design and development for agency clients. By 2004, I'd given up print work all together and never looked back.
Since then, I've kept progressing as both a designer and developer. I'm now a hybrid. As to design, I do all aspects of front end interactive design: information architecture, user experience, interface and interaction design.
In the area of development, though knowing some middle and back end technologies, I stick to the front end: HTML, CSS, Javascript and jQuery are the primary technologies I leverage. It's very satisfying to me to create the entire user experience in code.
In keeping with being a hybrid, my method is out of the norm as well. When comes to prototyping and visual design, my skills allow me to skip the traditional step of creating prototypes that have no usefullness toward the end product. What I create is truely actionable code that can be applied by the developers that are down the line.
I guess you can consider me a product designer & developer.
My latest work is at the top. For several companies in my resume (most notably, SAP), I unfortunately no longer have active links to the work I did since that content has been omitted from their sites during updates. As of July, 2018, I'm only showcasing the product design work I've done in the last decade or so. At a later date, I will be incorporating all of my best work during my career in this section.
I've been a bit lax in updating my portfolio in the last year or so since I tended to be rather busy. Obviously, COVID has changed that so, in the next month, I'm refreshing my site to show the work that I've done for Comcast and IQVIA since 2018. If you'd like to see some of the work I've done for them, email me and I can provide links.
From time to time, I get comments about it not containing lots of examples showing the progression of a design from ideation to final product. That's not the way I work.
My work method consists of 3 distinct stages: research, ideation and creation.
About 1/3 of my time doing UX design is brainstorming concepts in my head. Conceiving new ways to do something is not building with LEGO blocks.
This lean approach to UI/UX design saves a great deal of time in the product development life cycle and ensures that the prototype that gets approved is exactly what the product will be. Also, I can do all of the cross-browser QA before the code is delivered to the development team. To quote Morris Day, "It's not for everybody, just the sexy people."
Just in case you have never seen a web site before, things that are in a different color & are underlined are links. Didn't think that needed to be explained, but...
This design was for a SaaS data analysis plattform for the pharamceutical industry. It desperately needed a redesign to move it into the 21st century. On top of the standard UX considerations, I also had three other considerations since this was an existing client facing product:
To that end, below are a bunch of wireframes as well as a style guide that I was developing for them. While there was never an actual case study (they weren't interested in that), these wireframes are in chronological order.
The IQ20/20 UI when I started in 9/2019
To give you an idea how much help this web app needed with UI and UX, here is a screen shot of what the landing page looked like. Moving further into the web app, the design got much worse.
The re-designed IQVIA UI frame
My first step was to reconceive the actual UI frame into which the data would be displayed. The thought was to have the header and nav elements be as concise as possible while still being logical and easy to read. Being a client facing product, brand consistency was also with IQVIA's standards was also a large consideration.
SFTP Auto-Delivery Scheduler wireframes
Initial design for the Auto-Delivery Scheduler process flow. This was a re-imagining of the design for a very powerful and highly used tool within the app. It's vastly superior to what they had.
Concatenated Columns tool wireframes
Design for a process flow edit and add concatenated columns to the UI's SuperFilter.
View Report revision rough layout
Second design for new feature that gave users a way to jump quickly to frequently used reports from the landing page.
SMART Administration Page wireframes
New design of their existing SMART Administration Page that offered a better experience and improved UI.
Edit Market function wireframes
An improved design of the Edit Market function of the apps SuperFilter which allowed the end user to customize it.
IQVIA IQ20/20 Style Guide
Along with an actual HTML prototype (below), I created a style guide to be used as a reference document for the development of new features in the future.
IQVIA IQ20/20 HTML Prototype
This the prototype I was working on until they switched gears on me. I was producing this with the thought that all of this code would eventually go into the final product. While I had made more pages than the landing & Ad-Hoc pages, they aren't complete so those aren't included. Please do click the "View Report" and "SuperFilter" buttons as well as rollover the "Report Menu" link on the right of the primary navigation bar.
One thing to keep in mind is that the data content in the prototype is image captures from their product. I never had the chance to redesign the graphs due to being laid off by The COVID thing.
This product design was an internal facing web app for the technical teams that observed the performance of their cable box systems and implemented improvements to the systems that served them to improve their performance. The stated intent was to find where things were going wrong.
X1 Telemetry Initial Wireframe
This wireframe was my initial thought on improving one small part of there graph interface. The reason why I'm including it as so you can see the before in the before and after comparison.
X1 Telemetry Wireframes
After beating several ideas around, I scrapped most of the X1 UI and came up with a fresher look with larger text that was easier to read and a color scheme that was more inline with the company's brand equity colors. It also incorporated a bunch of new features that would make the UI more efficient for the everyday user.
X1 Telemetry UI Additions Wireframes
With my new UI approved, I set upon adding several new features that improve the productivity of everyday users. These wireframes document that.
X1 Telemetry Prototype
Here is the prototype I was working on when my contract ended. It is not complete, but it contains a lot of the interactivity that I was incorporating such as:
While they have all of the infrastructure necessary to ascertain how their VIPER platform (video over IP) performs at the moment, they had no way of seeing how it performs over time. That is the reason they decided to build CoV (Cloud TV Operations Visualizer). I was brought in to design the UX for CoV. Unfortunately, what I designed for them will, most likely, never see the light of day or may be used when the do their v2.0 of the program (internally, it became known as CoV-J... for Jeff or CoV 2.0).
CōV Interactive Prototype
This link is to the prototype I created for them. The inspiration for the design was from studying the design of the latest dashboard designs in commercial airliners. The biggest goal was to design it so a huge amount of information could be easily read and comprehended. Feel free to poke and prod it to find the features I hoped to build into their platform.
CōV Initial Wireframes
The first wireframes I made for the project. Once I got rolling on the prototype, these were depricated.
CōV Style Guide
The style guide I worked on for the project. It, like the prototype, is incomplete.
I was contracted to redesign the UX for International SOS TravelTracker, their premiere product that allows travel managers at Fortune 1000 companies to monitor oversees employees and the countries in which they are working. This was meant to be an evolutionary redesign that improved both the user experience and the visual design without changing the core information architecture substantually. I was also given only a month to do it because they had a deadline looming for their next product release and it couldn't be moved back.
TravelTracker SilverLight Interface
Screen capture of TravelTracker in its original state done in SilverLight and the initial HTML5 interface done by the developers
TravelTracker Wireframes PDF
The TravelTracker wireframes I created
TravelTracker visual design/prototype
My incomplete visual design for TravelTracker (time/budget constraints limited the time alloted for this phase). This is an interactive prototype with menu drop downs, custom select menu, etc. that are semi-functional
With DoubleClick no longer accepting Flash banner ads, ad agencies were under the gun to replace them with HTML5 banners. Here are the two best I coded and animated for Atmosphere Proximity. Both of them used the Greensock animation plug-in extensively and were for HP Enterprise.
HP Enterprise Vital Component
This is a new Rich Media banner ad that includes MP4 video files at the center of the banner and required a good bit of JS programming.
HP Enterprise Security: See How
This particular banner is remake of a Flash banner. While most of the elements were exported out of Flash and saved as SVG files, all of the simpler shapes were created used HTML and CSS. This banner required over 500 lines of Greensock animation code.
SpectraMedix eMeasures360 Style Guide
From a freelance project for Spectramedix, this was a comprehensive style guide for the development team. The product is an anylitics web app for use by hospital operaters. I also created the prototype for this project, but it's quite large. This will give you a very straight forward look into my method for product design.
As the first Front End Developer brought on as a C-2-hire, my responsibilities were manifold, but I was used primarily as a UX/UI design resource as well as coder for any and every aspect of the HTML/CSS/interactivity for their sites and online apps . I also served as a liaison between the Marketing and Dev departments. The cornerstone of my first month at the company was the successful launch of their 1st interactive web prototype for in-store bridal registration using an Apple iPad.
DavidsBridal.com
My final project at the company was working on their latest, fully responsive site.
Spec DBI Landing Page
Done, when I had some free time, to show my bosses what the DBI home page could be like if I designed it. Please ignore the detritus and noise left over from the then existing site (small bits of type that didn't need to be there). Those were left in to give the marketing people a sense of security.
Home Page Billboard prototype
Done in a little over a day to show what we could change the billboard to when using HTML5.
Mobile Event Management prototype
This is for an internal microsite accessed by store associates to search for bridal registrations done online. Since this is designed to be accessed by in-store iPads, this is best viewed on an iOS device or a Webkit browser with the page zoomed out a bit. Once again, these are my working prototype files that were handed off to the integration team to build the site.
New DBI Main Navigation Menu
In moving toward the new aesthetic for their upcoming site redesign, this prototype was created
Product Page Recommendations Sidebar
This is the working prototype of the Product Page Recommendations Sidebar used on their old web site.
MDLinx.com Redesign
My title was Web Content Manager for MDLinx.com, but, in my year working for them, I became their go-to HTML/CSS/multimedia person. I was the lead for the HTML, CSS and UI/UX coding and optimization (including SEO and browser compatibility back to IE6) of the templates for their new site.
EC2 portal design
The Greenview site was to be a portal for their clients allowing them to manage their energy use and monitor their solar arrays. The company stopped my work mid-project due to budget problems.
StudioETC Redesign
I was was brought in to help with the redesign as well as develop all of the code in whirlwind fashion for the rebranding of their business (formerly StudioEEC). I guess they really liked it because it didn't change much for 6 years.
Athertyn 2008
The client changed design direction 2 days before original launch, scrapped a much nicer design and I was then told to build this site with a soundtrack player (abandoned at the end of build) which is why the site is mostly in an i-frame. Unfortunately, the nice Flash splash page with animation and a really cool theme song that I created was taken down after one year.
This is the genesis of my brand new web site. Totally new both inside and out. It's been a long time coming for this redesign. When it comes to my site, I like being deliberate. I've been kicking around ideas and visualizing them in my head for about 6 months. There was a lot of gear-spinning in my cranium before I actually cracked open Dreamweaver to set my final ideas to code. And, then, there is also the thrill of debugging all of the features and behaviors that I've never tried before.
In the end, though, it all winds up being gratifying to create something that's also not only new to me, but also seems to be unique to the web (hey, I'm not positive that no one has ever created a UI that behaves exactly like this site, but I've never seen one).
This, though, is only the first step of this platform. My ultimate goal is to transform this into an immersive, 3D experience that's unique to the web. As of July 30th, 2018, I'm very happy to have a new site with fresh code that contains my last decade of design and development.
Baby steps...