A selfie of me hiking on snowy Mt. Rainier. I am smiling while wearing my hat and sunglasses. Behind my head, in the distance, you can see the looming peak of Mt. Adams.

ProSource

A reflection on the numerous hats I’ve worn during nearly 7 years at ProSource.

It’s hard to be­lieve I’ve worked full-​time at ProSource nearly 7 years now. It’s vir­tu­ally im­pos­si­ble to dis­till every­thing I’ve done into a sin­gle post, but I’ve done my best to break up the roles I’ve played into sev­eral broad cat­e­gories.

Prod­uct & Web De­sign

In Oc­to­ber of 2020, my role was changed to Prod­uct De­signer. This more closely aligned with the type of work I was doing and would con­tinue doing. In 2021, I spent the ma­jor­ity of my time on the com­pany re­brand and re­design­ing our main mar­ket­ing web­site.

The re­brand ef­fort had so many ten­ta­cles into other areas, in­clud­ing but not lim­ited to:

  • Brand and brand guide­lines
  • Col­lat­eral, in­clud­ing busi­ness cards
  • Brand­ing of tools and plat­forms
  • Email tem­plates

Since mid-2022, I’ve been work­ing on our com­pany’s de­sign sys­tem, af­fec­tion­ately re­ferred to as Met­tle. This has helped me main­tain vi­sual con­sis­tency across our plat­forms and pro­vide struc­tured — but not rigid — guide­lines to dream up new de­signs.

Case Stud­ies & Projects

Below is a col­lec­tion of case stud­ies and projects I’ve com­pleted at ProSource:

Var­i­ous UI

An ec­clec­tic se­lec­tion of var­i­ous UI bits I’ve de­signed over the years:

Dribbble shot of the ProSource with a Vercel-inspired aesthetic post.

ProSource with a Vercel-inspired aesthetic

Posted

Dribbble shot of the ProSource Website — Menu Prototype post.

ProSource Website — Menu Prototype

Posted

Dribbble shot of the ProSource Landing Pages — HIPAA Quiz post.

ProSource Landing Pages — HIPAA Quiz

Posted

Dribbble shot of the ProSource Invoice Email Templates 2023 post.

ProSource Invoice Email Templates 2023

Posted

Dribbble shot of the ProSource — Landing Page Concept 01 post.

ProSource — Landing Page Concept 01

Posted

Dribbble shot of the ProSource Website — Video Library Concept 01 post.

ProSource Website — Video Library Concept 01

Posted

Dribbble shot of the Mettle Design System — Color Tokens post.

Mettle Design System — Color Tokens

Posted

Dribbble shot of the ProSource Website — Blog Concept 01 post.

ProSource Website — Blog Concept 01

Posted

Dribbble shot of the ProSource Service Ticket Email Templates 2023 post.

ProSource Service Ticket Email Templates 2023

Posted

Front-​End De­vel­op­ment

I man­age all of our com­pany’s web prop­er­ties and email tem­plates. Cur­rently, we have 5 web­sites de­ployed, in­clud­ing a hand­ful of land­ing pages and our main mar­ket­ing web­site.

Be­fore I took over de­vel­op­ment, we used a boil­er­plate Word­Press tem­plate for our site. It was clunky and bor­ing.

Tech Stack

When I took over front-​end de­vel­op­ment, I moved our sites over to a frame­work called Astro. Astro is a JAM­stack frame­work (for lack of bet­ter term) that pri­or­i­tizes de­vel­oper ex­pe­ri­ence and per­for­mance. I started using this tool early in its beta days and have en­joyed watch­ing it blos­som into what it is today.

For styling, I use Tail­wind CSS be­cause it al­lows me to it­er­ate de­signs ex­tremely fast. I can use the same Tail­wind con­fig file from our de­sign sys­tem and keep it in sync across all of our web projects.

All of our sites are de­ployed on Netlify. I use Netlify’s branch fea­ture to A/B test and pre­view changes be­fore push­ing to pro­duc­tion. Lately, I’ve added Cloud­flare Im­ages to our stack. It’s an ex­tremely af­ford­able image CDN that keeps our GitHub repos­i­to­ries free of heavy image files. It’s not quite as feature-​rich as Cloud­i­nary, but it’s been well worth its monthly price.

Email Tem­plates

All of our email tem­plates are cre­ated in Maiz­zle. Be­fore this, I had given MJML a shot but quickly mi­grated to Maiz­zle once I dis­cov­ered it.

For starters, Maiz­zle uses Tail­wind CSS under the hood — al­low­ing me to draw upon the same Tail­wind con­fig file for web projects. Sec­ondly, I found in my test­ing that MJML didn’t spit out HTML that ren­dered prop­erly in Out­look on Win­dows. The Win­dows Out­look client is no­to­ri­ous for being the worst when it comes to sup­ported HTML/CSS fea­tures. In my ex­pe­ri­ence, I found that Maiz­zle’s out­put was much bet­ter.

Brand & Vi­sual De­sign

In 2021, our com­pany un­der­went the largest re­brand since its found­ing in 2006. This re­brand sig­ni­fied an im­por­tant mile­stone for our com­pany. 2021 was the year we cel­e­brated the com­pany’s 15 year an­niver­sary and it also vi­su­ally rep­re­sented a re­fo­cus­ing of ef­forts to a nar­rower au­di­ence and port­fo­lio of ser­vices.

I helped shape our new brand. I worked with an in­de­pen­dent de­signer on the logo, going back and forth on ideas and sketches until we landed on a final de­sign. I chose our com­pany’s color palette, type­face, and cre­ated brand and con­tent guide­lines.

Today, these brand as­sets are main­tained and doc­u­mented in our de­sign sys­tem, Met­tle. I also keep an Adobe Cre­ative Cloud li­brary pub­lished with our col­ors and brand/lo­go­marks. This al­lows oth­ers on our team to ac­cess our palette and vi­su­als when mak­ing as­sets in Adobe Ex­press; and, it helps me stay in sync when I’m work­ing in other Adobe tools like Pho­to­shop, Pre­miere, and In­De­sign.

I also de­signed the ma­jor­ity of our com­pany’s col­lat­eral, in­clud­ing sales and mar­ket­ing ma­te­ri­als, cus­tomer guides, and our com­pany busi­ness cards. When­ever pos­si­ble, I brand our customer-​facing tools to main­tain vi­sual con­sis­tency and fa­mil­iar­ity for our cus­tomers.

Mar­ket­ing

A few years ago, our Busi­ness De­vel­op­ment team mi­grated to Hub­Spot. This plat­form has been a huge boon for us. It’s helped us gather mul­ti­ple cus­tomer and prospect chan­nels into one place. It helps us man­age our web­site’s live chat, so­cial media chan­nels, email cam­paigns, and web­site an­a­lyt­ics. I help the Busi­ness De­vel­op­ment Di­rec­tor craft and/or edit email and so­cial media cam­paigns in Hub­Spot.

I’ve been im­mensely in­volved in mon­i­tor­ing our an­a­lyt­ics and web­site traf­fic. I am al­ways tin­ker­ing with the mar­ket­ing copy, po­si­tion of el­e­ments on web pages, and tech­ni­cal search en­gine op­ti­miza­tion (SEO) to in­crease con­ver­sions.

Much of the copy on our land­ing pages was writ­ten by me, so I was sur­prised to learn that these pages av­er­age a near 10% con­ver­sion rate. For com­par­i­son, the in­dus­try av­er­age is any­where from 2–6%. That per­cent­age is prob­a­bly even lower for the tech in­dus­try. Typ­i­cally, the sales cy­cles are long and drawn out in tech, with many touches re­quired to close deals.

Tech­ni­cal Writ­ing

I’ve writ­ten many in­ter­nal and customer-​facing tech­ni­cal doc­u­ments. I’ve also con­tributed thou­sands — yes, thou­sands — of edits to the com­pany knowl­edge base. Below are a hand­ful of the types of doc­u­ments I would pro­duce:

  • Dozens of Stan­dard Op­er­at­ing Pro­ce­dures (SOPs), in­ter­nal processes, and stan­dards. Lately, I’ve been doc­u­ment­ing processes in Loom.
  • Dozens of State­ments of Work, which I at­tached to sales quotes for IT projects.
  • A handy on­board­ing guide for ra­di­ol­o­gists that would be re­ceiv­ing read-​from-home equip­ment. This guide in­cludes an equip­ment list (mon­i­tors, pe­riph­er­als, etc.), an on­board­ing process, our sup­port in­for­ma­tion, and a few handy desk set up di­a­grams in case they needed to set their work­sta­tions back up.

Project Man­age­ment

In my IT Co­or­di­na­tor days, I often per­formed project man­ager du­ties. Over this 4 year pe­riod, I per­son­ally man­aged more than 80 IT projects. Many of these projects re­quired State­ments of Work (SOWs), and I wrote a good chunk of these.

Quot­ing & Sales

As the IT Co­or­di­na­tor, I was re­spon­si­ble for quot­ing one-​off hard­ware/soft­ware pur­chases and IT projects. In a 2 year pe­riod, I han­dled over $500,000 in gross sales. Ad­di­tion­ally, I worked with our Busi­ness De­vel­op­ment Di­rec­tor to widen our profit mar­gins by 20+% through up­selling and fos­ter­ing mu­tu­ally ben­e­fi­cial ven­dor re­la­tion­ships.

Work­flow & Process Im­prove­ment

If there is a process, work­flow, or tool we use that I can im­prove, I do. From com­plex user on­board­ing processes to the cra­zi­est Power Au­to­mate flows in Share­Point, I’ve done it all.

Below are just a hand­ful of the processes, work­flows, and tools I’ve im­pacted:

  • The or­ga­ni­za­tion of our com­pany’s knowl­edge base, in a tool called IT Glue.
  • A multi-​factor au­then­ti­ca­tion (MFA) form that used IT Glue’s REST API to au­to­mat­i­cally send data to our KB in a con­sis­tent for­mat.
  • A Time Off Re­quest form and ap­proval work­flow, built using a Share­Point Form, a Share­Point List, and a com­pli­cated Power Au­to­mate flow.
  • A litany of im­prove­ments and au­toma­tions in our help desk tool, Con­nect­Wise Man­age.

Video Pro­duc­tion & Edit­ing

Our com­pany posts videos reg­u­larly on LinkedIn and our YouTube chan­nel. These are used as con­tent pieces for ex­ist­ing cus­tomers and to show­case our tools and of­fer­ings to prospects. I edited nearly every video posted to these plat­forms in Adobe Pre­miere. Gen­er­ally, our videos fall into three cat­e­gories: short tech top­ics, we­bi­nars, and how-​tos. I’ve recorded a few videos on the chan­nel as well, in­clud­ing:

En­dorse­ments from cowork­ers

John is your go to for any­thing, lit­er­ally any­thing. This guy is a huge team player. I have met very few peo­ple with his level of at­ten­tion to de­tail and abil­ity to get it done with­out su­per­vi­sion or pre­vi­ous train­ing. You know a per­son is great when their worst at­tribute is try­ing to fix every­thing that could be im­proved. This is John. He is self-​motivated, re­source­ful, a cof­fee en­thu­si­ast, deeply strate­gic, a good friend, and a great ad­di­tion to any cul­ture. It would be a mis­take to pass up the op­por­tu­nity to work with a gen­tle­man of his tal­ent, cre­ativ­ity, and drive.

Chad Hol­stein, Di­rec­tor of Se­cu­rity & Com­pli­ance at ProSource

John is ex­cep­tion­ally skilled in his craft, and has an un­par­al­leled eye for de­tail. He is forward-​looking, al­ways look­ing for im­prove­ments and in­no­va­tions. I was al­ways thor­oughly im­pressed with the work John has done. John is a great team­mate to have, and I hope to work with him again some day.

David Crane, for­mer col­league at ProSource


This is a liv­ing doc­u­ment at the mo­ment and I will up­date it when­ever I get the op­por­tu­nity. I’m using it to keep track of all the work I’ve done so far.

Interested in working together?

Reach out to learn more about me and/or my work.