The Old Website

What they had when I started looked a little too old aesthetically, was a little too busy, and the main orange CTA (to take the franchise quiz) wasn't as prominent as it should be. Additionally, it was only at the top of the page, so after the user scrolled down (which is a very common and immediate behavior), they no longer presented with a means of taking the quiz.

‍

The New Website

Here is how the new franchise profile page looks as compared to above.

‍

For the homepage, the goal was to de-clutter the page, modernize the style of the site, and focus the user's attention on the main CTA button. Additionally, we added "second-chance" CTAs further down the page. Getting users to start the quiz was of prominent importance.

Sidenote: I found a nice set of 24 diverse cartoon characters. After editing them a bit, I suggested we show a random selection of 7 of them on every reload of the homepage.

‍

Scale of the Redesign

The FranchiseHelp redesign was one of the largest scale UX/UI projects I have done. There were 32 main sections to design, and within a few of those sections, there were subpages as well, such as the Franchise Quiz questions, of which there were well over a dozen.

Client Dashboard

In addition to the front end of the website, they also needed to redesign their client dashboard (the Franchisor Admin), which is where the franchises themselves could keep track of the leads they receive from FranchiseHelp, and manage their account plan.

Many of their clients buying franchisee leads were actually independent lead brokers — not just franchises themselves. And many of the brokers work on the go, ie., on the phones. So creating a mobile-friendly dashboard was paramount.

‍

The Franchise Quiz

Here is a handful of final layouts from the franchise quiz and the franchise results page showing options matched specifically to the user — according to their quiz answers.

‍

How I Dealt with Style Guides:

Because I designed this website in Photoshop (I wasn't an early adopter of Sketch, but now I'm a devoted user of it!), I had to come up with a unique solution for style guides to help the in-house developers at FranchiseHelp.

Ultimately, I figured the easiest solution for them was to provide the web version, the mobile version, and the accompanying style rules all on ONE layout page. Doing it this way allowed the developers to just have one image up on their screen for reference — rather than having to jump back and forth between three references.

Here's an example of that.

‍

In addition to the style guides that were specific to individual layouts, there was a lot of styles that were consistent across the whole site. This is the general website style guide I provided the developers for that. I wish I had discovered Sketch and Zeplin at the time! There is a mobile version of this guide as well, but probably not necessary to show here.

‍