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 Website Redesign

Full website redesign encompassing 60+ pages of content using a lean UX approach — all done in about 4 months.

A high-fidelity mockup of the ProSource website redesign.
My role
  • Front-End Developer
  • Product Designer
  • UX Researcher
Tools
  • AstroJS
  • FigJam
  • Figma
Timeline

June–Sept 2021

Published

ProSource is an Orlando-​based tech­nol­ogy ser­vices provider fo­cused on prov­ing IT so­lu­tions to high-​complexity in­dus­tries like health­care, en­gi­neer­ing, fi­nance, and man­u­fac­tur­ing. Their mis­sion is to em­power teams with thought­ful IT so­lu­tions that put peo­ple first.

In 2021, ProSource un­der­went the biggest re­brand since its found­ing in 2006. I was the de­signer and de­vel­oper re­spon­si­ble for align­ing the web­site to the new com­pany brand and build­ing out new con­tent pages to broaden the com­pany’s con­tent strat­egy. I worked closely with the ProSource lead­er­ship team to de­liver a web­site that would at­tract more prospects, per­form bet­ter in search rank­ings, and match the new brand’s aes­thetic.

Project sum­mary

The ex­ist­ing web­site used a Word­Press theme that lacked per­son­al­ity and looked boil­er­plate. More­over, com­peti­tors using the same theme as us ended up look­ing too sim­i­lar. The ex­ist­ing web­site didn’t pri­or­i­tize im­por­tant in­for­ma­tion that prospects — and cus­tomers — would want right away. The web­site didn’t present a clear CTA on each page, so there was no co­he­sive cus­tomer jour­ney. The re­design ad­dressed these is­sues by serv­ing im­por­tant in­for­ma­tion to users quickly, cre­at­ing a co­he­sive jour­ney at key touch-​points, and by es­tab­lish­ing a new vi­sual aes­thetic that was unique for our size and space.

Prob­lems

The ex­ist­ing web­site suf­fered from Cor­po­rate Mem­phis. The lack of per­son­al­ity cre­ated brand dis­trust and didn’t res­onate with users. The sec­ond most traf­ficked page on our web­site was the About Us page. Our prospects want IT part­ners they can trust and de­pend on, but our About Us page con­tained few de­tails about who we were and very lit­tle im­ages of our team. Not hav­ing a unique vi­sual style meant we could not stand out from com­peti­tors ei­ther.

Our web­site buried im­por­tant de­tails that prospects and cus­tomers would want right away, like our con­tact de­tails, hours of op­er­a­tion, ways of cre­at­ing tick­ets, and our ad­dress.

Stylized mockup of ProSource's video library pages.

Busi­ness prob­lem

Be­cause there was no brand trust and the web­site did not serve im­por­tant in­for­ma­tion to users, we had:

  • A high bounce rate. Our monthly av­er­age bounce rate was around 85% with a time on page of less than 2 min­utes. Users would visit the home­page, then the About Us page, then leave.
  • Low con­ver­sion rates. Our dis­jointed user jour­ney con­fused prospects and led to very few con­ver­sions on the web­site.

User goals

Cus­tomers

We want users to find the re­sources they need with min­i­mal fric­tion. Con­tact de­tails should be read­ily avail­able, many cus­tomers for­get our sup­port email or phone num­ber and need to quickly grab it from the web­site to sub­mit an IT ticket.

Prospects

Prospects also like look­ing through our case stud­ies, team in­for­ma­tion, and we­bi­nars to learn more about our of­fer­ings and the tech­nol­ogy land­scape in gen­eral.

Busi­ness Goals

Be­yond align­ing the re­design with the new brand, we wanted to in­crease user re­ten­tion, con­ver­sion rates, and sur­face im­por­tant in­for­ma­tion. We looked at our an­a­lyt­ics to mea­sure the im­pact of the re­design, pri­mar­ily bounce rate and time on page. We also wanted to com­pare the quan­tity of con­ver­sions be­fore and after the web­site re­launch.

A lean UX ap­proach

Be­cause of our lim­ited re­sources, most of the de­sign process was based on hy­pothe­ses to in­crease user re­ten­tion and el­e­vate vi­sual de­sign. I em­ployed a lean UX ap­proach by work­ing de­sign­ing and de­vel­op­ing MVPs and it­er­a­tively chang­ing con­tent with A/B test­ing.

A co­he­sive cus­tomer jour­ney

  • CTAs: Clear and con­sis­tent CTAs push prospects to book con­sul­ta­tions with our di­rec­tor of busi­ness de­vel­op­ment.
  • Con­tent: Blog posts, we­bi­nars, case stud­ies, and gated PDFs were or­ga­nized with new lay­outs and also in­dexed on a sin­gu­lar Re­sources page.
  • Con­tact info: Ex­ist­ing cus­tomers get the info they need to sub­mit IT tick­ets quickly. Prospects are able to book con­sul­ta­tions asyn­chro­nously using Hub­Spot’s meet­ing wid­get.
Stylized mockup of ProSource's video library pages.

A dis­tinct vi­sual iden­tity

  • Good­bye, Cor­po­rate Mem­phis: Gone are the life­less il­lus­tra­tions and overused stock pho­tog­ra­phy. We in­cor­po­rated more pho­tos of our team and of­fice. If we had to use stock pho­tog­ra­phy, we se­lected as­sets that looked more warm and wel­com­ing and would res­onate more with our buy­ers.
  • Be­spoke: The Word­Press site was ditched in favor of a Jam­stack frame­work called Astro. Astro al­lows me to it­er­ate the web­site quickly and de­ploy new de­signs in sec­onds through repos­i­tory com­mits on GitHub. Netlify’s branch test­ing fea­ture al­lows me to eas­ily A/B test new fea­tures, con­tent, and pat­terns.
  • Sim­plic­ity: The de­sign had to be sim­ple above all else. The over­whelm­ing ma­jor­ity of cus­tomers and prospects aren’t versed in the tech­ni­cal nitty-​gritty of our tech­nol­ogy stack. I pri­or­i­tized trust­wor­thi­ness, clar­ity, and vi­sual ap­peal by re­mov­ing ex­cess de­tails and in­ject­ing lit­tle bits of per­son­al­ity through­out. I en­gaged our ex­ist­ing cus­tomers early on in the process by so­lic­it­ing feed­back through a sur­vey and we also con­ducted a hand­ful of guer­rilla in­ter­views with our more long­stand­ing cus­tomers. The sur­vey and in­ter­views cen­tered around the qual­i­ta­tive as­pects of the de­sign, but they did draw out areas to re­duce IT jar­gon in our mar­ket­ing copy to make it more ap­peal­ing to less tech-​savvy prospects.

Re­sults

With the re­design, cus­tomers can quickly find the in­for­ma­tion they need. Prospects are given a com­plete and clear cus­tomer jour­ney, with touch-​points on con­tent pages like our we­bi­nars, blog posts, and case stud­ies. The new vi­sual de­sign pri­or­i­tizes clar­ity, trust­wor­thi­ness, and pro­fes­sion­al­ism and dis­cards the clin­i­cal Word­Press boil­er­plate theme look.

Stylized mockup of ProSource's video library pages.
Stylized mockup of ProSource's video library pages.

By the num­bers

Since the re­design, de­vel­op­ment, and launch of 60+ pages of web­site con­tent, we’ve no­ticed a marked im­prove­ment in our an­a­lyt­ics: The bounce rate de­creased sharply, from about 85% to a new monthly av­er­age of 72%. The time on page in­creased slightly as well, from less than 2 min­utes to about 3 min­utes. We’ve not gained sig­nif­i­cantly more con­ver­sions on our main mar­ket­ing web­site. This may be in part due to some SEO catch­ing up that needs fur­ther work, as we sim­ply don’t com­mand a large vol­ume of vis­i­tors monthly.

Anec­do­tal, qual­i­ta­tive data

The feed­back we’ve re­ceived from cus­tomers, prospects, and part­ners has been over­whelm­ingly pos­i­tive. Many cus­tomers have com­mented that our new brand and web­site make us look like an en­ter­prise com­pany. Some prospects were shocked to learn that we’re only a team of a dozen. We’ve also had other part­ners come up to us at con­fer­ences and tell us that they re­ally like the way our web­site looks and feels.

Interested in working together?

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