Affecture
Product Design
Overview
Affecture is a data-analysis focused company that works with game studios to test new games in development. They use data from EEG headsets and heart rate monitors while having playtesters run through relevant sections of a game, combined with traditional interviews and A/B testing, to unlock deeper insights about the games for the studios.
I was hired by Affecture as a product designer where I worked for three months to fine-tune and redesign aspects of their branding as a solo designer to improve client acquisition. My primary focus was redesigning their website.
Old Website
Redesign 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.
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.
Design Considerations
Goals
Client Acquisition
Playtester Acquisition
Because I had a lot of freedom throughout the process, I made sure from the start to really understand their needs. From that I gathered two main goals the website needed to accomplish. The first goal was client acquisition. They needed to show to gaming companies how they could be instrumental in testing new games and demonstrate how they can provide insights that others companies and traditional playtesting methods can't.
The second goal was 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.
Page Content
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.
My goal was to breakup the information more throughout the page to make it more digestible and allow people to go through it at their own pace, while adding graphics and visual cues to visually break up the monotony of the text and make the content easier to comprehend.
Design Language
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.
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.
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.
Wireframe Prototype
Final Website
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.