Fascinate, Inc. Website

Rebranding a personality test with a little edge and a lot of authority.

Challenge

Redesign a beloved brand’s frumpy old website to build affinity, convert stubborn cold traffic, and better align with the company’s messaging.

TEAM

Gary Wong, Ben Russel [Development], Charlie Calderin [Graphic Design], Me [UX & UI]

Timeline

June-October 2023

Overview

Fascinate, Inc. has built a name for itself in the world of personality tests as a bold, eccentric brand that isn’t afraid to push boundaries, touting the daring slogan “DIFFERENT IS BETTER THAN BETTER.” Their website, on the other hand, could not have been further from that.

If the medium is the message, this message is pretty boring.

my role

I led the interface and user experience design, which, if you’ve ever been the solo designer on a massive project, that’s not as much of a flex as it might seem.

Fascinate, Inc. is a small company, with a scrappy, tight-knit team. We all had to wear many hats, and each team member was instrumental to the process.

Goals

No project is ever perfectly linear, but the many goals we set can be narrowed down into three primary objectives:

Discovery

Unfortunately, there was no room in the budget for proper user research, so I had to get scrappy. I relied on a number of important stakeholders within the company to gather information on common pain points users experience.

CUSTOMER SUPPORT LEAD

I conducted a long interview with the company’s customer support lead. She’d been with the company for over a decade, and was personally responsible for handling all customer inquiries.

Fascinate Certified Advisors

I also sat in on a virtual meeting with Fascinate Certified Advisors (FCAs). The company trains FCAs to work individually with customers to help them interpret and implement their results.

The CEO

The CEO and visionary of Fascinate, Inc., Sally Hogshead, is the heart and soul of the company. While I was working there, she was highly involved in the process, and had the ultimate say in most decisions.

To state the obvious: there was no direct input from users in the process, and that was a huge limitation of this project.

With our problems and solutions well-defined, the first step was to create a sitemap.

The sitemap. It's deceptively simple. Looking at it now, it's hard to imagine it would completely take over my life for the next few months.

goal 01

Create excitement, with purpose

problem

solution

problem

The website's design is outdated, overcomplicated, and misaligned with the brand's core messaging.

Solution

Redesign the website to be exciting, but also intuitive: like a carnival ride.

The CEO Says:

Customer Support Says:

Fascinate Certified Advisors Say:

"satisfied customers hesitate to share with friends."

Customers rave about the impact of the products, but they report negative reactions from friends when they try to share it with them. The outdated design raises alarms for people who have never heard of the brand before; they worry it's a scam.

"People need a lot of convincing."

It's the FCAs' job to evangelize the products. The lackluster experience of the website only makes their job harder, and they also suspect it could be dissuading new FCAs from signing up for the program.

"I feel a little embarrassed by our website."

Sally is a visionary. Her research, speeches, books, and products speak to that. The website, on the other hand, does not. She feels it’s become something of a blemish on her otherwise bold and successful brand, and she wants the experience of the website to align with the overall vision.

Reimagining the brand Identity

We didn't need to reinvent the wheel. There were so many existing assets to work with, creating the brand identity guidelines was more an act of curation than creation.

Brand Mood Board, created by Charlie Calderin.

The Fascinate Vision

At the end of the day, Fascinate is about using proprietary research to help people better understand themselves. It's about embracing differences as valuable assets rather than inconvenient flaws.

Fascinate doesn't shy away from strategic polarization. They're a little weird, and they're not afraid to show it. The company cares more about attracting audiences who resonate with the messaging than convincing audiences who don't.

Lastly, Fascinate is fun. Taking the Fascinate Test is a joyful practice of self-celebration. The brand identity should reflect that.

Preview of the Brand Identity Guidelines I created for Fascinate, Inc.

An Evolving Design System

This was one of those projects where, if you asked me to show you the full design system document, our conversation would be interrupted by an elevated heart rate notification on my Apple watch, giving me the perfect opportunity to say, "Wow, look at the time! I gotta go."

It started out looking beautiful, as you can see below. But, as the time crunch closed in on us there are certain sections that became, to put it delicately, a dumpster fire. I created a lot of assets on the fly as the need for them arose, but I do think I did a pretty good job keeping the aesthetic consistent, despite the chaos. Creating typography, color, and grid guidelines from the get-go saved my butt.

Preview of the most presentable sections of the design system.

I was lucky enough to have the illustrious and mystifying graphic designer Charlie Calderin in my corner to create some of the more complex graphic elements, like this beautiful hero graphic on the home page, which came to be known affectionately as “The Wheel.”

"The Wheel" - Created by Charlie Calderin, animated by yours truly.

A selection of home page sections that demonstrate how the new design system was implemented to create a visual aesthetic that aligns with the brand identity and vision.

goal 02

Simplify Product Offerings

problem

solution

problem

A wide variety of products designed for very distinct personas leads to confusion and overwhelm.

Solution

Restructure the navigation so customers self-select into the right category of products.

The CEO Says:

Customer Support Says:

Fascinate Certified Advisors Say:

"The Product Flow Confuses people."

People encounter a lot of difficulty when navigating the product options, such as buying the wrong number of team tests, buying team tests but having them redeemed blah, not knowing where to purchase, how to view their results, etc. etc.

"Clients need our help choosing."

Not featured prominently enough on the website. There’s not enough info or explanation driving customers to them.

"We're struggling to convert cold traffic."

The number one source of search engine traffic comes from people Googling the name of the company. The website converts well with people who are already familiar with the brand. Cold traffic, on the other hand, performs quite poorly.

why the existing Design Was Failing Users

All the products were listed together on a "Products" page. The images were not cohesive, nor did they provide a lot of visual information about what the product was. Some of them were just generic stock images.

Screenshot of the existing products page.

On top of that, not every product had it's own product listing page. A lot of the information was buried in giant accordions with walls of text and no images.

Drop-down menus for their top two products.

Overall, it was overwhelming users, and they were struggling to find what they're looking for. Not to mention, for users who were on the fence about purchasing, this layout is not particularly convincing.

meet the personas

Before we can jump into the problem-solving, it's important to introduce you to Fascinate's two primary customer personas.

Individual buyers make up ~80% of all purchases, but tend to have a pretty limited budget. Team buyers account for only ~20% of purchases, but tend to spend a lot more.

How might we clearly delineate between team and individual products, while highlighting individual products as the most frequent use case, without alienating the less frequent but more profitable team buyers?

This was the most perplexing puzzle of the entire project. Creating product listings for personality tests posed a lot of unique challenges that are difficult to solve with familar ecommerce design patterns.

Consider a standard product listing for something simple, like a t-shirt.

The user gets most of the information they need from the product image, name, and price. Sure, they'll need to dig a little deeper if they need information about sizing, material, etc. But, in general, it's easy to scan and find what they're looking for right away.

A personality test, on the other hand, is much more complex. It lies somewhere in limbo between a virtual product and a service.

Even with the best visual design, people need to identify and comprehend a considerable chunk of information to understand what they're buying.

Not only do we need to make an already complex product as scannable and digestible as humanly possible, we also need to create clear distinctions between multiple, very similar variants of each product for two separate personas with highly different needs.

And don't even get me started on the pricing model.

solution 01

Filtered Product Page

I ascribe to the philosophy that the simplest solution is often the best. So, my first recommendation was an all-products page with a grid of product cards and a familiar filter function.

A wireframe of my initial recommendation, with the option to categorize by persona (individual, team, gift) or product type (reports, add-ons, bundles).

A lot changed between when I made this initial wireframe and when I started building out mockups of the page. I created a mid-fi prototype to demonstrate to the team and... they didn't like it.

Mid-fi prototype I presented to the team.

They were right, too. This version is too busy and relies on the user having enough prior knowledge to identify the category of product they're looking for. Plus, it doesn't provide very much space for all the content the product cards would actually need. Back to the drawing board, for the first time.

solution 02

Guided Selling Quiz

One member of the team proposed an idea I hadn't thought of: guided selling.

A guided selling system, essentially, is a purchase flow where users answer questions that lead to personalized product recommendations. It's often used to refer to high-touch sales processes where a representative works 1:1 with the customer, but in our case, it's easier to think of it as a product recommendation quiz.

I got very excited about this solution.

I began compiling research and references to help create an effective guided selling flow.

The research was convincing, especially for complex, highly personal products like ours, but there was one statistic that stood out to me in particular.

Comparing interactive to passive content, interactive content is somewhat or very effective at educating the buyer (93%versus 70%), differentiating from competitors (88% versus 55%) and being shared (38% versus 17%).

Content & Buyer's Journey Benchmark Report, Demand Metric

Educating the users on the product was a tremendous and daunting goal of ours. A quiz format would allow us to inform the user every step of the way.

There's also the huge benefit of collecting emails before the recommendation screen, which would lend well to list-building and highly personalized abandoned cart campaigns.

And, like, dude, our audience loves taking tests.

I mocked up a quick mid-fi prototype to demonstrate a few of the most crucial benefits of a quiz format and why it's a perfect fit for Fascinate's products.

1. We can empower users to make more informed decisions.

As the customer support lead reinforced, there's a lot of confusion in the purchase process, especially for new customers. This format allows us to populate explanations for the user's decisions before they proceed.

Selecting "I'm buying for myself." gives them the low-down on how that will affect their purchase.

2. We can gather more data from our audience and create killer abandoned cart campaigns.

Accenture found that 84% of users are willing to share their data to create a more personalized experience. Quizzes are a highly effective way to collect both email addresses and information that would help us tailor our marketing to their needs.

This question doesn't effect the user's results, but it reinforces the benefits of the product and gets the user invested.

3. We can curate streamlined opportunities for further explanation.

Fascinate uses a lot of brand-specific terminology, which is great for building affinity within the community, but not so great for newcomers who don't speak the language.

Informational modals like this accordion could help us educate users without interrupting the purchase process.

4. we can present team buyers with accurate pricing.

Fascinate's team products are the most challenging to design for, because pricing depends on how many tests the user buys. Knowing that quantity up front allows us to present them with accurate pricing for their team.

In my opinion, this screen was one of my weaker designs. If I did it again I'd make the discount more obvious and also include a pricing table for the user to view.

Entering the quantity populates a blurb informing the user that they qualify for a discount, and how many more they'd need to hit the next bulk discount threshold.

Most importantly, a quiz format allows for more customized bundling and upsells.

Here's the other thing about team pricing that kept me up at night: the base products (tests) are priced according to the quantity, but the add-on products are an additional flat fee.

This makes it quite troublesome to present the pricing in an accurate, understandable way. But, with a quiz format, we could separate the base products and add-on products onto different screens, essentially allowing users to build their own team bundle.

Displaying it as two separate products also makes it easy to upsell them on the add-on in their cart.

Team buyers select their base product, then their add-on option, then move to their cart where we have one last chance to upsell them.

A product recommendation quiz shouldn't be the only option available to users, but it's a damn good one.

The team thought it was a good idea, but like many good ideas before it, it met a tragic fate at the hands of time and budget restrictions. I never got to see it come to fruition.

The team decided to push the quiz format to Phase II of the project for a number of reasons. Additionally, at this point, in the middle of the project, the product offerings were changed.

solution 03

All categories, no brakes

After the announcement that we would be revising our product offerings, and that the quiz solution was put on hold (murdered in cold blood), I sat down with the web dev lead and brainstormed a new, final solution.

The sitemap-slash-user-flow-Frankenstein's-monster we created during our brainstorming session.

Gift products were postponed, and a new service was introduced: custom analytics. This would be a high-touch experience where the company would create a personalized, live presentation based on your team's results. It would be custom priced, and users would need to contact the company for a quote.

The plan was simple. We would have three categories of products featured prominently on the homepage:

Fascinate for You

Fascinate for Teams

Custom Analytics

With the exception of Custom Analytics, each category would have it's own page with three product offerings, which would each have their own product listing pages.

Side note: we started calling the custom analytics package "Diamond-Studded Analytics" internally. I don't think this was ever intended to be final, but it never got a proper name while I was working there. You'll see it pop up in my designs a lot.

The three product categories as they appeared on the homepage. I recommended simplifying the product images, but I'm not sure if they plan to change them or not.

Creating the Product Pages

Products for you page

The first category is products for individual buyers. I'll refer to this page as "Products for You."

The products were organized as bundles in what we called a "Good, Better, Best" format. Each tier included more features and benefits than the last. So, it made sense to design the cards in a checklist format, showing what is and is not included in each tier.

However, there was a catch. The "Better" bundle wouldn't be ready in time for launch. I chose to create a "coming soon" card for this bundle. Instead of urging users to purchase, it urged users to sign up to be notified when the product became available.

Frankly, this decision still haunts me.

The three product offerings on the "Products for You" page. Haunting.

Where I went Wrong

Alright, I admit it. I committed the cardinal sin of UX design. I skipped wireframing on this page and went straight to design. You could take me to UX jail, but isn't my torment punishment enough?

The Extended Report was still in the works, and the team wasn't able to provide checklist copy for it. Keeping it in the middle of the page is pretty jarring, and it makes the checklist comparison format a lot harder to follow.

Additionally, someone smart later pointed out that giving the users the option to be notified when it's available disincentivizes them to make a purchase. It would be better to allow them to pre-order the product or omit it altogether.

Where I went Right

Users who take the test as part of a team, including attendees at Sally's live events, redeem a code. The code redemption page is accessible from the homepage and nav bar, but I also included it on this page to catch any users who navigate to products instead.

The checklist copy is a little longer than ideal, but users read comparison tables in a lawnmower pattern SOURCE, so I believe it would still work well (barring the temporary disruption of the middle product being unavailable).

The "FOR YOU" pills in the top-right corner of the product cards may seem a bit redundant on this page, but we really want to reduce the number of customers who buy the wrong kind of product. I also wanted to establish that pattern in case the company decides to move forward with an all-products page in the future.

Lastly, I created a simplified product comparison table we use at the bottom of every product-oriented page. Users who scroll down for more information won't have to scroll all the way back up to the top of the page to select a product. It's more scannable than the card format while the middle product is unavailable.

The simplified product comparison table featured at the bottom of every product-oriented page. There's a variation for team products, too.

Final design for the "Products for You" Page.

Products for teams page

The second category is products for teams. This one's a doozy.

If you read through my overly earnest guided selling section earlier, you'll recall the team pricing challenge (that keeps me up at night) is two-fold: the base products (tests) are priced according to the quantity, but the add-on products are an additional flat fee.

How might we present team product prices as accurately as possible without confusing the buyer or, worse, making them do math in their head?

Price ranges, calculators, and sliders, oh my!

The immediate thought that popped into my head was to just display the prices as a range on the product cards; the users would see the final price calculation in their cart anyway, right?

My best attempt at designing product cards displaying a price range.

There are a lot of problems with this design:

The per-person test price is only displayed on the first card.

Unless the user had previously scrolled down to see the bulk pricing table (or found it on a different page), they wouldn't have any clue how much to expect "price of tests" to be.

There's a link to the pricing calculator right there, but that still requires the user to navigate away from the product cards - an additional action standing between the user and their purchase.

Overall, this solution left a bad taste in my mouth. So, I tried something different: a pricing slider.

The prices on the cards would change as the user moved the slider, which was set to stick to bulk discount increments.

This solution is... okay, and it's the one we moved forward with. Without time or budget for testing, it's honestly hard for me to say whether or not this was a great solution, but I'm confident it's better than the first.

Were I to do it again, I think I would advocate for limiting purchases to set bulk quantities instead of allowing users to select exactly how many tests they want. But that would open a whole new can of worms. And I didn't do that.

Anyway, at least the pricing calculator is awesome.

The pricing calculator. The "GET STARTED" button goes directly to a checkout screen pre-populated with the user's selections.

Final design for the "Products for Teams" Page (FAQs removed for size).

Reducing redundancy in the product listing pages

The challenge that comes with a "Good, Better, Best" bundle format is that it requires some amount of repetition on the product listing pages.

Let's take a look at the features included in the three team product bundles, for example:

Good Bundle

Better Bundle

Best Bundle

The Test

The Test

The Test

Basic Data

Basic Data

Basic Data

Prem. Data

prem. Data

Coaching

A bundle can include up to four features. All three bundles come with team tests and basic data, two bundles come with premium data, and one bundle comes with coaching.

For a user who looks at just one of the product listings before deciding, we need to make sure they have access to all of the information they need.

For a user who looks at all three product listings before deciding, we need to make sure they don't have to slog through the same content over and over again.

Expandable page sections for each feature

Some redundancy is going to be inevitable, but we can bypass a large portion of it by making sure each bundle feature only gets one section per product listing page. Repetitive sections can have additional information hidden within an accordion. Users who are seeing it for the first time can expand to read more, if they want, but users who have seen it before can scroll past quickly.

For instance, the test feature is included in every bundle, so all three product listing pages need a section about it.

An example of the expandable page section with additional info hidden within an accordion.

This is one of those solutions I really wish I'd had the opportunity to test, especially the scroll behavior. My hypothesis was that users would be more likely to close the accordion when they intend to continue reading the previous section, and they would be more likely to leave it open and keep scrolling down when they intend to read the next section. But without testing, it was nothing more than an educated guess.

Intentional information architecture

I structured the pages in descending order so that the least redundant sections came first. For example, the section about Fascinate Certified Advisors is only on the third bundle's page, so that comes first. Then, the premium data section, which is only one two pages, comes next. And so on, and so forth.

Screenshot of the three team product listing pages showing how the least redundant sections come first.

Creating variety when possible

Not all of the redundant sections needed to be exactly the same on each page. Instead of creating a separate section for basic data and premium data, I opted to dedicate only one section to data on each product listing, with a slightly different variation for bundles that included premium data.

An example of the page section on team data for the bundles with only basic data (first image) vs. bundles with basic and premium data (second image).

goal 01

build affinity, trust, & Authority

problem

solution

problem

The products are niche and complex; provide more information to dispel users’ natural doubts.

Solution

Dispel confusion and doubt with engaging, digestible informative resources.

The CEO Says:

Customer Support Says:

Fascinate Certified Advisors Say:

"People don't understand the system."

The support inbox is frequently bombarded with questions about information that should be more readily available on the website.

"Resources are inaccessible."

Too much of the FCAs’ time with clients is spent explaining the system. They often create their own resources and graphics, which is both inconvenient and inconsistent.

"We rely too heavily on live events."

Sally is a prominent public speaker, traveling the world to evangelize the impact of her research. This is a primary source of revenue for the company. When she can’t do speaking engagements, sales go down.

creating a "how it works" page

While we integrated informational content all throughout the website, the “How It Works” page does a lot of the heavy lifting for anyone wanting to dive deep into the brand’s system.

If the medium is the message, this message is pretty boring.

The system that the Fascinate Test is based on is complex, but that's not unusual. Other personality tests, like the Meyers Briggs and the Enneagram, have complicated systems that require a certain level of trust before users are willing to buy.

Their existing website had no shortage of content, but the problem was that most, if not all, of that content relied on the users already having a certain level of familiarity with the system. There was no page dedicated to breaking it down step-by-step for a complete newbie.

I wanted to create a "How It Works" page that would be accessible for anyone to learn about the system, whether they've heard of it or not. Ooooofff rewrite this.

Initial lo-fi wireframes for the "How It Works" page.

Turning familiar graphics into interactive elements

The company had some existing resources floating around, mostly stylized after the graphics in Sally's book: How the World Sees You.

I wanted to recreate some of these on the website as interactive elements that would allow users to digest the information at surface-level and dive deeper in places that interested them.

Prolific Fascinate, Inc. Graphic explaining the 7 different "advantages" in the system.

The result: a uniquely-styled accordion with more information on each advantage hidden below the fold.

The infamous "Archetype Matrix" graphic, showing all possible combinations of primary and secondary Advantages. As you can see, it's a lot to take in.

I simplified the design to make it less overhwelming at first glance. Users can click/tap on each box to pull up a pop-up modal explaining more about the archetype. (The colors got a little scuffed when converted to gif format).

User-centered Design Thinking

The thinking behind the page was to start and end with the user.

The hero slider cycles between all 7 Advantages, with a person representing each one, alongside adjectives describing their personality. We discussed at length the pros and cons of using images of real people, but ultimately decided a brand about people should show people.

Beneath is a 3-step process highlighting the why behind taking the test, then a quick bullet list on what the Fascinate Test is.

The "Inside The Fascinate System" section starts broad with the 7 Advantages, narrows it down one step to the 42 different archetype combinations, and finally narrows it down to "YOU," the user, followed by a call to action to take the test.

Final design for the "How It Works" page (with a few FAQs removed for size).

Impact

I wish there was a big flashy finale to this story, but it dies with a whimper.

I handed off all of the designs in October 2023, and shortly after the company had to lay-off most of the team, including me, for financial reasons.

They still plan to move forward with my designs. At the time of writing this, it has not launched yet. I will try to update if that changes.

I don't have any big metrics to tout but I can at the very least testify to the qualitative impacts my design brought to the company.

Closing Thoughts

The thinking behind the page was to start and end with the user.

The hero slider cycles between all 7 Advantages, with a person representing each one, alongside adjectives describing their personality. We discussed at length the pros and cons of using images of real people, but ultimately decided a brand about people should show people.

Beneath is a 3-step process highlighting the why behind taking the test, then a quick bullet list on what the Fascinate Test is.

The "Inside The Fascinate System" section starts broad with the 7 Advantages, narrows it down one step to the 42 different archetype combinations, and finally narrows it down to "YOU," the user, followed by a call to action to take the test.