website design
branding
webflow development

The Goal

The goal of this project was to build a website to reflect the company’s on-going success as they have recently begun their sales activity and have landed several important partners and pilots.

They needed an upgrade from their Wix website that goes into greater detail about their product, guides users to try it out, and allows people to sign up for their newsletter and get in touch easily.

About the Project

Wisepath’s product, SkillQuest, uses mainstream video games to measure soft skills. With the data, they generate charts and graphs and produce a Professional Personality Profile to help teams work better together and help students find their ideal work.

Soft skills have, in the past, only been measureable with written questionnaires, so this product is revolutionary.

I wanted to give Wisepath a very distinct identity that leaves an impression.

Design Concepts

Initially, I tried to go down a more traditional SaaS design direction. Because they have only two types of screenshots, I quickly realized that this wouldn't work and I would have to take a unique direction.

Below is the direction I tried initally.

Screenshot of a attempt at a hero section for the Wisepath website.

Meet the new brand

I used ChatGPT to generate more than 50 3D illustrations. This visual direction allowed me to more easily communicate the concept of their product (which isn’t straightforward).

Composite image showing the colors, font, buttons style, and illustration style of the Wisepath brand.

Modern animation

I used GSAP to create movement around the site. Headings reveal word by word, body copy reveals line and line, and statistics roll up as they enter the viewport.

Cool Buttons

The 'liquid' buttons encourage engagement.

Unique Team Section

On the About Us page, I hid the real images of the people behind 3D renderings of them. On hover, the real image is revealed and a sentence drops down that gives us some info about what the person does when they’re not working.

Professional Personality Profiles

Their product classifies a person into one of twelve profiles. The 3D images I created for each profile will be used by the client and given to the user when reports are generated from the gaming data.

A card showing a radar graph of soft skills and the Personality Profile associated with that kind of graph.

Interactive Sections

Several sections around the site are interactive to encourage engagement.

Mobile Screens

Desktop Screens

A screenshot of one of the sections of the Wisepath website.
A screenshot of one of the sections of the Wisepath website.
A screenshot of one of the sections of the Wisepath website.