Affecture

Product Design

Introduction

Overview

I was hired by Affecture as a product designer to redesign aspects of their branding and website to improve client acquisition. My primary focus was redesigning their website.

Affecture works with video game studios to test features using biometric data. They use EEG headsets and heart rate monitors while having playtesters run through relevant sections of a game to track insights about playthrough.

My Role

While working as a solo designer, under direction from the founders, I:

Brainstormed improvements to increase engagement.
Created prototypes in Figma to test website redesigns.
Developed and implemented design updates.

Timeline

May - July 2024

Problem

Affecture's website was not effectively attracting users to playtest nor was it helping increase client aquisition.

Final Design Preview

Here is a side-by-side of Affecture's old website next to my redesign. Let me walk you through how I got there.

research

Old Website

Their original website was a very conventional static site that was crammed with information. The original website was made by one of the founders' brother and they understood that it was rudimentary and needed a refresh to make it look and feel more professional.

Two dimensional survey to see how aligned employees are with their companies. Results are then plotted onto a 2x2 matrix with 4 different sections

User Feedback

By getting feedback from the other interns, I discovered that their original website felt very overwhelming to many and, even though it was full of text describing what they were doing, they still found it hard to understand what all of it was trying to say.

Goals

Because I had a lot of freedom throughout the process, I made sure from the start to really understand the need of the founders. From that I gathered two main goals the website needed to accomplish

Client Acquisition

Affecture's main objective while I was working with them was finding new companies to work with.

The website needs to show to gaming companies how they can be instrumental in testing new games and demonstrate how they can provide insights that others companies and traditional playtesting methods can't.

This was the center of many complaints, so it became a major focus.

Users found the original confusing and it required a large cognitive load to understand.

Playtester Acquisition

Affecture is always in the need for new people to test games so that they can grow their network of people to pull from depending on the needs of each test.

The website needs to entice people to want to sign up.

We wanted to utilize these to make it easy to understand and derive meaning from the results.

AI generated summaries was also a feature the founders really wanted to see included.

Hypothesis

By breaking up the information and making it more digestible it would allow people to go through it at their own pace. Adding graphics and visual cues would visually break up the monotony of the text and make the content easier to comprehend. Paring these with adding easy ways to engage further would hopefully boost client and playtester acquisition.

Development

Design Considerations

Affecture uses gradients heavily throughout their branding. I recognized that it was a look they really liked but wanted to refresh how they used them throughout their website. I sparingly used their three color gradient as the background text color for key titles and terms throughout the webpage but the main update was implementing a moving gradient as the background. It gave the website a more modern feel and the relatively slow movement and more subdued colors don't distract too much from the content of the page.

Wireframing

Focusing on Engagement

Their old website had a simple contact page with their email to contact them.

In the redesign, I created a simple contact form modal to push visitors to send inquiries and increase client acquisition and create more engagement with the website.

To boost playtester acquisition, one of the things I added to the new website was a simple pop-up to collect visitor's emails to add them to an emailing list.

Streamlining the About Page

I decided to keep their about page simple, bring forward the values that the company operates on and then highlighting the founders followed by a call to action section prompting people to submit an inquiry.

I didn't want to overuse the moving gradient since it is an effect that really stands out so I decided to use plain backgrounds for this page since it is a secondary page.

final website

Video Scroll-through

Screenshots

For the main homepage, I simplified the hero message to make it stand out while getting visitors intrigued and encouraging them to want to find out more. A photo of someone wearing the EEG headset peaks out from the bottom of the page, motivating people to scroll down and follow the path coming from the sensor.

I then followed that by presenting what Affecture can do for companies and accompanied it with a call to action section prompting visitors, and potential clients, to contact the company with inquires.

The next section is to dive deeper into the tools that Affecture uses, giving them more credibility while at the same time trying to attract playtesters who may be interested in trying the technology or testing out new games. This section ends with an extremely simple way for visitors to input their email to sign up to potentially playtest in the future.