Overview / NYCFC 2016 Season


Client: New York City Football Club
Project Manager: Janine Padilla


New York City Football Club (NYCFC) just wrapped up their much improved-tough ending included-second season. I’m one of thousands of New Yorkers that come from places where soccer is king, so, when we found out the new team in town would be playing in a baseball stadium, we threw a privilege tantrum, then remembered the reason we love this soccer thing is because we get to play it anywhere from dirt to cement, using whatever object we can use a soccer ball.

This was my second season as a fan in the supporters section. It has been a blast watching the team grow and create its own identity. There are the ongoing struggles, like the very confused stadium staff by the energy of a 90-min game compared to a 4-hr pass time; The weird season schedule; and the efforts to get the mix of classic Latin American, European, AND new chants going, but hey! if there’s one thing this city is about–besides letting Mike Pence know what we think of him–is that we are the coolest melting pot in the world.

Me hitting those high notes.

This was also my second season working with the club on a few things throughout the season:

SEASON EMAILS

Under the direction of Janine Padilla, designed and built a set of responsive emails for the different campaigns. The goal was to make the code a lot leaner from the previous season (gmail would often clip them because of their size), make them uniform, easy to edit, and targeted to NYCFC’s local and international supporters.

jupago_161106_homenonattendee_totonto
jupago_161102_newsletter2
jupago_161030_tickets
jupago_161030_away_torontofc
jupago_161028_copaamerica
jupago_161022_homenonattendee_columbus-copy
jupago_161022_homeattendee_columbus2
jupago_161019_newsletter
jupago_161016_away_dcunited
jupago_161016_away_dcunited_intrmob
jupago_161013fifatournament2
jupago_161012_newslette
jupago_161007_away_necaxa
jupago_template_cityzenswelcome
jupago_161004_seats
jupago_160928_newsletter
jupago_160925playoffs
jupago_160923_homenonattendee_chicago
jupago_160921_newsletter
jupago_160917_homenonattendee_dallas
jupago_160910_away_ne
jupago_160909_newbenefits
jupago_160831_newsletter
jupago_160828_away_orlando_intr
jupago_160824_cityzensnewsletter2
jupago_160919_globalcityzen
jupago_160819_homenonattendee_galaxy3
jupago_template_cityzensredeemreward_preview
jupago_template_cityzensportalupdate
jupago_160818_newsletter2
jupago_160813_away_columbus2
jupago_160810_newsletter
jupago_160808_seasonrenewal
jupago_160818_cityzensnewsletter
jupago_160805_away_sanjose_intrmob
jupago_160803_newsletter
jupago_160730_homenonattendee_colorado
jupago_160727_cityzensnewsletter
jupago_160724_away_redbulls
jupago_160717_away_montreal
jupago_160709_away_kansascity_intr
jupago_160705_away_nengland_intr
jupago_160702_homenonattendee_redbulls
jupago_160702_homeattendee_redbulls
jupago_160930_away_houston
jupago_160624_away_seattle_intrmob
jupago_160616_newsletter
jupago_160622_cityzensnewsletter
jupago_160607_ticketalert
jupago_160602_ticketalert3
jupago_160602_homeinternational_realsaltlake
jupago_2016home_template_attendee3
jupago_160601_newsletter
jupago_160528_homeattendee_orlando2
jupago_160526_newslettercityzens
jupago_160520_homenonattendee_redbulls
jupago_160518_away_toronto_intr
jupago_160517_cityzensnewsletter2
jupago_160409_homenonattendee_chicago
jupago_160516_welcometotheclub2016
jupago_160515_away_portland
jupago_160507_away_dcunited
jupago_160502_newsletter
jupago_160429_homenonattendee_vancouver
jupago_160423_away_philadelphia
jupago_160415_away_columbus
jupago_160317_homeinternational_orlando_v2


What I learned:

Litmus is a lifesaver, there are 50+ email clients out there and Litmus has, by far, the fastest and easiest way to test/preview them.

Screenshot of Litmus Email Clients settings
Screenshot of Litmus Email Clients settings

Dan Denney gave me a bunch of great tips at Squares. One of them is to use this handy Bulletproof email buttons generator. Reliable & and huge time saver!

– Gmail joining the responsive game means it is a good time to stop sending 700px+ wide emails!

If you know some CSS then you can quickly learn @media queries. Here’s is a quick (a bit dirty) simplified version of a responsive email.

See the Pen Simple Responsive Email by Juan Pablo (@jupago) on CodePen.


NYCFC GRAPHICS

Worked on a mix of different graphics for emails/website/sponsors/social media campaigns. These are fun to do. Mostly because of the size restrictions ad and email vendors provide.

A thing about size.. I’m leaving a lot of images out because the page is already a bit heavy. The website is set to serve you a smaller, responsive image if you are on a mobile device. Also imageoptim!! It will reduce the size of your images significally. Can’t recommend it enough!

*Huge thanks again to Janine for creative direction and Milo Kowalski (NYCFC’s designer) for the styleguides and those time consuming silos!

jupago_march18vsorlandographic6_160315
jupago_nycfc_suite_600x400_10
jupago_email_welcomefeatured8_160523
jupago_weareone-supporters_loop
jupago_nycfcvdallas8_584x183_160909
jupago_nonattendee_banner2_160703
jupago_email_citymembership0217
jupago_email_featuredseattle_160624
jupago_email_featuredtoronto_160517
jupago_email_gcf2016a_160918
jupago_email_matchdaypreview_160709
jupago_email_matchdaypreview_160805
jupago_email_matchdaypreview_161023
jupago_email_matchdaypreview2_160717
jupago_email_matchdaypreview3pm2_161016
jupago_email_nycfcvsgalaxy3_160820
jupago_email_nycfcvstoronto_khiry_161106
jupago_email_playersgif_161028
jupago_email_offer_160923
jupago_email_offer_161106
jupago_email_offer2_160820
jupago_email_offer2_161021
jupago_email_referfriendsfamily160303
jupago_email_ticektsstillavailable_160430
jupago_email_ticektsstillavailable_160521
jupago_email_timeline_161102
jupago_email_tunnelofhonorscarves160528_4
jupago_email_opencup_4_160602
jupago_email_villavskaka_160527
jupago_email_comeonnewyorkv2
jupago_entertowin_160229_600x350
jupago_opencup_160614_4
jupago_email_50off0113
jupago_email_merch_160616
jupago_email_merch_161102
jupago_email_merchonlyny_160818
jupago_ticketingemail_nycfcvscolorado_160728
jupago_email_nycfcvsmontreal3_160418
300x250_orlando_1_160529
728x90_orlando_esp_160529
970x90_philadelphia1_160618
jupago_728x90_codefridaybanner4
jupago_1280x100_codefridaybanner2
970x250_realsaltlake_160602
300x600_marqueethree2_160506
300x600_realsaltlake3_160602

016 / I stopped blogging

It’s been 2 months since I wrote my last post

Have a couple of posts in my queue but either felt they were not ready or too personal, so I decided to write more about the web and the work I’ve been doing but I missed my first self-imposed Tuesday deadline, then another.. then another.. then another.. then.. oh hai.

This weekend, as I went through my very old notepad, found notes from An Event Apart conference last year in San Francisco. These were my notes from Jeffrey Zeldman’s talk The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man):

Aesthetics are important, but everyone has their own…Attitude trumps work at most companies…Zeldman giving a Shot out to introverts…First impressions are forever…I am what stands between me and my success…If you can’t communicate you can’t sell…Blog like no one is reading

They took me back to one amazing conference, and that last note, the one where I should blog like no one is reading, got me thinking that I overthought my thinking (Who’d a thunk it?). So here I go again, trying to write a bit more and care a little less about getting to it.

Some notes on what I’m currently working on:

1. Got asked to take some B&W photos for my building’s lobby. The prints and the frames are ready and they look awesome! Will post some-color photos of the black and whites-photos when they are up.

2. FC Harlem grows faster every day. And the London Eye keeps on rolling.

3. Arts Everywhere and The Nature of Cities sites keep growing and creating amazing posts like this one in AE and this one in TNOC.

4. NYCFC projects are a lot more fun now that the team is winning. Next week we beat LA. Always a pleasure.

5. Added a contact page and form to my site and it is working great!
*Stole the slider idea from Zeldman’s site. Yes, the same Zeldman above, who I’ll also happen to see at this weeks’ Abstractions conference in Pittsburgh!

003 / Meet my worst enemy

Once upon a time, I was a young kid with a ton of free time…

In the late 80’s committed to finish Nintendo’s Super Mario Bros with only 1 life.
✓ Nailed it

In the late 90’s committed to drinking half-a-bottle of tequila to prove to my best friend that tequila’s big deal is that adults only liked it because of its weird taste.
✓ Nailed it.. I think, barely remember

In the early 00’s Committed to covering my whole room with chalk. Pretty sure I still have chalk in my lungs but..
✓ Nailed it

15th_Chalk
Ignore the broom. The robot in the middle was drawn by my good friend Victor Salas.

In the early 10’s committed to travel with Betty for 60 days straight.
✓ Nailed it… twice!!

Seeing something through (including those things that end up being a waste of time) tends to give me a huge morale boost, so I’ve naturally overcommitted many, many times.

In the late 00’s Overcommitted to organizing my photos, by name, by date, by people in the photo..several years later..
Thousands of photos to go still

In 2008 I was going to do the best wedding album ever.
Didn’t get past page 4 yet.

In 2014 committed to have my website done and it was going to be epic.
Making up 2 years later.

The list goes on and on and on, side projects, requests, personal projects, memberships..

At some point you get to learn the weight words carry and realize that keeping your word is an asset. An essential one.

You learn that you can’t blame clients for not taking you seriously, or your bosses for being unfair, or your friends for cancelling on you. It is all you. Be professional, be accountable, keep your principles, and keep your word. Everything else should fall right into place.

002 / What am I?

1982 Born

New title: A kinda ugly, sorta cute baby


1988 Singing lessons from dad

New title: Choir Kid


1995 Want to draw like dad

New title: Saint Seiya drawing expert


1996 Learn MS-DOS

New title: Duke Nukem amateur, Gorillas Master (Angle:✓ Velocity:✓)


1999 New home

New title: New Yorker


1999 First Job: Pharmacy

New title: Stock-Boy


2000 Parents buy first computer

New title: Proud owner of a Compaq Desktop


2002 Windows rules, Macs are for weird people

New title: Proud owner of a new Sony Vaio laptop from the Wiz


2003 Start College at CCNY

New title: Confused


2003 Second job: Hotel

New title: In-room dining server


2004 Switch majors

New title: Former Microsoft paint user, Future Adobe Illustrator evangelist


2004 Learn HTML+CSS

New title: Hooked


2005 Macs are the best thing in the whole world

New title: Owner of an iBook G4


2006 Third job: French Chocolatier

New title: Sales Associate


2006 2-time Champion!

New title Conference Soccer Player of the Year


2007 Graduate College

New title: Bachelor in Electronic Design and Multimedia


2007 iBook Dies. Zero backups. Lose everything

New title: Depressed


2008 Asked to build a Flash site

New title: Web Designer with a job


2008 Wedding Day!

New title: Partner


2009 Asked to build 2 more Flash sites

New title: Copy-paste expert. Reverse engineer breaker of things.


2010 Referrals coming from all sides

New title: Graphic Designer, Flash expert, SEO master, Joomla developer, Microsoft Word specialist, Powerpoint 4 out of 5 stars user, Excel formulas connoisseur. HTML ace, CSS ninja, Photoshop power user, Prestashop developer, After Effects Tinkerer, InDesign CMYK-er. MySQL modifier, Domain Name purchaser, Dreamweaver-er, Incredible Googler


2010 First big website crash

New title: Impostor


2011 First freelance gig at Pure+Applied

New title: Thankful


2012 First WordPress Site from a template

New title: PHP Web Developer


2012 First Full custom template

New title: UX Designer


2013 Attend first Web Conference

New title: Inspired


2013 Start working with databases

New title: Web Designer | Front-End Developer


2014 Design more identities and print items

New title: Designer | Developer


2015 Multiple projects at once.

New title: Hybrid


2016 Published this post

Current Title: Designer who codes


Update log

New Plugins:
Jetpack. Have never used it and “supposedly” slows sites but I really liked what I saw from them at WordCamp US last December. If it doesn’t work for me at least I get to learn how it might work for client work.

Added new Fonts!
Two weights of the gorgeous Antenna Family for my headers hosted on Webtype, and FF Dagny Pro for body font hosted on Typekit. (Probably not the best for my performance budget down the line).

– Messed a bit with my stylesheets and margins. No contact photo yet. It is winter in NY and I’m set on doing an outdoor shoot.

Cool Facts
Antenna is the first font I used as a web font. First converted it (probably not best practice) then hosted it with font-face on clients’ shared server (super slow).. but hey! It worked and it looked amaaazing!

Screenshot of update:
Screen Shot 2016-01-12 at 9.04.19 PM

001 / Is this the new Jupago?

This is the new me!

Well, not really, no. This is just the latest version. A lot more confident, more experienced, yet still full of self-doubts and never fully pleased with my work.

After naturally overthinking if my new portfolio site should have a blog, finally decided to go ahead and do it. Why? It’s a win-win!:
– Allows me to look back on progress.
– Gets me to write more; I miss writing in Spanish, yet still need to improve ESL skills.
– Allows me to create some case-studies and explain projects.
– Allows me to teach something to someone out there the way countless blogs have taught me.
– Allows me to properly credit the many, many people I’ve learned from.

Made a commitment to write a new post every Tuesday–my favorite day back in elementary school because it was “futbol” day–for a total of at least 52 posts in a year.

Decided to split posts into 4 categories:

1. Updates

Every time I add a feature to the site will write a couple of words about it. Everything from my menu to my footer. For now, just starting with the a clean template, courtesy of the awesome underscores team.

2. Case Studies

My work and the process behind it.

3. Brief Dispatches

Personal thoughts, mostly about being a designer/developer.

4. Today I Learned

Similar to Brief Dispatches, just shorter and not queued.


Now off to pick a typeface, get a decent photo (no jumping!) for the contact page and social media stuff (instagram, twitter) and dive into that CSS!

Update log

New Plugins:
Akismet. Only plugin I have right now. Not sure if I’ll leave comments open. I’m likely launching to crickets but while I have them open, Akismet should help filter those pesky SEO “experts” and other spam out of sight.

Cool Facts
My Logo above is a minified SVG with a grand total size of 3KB. Neat!

Screenshot of update:
Jupago 001: Screenshot