UX Presentation: PDF

UX Presentation Takeaway

In 2016, I organized a Lunch-n-Learn for the Raymond James Marketing Department (120 people) to explain the trends and values of modern User Experience concepts. This PDF is an 8.5" x 11" version of the PowerPoint presentation, used as a takeaway for attendees.

Tools:
Adobe InDesign
Stock Photography

Roles:
Copy writer
Art Director
Designer
Presenter

View full PDF
Fishmas Postcard

Fishmas Card

4" x 6" Promotional holiday postcard for the season.

Tools:
Adobe Photoshop
Adobe InDesign
Stock Photography

Roles:
Creative Director
Designer

View full-sized image
Alex.Brown Postcard

Alex. Brown Direct Mailer

6" x 9" postcard announcing Raymond James Financial's acquisition of Alex. Brown.

Tools:
Adobe Photoshop
Adobe InDesign
Stock Photography

Roles:
Art Director
Designer

View full PDF
Rubik's Cube Trifold Mailer

Rubik

A vertical trifold direct mailer for Raymond James Financial. They will lend you money (if you're already rich).

Tools:
Adobe Photoshop
Adobe InDesign
Stock Photography

Roles:
Art Director
Designer

View full PDF
Watercycle: 3D Rendering

Watercycle

A concept for a motorcycle shipping service magazine ad. "We make the process fluid."

Tools:
Blender 3D (fluid simulation)

Roles:
Designer

View full-sized image
Responsibe Mobile Website Concept

FC Mobile

A concept for a mobile app (web or native), walking through the customer experience.

Tools:
Adobe Fireworks

Roles:
Designer

View full 4-page PDF
The Vault Email Template

The Vault

An internal email for Raymond James Bank.

Tools:
Adobe Fireworks
Constant Contact

Roles:
Designer
Developer

Asphalt Motorcycle Shipping Ad

Asphalt Motorcycle Shipping Ad

A full-page magazine ad for a motorcycle shipping service.

It ran in Full Throttle magazine.

Tools:
Adobe Photoshop
Adobe InDesign

Roles:
Designer
Copy Writer

View full-sized image
FreightCenter Home Page Redesign

FreightCenter Home Page Redesign

A concept for a revitalized FreightCenter home page, based on a new color scheme and Google's Material Design concepts.

Tools:
Adobe Fireworks

Roles:
Creative Director
Designer

View full-sized image
MyLaserSpa Billboard Concepts

MyLaserSpa Ad Concepts

Tattoo removal ad concepts, for magazine and billboard.

Tools:
Adobe Photoshop
Blender 3D

Roles:
Designer

Beeramajig: 3D Rendering

Beeramajig

Mock concept for an in-house beer brand, loosely based on the much-beloved project management system, Workamajig.

Tools:
Adobe Fireworks
Adobe InDesign
Blender 3D

Roles:
Copy Writer
Designer

View full 3-page PDF
Box Card: Concept for a business card for a shipping company

Box Card

Concept for a business card for a shipping company.

Tools:
Blender 3D
Adobe Fireworks

Roles:
Designer

Shotgun Beer: Concept for a beer can with pull tabs on both ends

Shotgun Beer

Concept for a beer can with pull tabs on both ends.

Tools:
Blender 3D
Adobe Fireworks

Roles:
Copy Writer
Designer

View full-sized image
My Pretty, Pretty Botox Injection Playset: Concept for child's toy that should never, ever be created.

My Pretty, Pretty Botox Injection Playset

Concept for child's toy that should never, ever be created.

Tools:
Blender 3D
Adobe Fireworks
Stock Photography

Roles:
Copy Writer
Designer

View full PDF
The car from 'Chitty Chitty Bang Bang' in pure black and white.

Spot Color Car Icons

The car from "Chitty Chitty Bang Bang" and the DeLorean from "Back To The Future" in pure black and white.

For use in promotional t-shirts.

Tools:
Adobe Fireworks

Roles:
Designer

Applied Memetics Logo Redesign: A re-imagining of the existing Applied Memetics logo

Applied Memetics Logo Redesign

A re-imagining of the existing Applied Memetics logo

UX Takeaway
Fishmas Card
Alex. Brown Direct Mailer
Rubik: Vertical Trifold Direct Mailer
Watercycle
FC Mobile
The Vault
Asphalt Motorcycle Shipping Ad
FreightCenter Home Page Redesign
MyLaserSpa Ad Concepts
Applied Memetics Logo
Beeramajig
Box Card
Shotgun Beer
My Pretty, Pretty Botox Injection Kit
Spot Color Car Icons
Raymond James Forefront Concept
Raymond James Forefront Wireframe

Raymond James Forefront

Based on wireframes provided by another department, I designed and prototyped the initial concept, then developed the front-end after the concept was approved.

Tools:
Adobe DreamWeaver
Adobe Fireworks
Adobe InDesign
HTML
CSS
jQuery

Roles:
Art Director
Front End-Developer

Wireframe: View full 6-page PDF

Concept: View full-sized image

Website: View site

Color Scheme 2017

Raymond James Careers

Based on wireframes provided by another department, I designed and prototyped the initial concept, then developed the front-end once it was approved.

Tools:
Adobe DreamWeaver
Adobe Fireworks
Adobe InDesign
HTML
CSS
jQuery

Roles:
Art Director
Front End-Developer

View site
Color Scheme 2017

Raymond James Creative Brief Redesign

Lamenting the sad Word document used as a creative brief in a department full of creative communication experts, I took the initiative to add some vitality and UX to the creative brief. After interviewing each department head and designer to assess their needs (and a second outside creative agency), and after many reiterative meetings, the creative brief was fully redesigned.

This is the creative brief template that Raymond James Marketing uses today.

Tools:
Adobe InDesign

Roles:
Art Director
Copy Writer

View full PDF

Spectrum Field Ribbon Board Animation

Played between innings at Spectrum Field in Clearwater, Florida.

Tools:
Blender 3D
Adobe Fireworks
Stock Photography

Roles:
Creative Director
Designer
Animator

Raymond James Branch Sites

The Problem:

Each individual branch website for Raymond James Financial branches (hundreds of them) were saved as individual HTML files, with absolutely no shared resources. A new branch site request meant that the Branch Manager would type all of the branch information (address, phone numbers, staff members and their contact information, et cetera) into an email; an administrator would copy that information into an Excel spreadsheet and email it to a Web Designer; the Web Designer would then manually copy-and-paste that information throughout a batch of HTML files. Updates to existing branch sites were similar. This process took hours.

The Solution

Paired with a Back-End Developer, we created a very simple one-pane CMS as a one-time data entry point.

The Result

We reduced the man-hours required to make a new branch site from six to one. Updates implemented with ease, without the need for a Developer.

Tools:
ASP .NET
jQuery

Roles:
Developer

Google AdWords ROI Tracking

The Problem:
FreightCenter relies heavily on Google AdWords for sales leads, but lacked a true means of measuring ROI on a campaign, ad, or keyword level. This was due to the site functioning on two entirely different domains; the public-facing website, and the proprietary web app (Transportation Management System, or TMS). AdWords was setup for the public-facing website, but the actual user data was stored in the TMS, inaccessible to AdWords.

The Solution:
Using a CSV report generated by the TMS, I associated a sales date and dollar value with an email address; tapping the Woopra API, I associated the email addresses with AdWords GCLIDs; using PHP, I generated a CSV file that paired sales dates and dollar amounts with AdWords GCLIDs, a report that can be uploaded to AdWords.

The Result:
True ROI data for AdWords campaigns, ads and keywords, allowing for the elimination of wasteful ads, saving thousands of dollars a day.

Tools:
PHP
MySQL
Excel
AdWords
Woopra API

Roles:
Developer

The Google Tag Manager Data Layer

Google Enhanced Ecommerce

Because FreightCenter sells a service and not a widget, translating the unique sales funnel into Google's rather rigid template proved challenging. Working closely with The Marketing Department, we figured out which data to include, how to incorporate it, and what it would mean in the resulting report.

Tools:
JSON
Google Tag Manager
Google Enhanced Ecommerce

Roles:
Developer

A/B/n Test Crazy Egg Registration Conversion Rates

A/B Testing

The Problem:
"We don't have all of the money. Figure out why."

The Solution:
Ongoing A/B/n testing for the home page, SEO pages and PPC landing pages, with additional insights from Crazy Egg.

The Result:
A site-wide registration rate increase from 5.67% in the beginning of November 2016 to 8.19% at the end of January 2016, a 44.44% increase. With an average of about 14500 visitors per month, the result is approximately 3650 additional registrations, a value of roughly $65,500 per month.

Color Scheme 2017

Color Scheme Update

The Problem:
The whole FreightCenter color scheme was orange. Just orange. #FF6C2F. For everything. When everything is orange, there is no real differentiation for calls-to-action, and -- more imporantly -- the owner of the company didn't really like orange.

The Solution:
I dramatically updated the FreightCenter color scheme to match a more modern sensibility of an online service in 2017.

The Result:
A departure from #FF6C2F, for starters. The Design Team now has a much richer palette to draw from and explore, while maintaining a uniform brand. The new color scheme better represents a modern web application company.

View full PDF

2016
FreightCenter, Inc.
Art Director and Front-End Developer

 

2014
Raymond James Financial
Art Director

 

2013
FreightCenter, Inc.
Web and Graphic Designer

 

2011
13 Guys Named Ed, LLC
Owner, Web and Graphic Designer

 

2008
Freelance guy in Chicago
Web and Graphic Designer

 

Ancient History
Chicago Board of Trade
Chicago Sun-Times
Apex Automotive Warehouse
Owasippe Scout Reservation

Myers-Briggs: INTJ: The Architect


I'm a laid back and affable guy who goes out of his way to avoid drama. I do, however, have a decidedly competitive nature and I am driven to outperform. I would much rather finish something well than finish something soon. I am outrageously honest when asked, though not always eager to volunteer information. I’m a generally handy guy to have around. I enjoy solving problems and I’m not afraid to delve into unfamiliar territory or get my hands dirty.

I'm essentially your standard, all-purpose nerd.

Image courtesy of 16personalities.com

Jason Katzwinkel

Tampa, Florida

 

(312) 208-9518

jason@katzwinkel.com