— PROJECT NAME
Controller Builder
— ROLE
Research
UX Design
— DATE
12/2018
Providing a Better
Customization Experience
Scuf Gaming is a company that provides customized video game controllers that are enhanced for esports, a 1.08 billion dollar industry, the controllers feature patented paddle technology, array of colorful button options, thumbsticks, triggers, and other functions to help gamers reach their full potential.
*Paddles are additional buttons on the back of the controller that allow the player to map to mimic buttons on the front of the controller. That way the player can more easily hit the buttons while always keeping their thumbs on the thumbsticks for sight and movement in game for most FPS games (first person shooters).
Problem
I was tasked with improving the mobile builder for a richer customization experience that would increase conversion and customer satisfaction. We’ve noticed that a large majority of our web traffic has shifted to mobile and our controller building experience is more suited for desktops with a less optimal experience on mobile.
In order to refine the problem more I looked for more hard data. Consulting with the IT department revealed a more concrete problem. According to our heat maps, customers were missing elements due to having poor navigation. Due to this, the business was losing revenue since those missed components could range from $3.95 to $14.95 per added part. Also users would constantly have to scroll back and forth to see changes made to their order. I hypothesized being able to be focused on the controller would eliminate that problem, provide a more delightful experience, and capture more revenue.
Competitive Analysis
After comparing and contrasting other controller customization experiences from Microsoft, Battle Beaver, and Cinch we found that a horizontal navigation pattern could improve our customer experience.
I compared our experience to other controller customization sites such as Microsoft, Cinch, and Battlebeaver. I noticed that organizing the vast amount of options is a challenge to several companies in this sector. Also noted that the Microsoft experience had a horizontal layout to take advantage of the limited space in mobile and better streamline the experience.
Cinch Experience Review
The Cinch builder suffered similar problems as our previous builder. It had over 24 categories for users to sort through which we've seen in the past would overwhelm users. They also had graphics that are informative, but better placed elsewhere in the experience to keep users attention honed in on the controller building experience. They did have a feature of showing the front and back of the controller to capture all of the customization options, however that does take up a large portion of mobile screen real estate.
Battle Beaver Experience Review
The Battle Beaver controller builder also had several categories for users to sort and select options. It included categories outside of the experience of building the controller such as the warranty and shipping speed. They did provide users a progress bar and a clear naming structure for each segment of the build process to help orient the users.
Microsoft Experience Review
The Microsoft builder had the most streamlined building experience by narrowing it down to ten categories. Each category also featured clear and modern iconography. They also had a horizontal navigation which kept the controller in view of the user at all times. This horizontal navigation layout also allowed them to position additional optional features or components underneath the builder. The Microsoft builder did have a large amount of dead space between the controller and selection area that could’ve been positioned better.
Group Competitive Analysis Review
After reviewing and compiling the different features from our competitors it made it clear which features to include when redesigning our builder experience and which pitfalls to avoid as well. Microsoft had the strongest experience so I decided it would be best to model our builder more heavily after theirs and work in elements of the builders.
User Research
Through moderated in person user testing I noticed users doing a large amount of vertical scrolling back and forth to build their controllers, and this behavior was backed by our heat maps as well.
The users were asked to go through the entire current controller builder experience and modify a controller however they like, but to change a component in each step of the builder. I conducted moderated user testing and captured their thoughts with a think out loud exercise while they navigated through the builder.
At the beginning of the project we had heat map data showing that customers were vertically scrolling often, so they were missing components and the business was missing out on capturing additional revenue. After conducting the in person user testing and research this was consistent and validated the data we saw happening in our heat maps.
Wireframes
The wireframe layouts were used to get internal buy in from stakeholders for the new horizontal navigation pattern and layout to test and build high fidelity screens for user testing.
The wireframes were helpful to get buy in on the new layout for the builder experience. We looked at different arrangements and layouts but decided to go with the pattern most similar and familiar to our users. I would have liked to test wireframes with our users before moving onto high fidelity versions but due to time constraints and our team's confidence in the layout we went straight to high fidelity for testing.
User Testing
Users mentioned higher levels of satisfaction with the new horizontal layout experience.
Users were tasked to go through the new builder experience and design a controller however they liked as long as they made a modification within each category in the builder. Users used a high fidelity version of the builder for the test. Five users were selected for the user testing phase. There were five people chosen to follow the Nielsen usability model and from the lack of time for the project. Two of the users had used our builder previously and their insights were helpful control variables to gauge user satisfaction between the existing and new horizontal navigation experience. The other three users had only used the new version of the builder but fell in our customer category of playing competitive multiplayer games more than ten hours a week. Five out of five the users felt that the new horizontal navigation experience was superior to the previous version. Users mentioned comments such as “this how it always should’ve been” and “I like being able to see all of my changes instantly”.
High Fidelity Mockups
I captured images from our current builder and reworked them to highlight how a more horizontally oriented navigation experience could look for our site.
Conclusion
Average order value increased by 12%.
After presenting my research our Ecommerce Marketing Director and Senior Digital Project Manager, both agreed these were valuable insights. The suggestions were implemented in the controller builder and led to a 12% increase in average order value, an additional 456k in revenue per year.
