Focusing on the best performance hardware at competitive prices, Overclockers UK is famous throughout the enthusiast PC community. Although the UK has been our focus market, we are pleased to have customers and fans in many countries around the world.
UX/UI Designer
Role
Caseking Development Team
Team
Web
Platform
Check it out
Overclockers UK Relaunch
Project Summary
In 2021, as a part of the company‘s strategy, Caseking decided to move the old Shopware-based Overclockers UK shop to the Spryker system and refresh the design. For the base functionality was taken the design of the globaldata.pt, the previous project of the company, with the applied style guide of the Overclockers UK.
The most challenging part was building the PC Configurator, one of the most important and „selling“-features of the old shop. The feature serves to help users to build suitable PC Systems on their own.
The most challenging part was building the PC Configurator, one of the most important and „selling“-features of the old shop. The feature serves to help users to build suitable PC Systems on their own.
Audience
The target audience was singles young professionals and business people aged 20-40, with a medium household income.
Team & My Role
I was a member of the Caseking development team – leading gaming e-commerce group in Europe. On this project, I worked as UX/UI Designer together with Project manager, Frontend Lead and Head of Development.
I was responsible for building a design system, wireframing, user flows and visual design for the Listing page, Product detail Page, PC Configurator and Checkout.
I was responsible for building a design system, wireframing, user flows and visual design for the Listing page, Product detail Page, PC Configurator and Checkout.
Design process
Overclockers UK is operating since early 2000 and has a huge trusted customer base. We joined this project when the Overclockers team already had a very good performing shop, gathered the user research and defined their requirements. One of the objectives was to help users easy and accessible build a PC System on their own to efficiently convert users into customers.
To address this objective we started with an analysis of the current solution and over 15 competitors from all over the world to build MVP.
Key takeaways
1
User should define the purpose of use of the PC System e.g. Home PC, Professional, Gaming PC
The ability to pre-filter PC Systems is key to successful conversion.
2
The configurator should be integrated on listing
Users should be able to easily identify configurable products on listing
3
The configurator should be integrated on Product detail Page
It should look and feel similar to the "normal" PDP.
User Flow
I then build a very simple user flow to make our takeaways visual and enable conversation with stakeholders.
User Journey Map
Hand-drawn Wireframes
The lives of two mob hitmen, a boxer, a gangster’s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.
Lo-Fi Prototype
Lo-FI Prototype
Visual Design
The visual design had to be easy to understand and informative, but also had to appeal to our target audience and be consistent with the Overclockers branding and Style guide.
Design System
The style guide with typefaces and colour palette was provided by Overclockers UK. To speed up the development process I build a Design System with the most necessary components, such as drop downs, input fields, checkboxes, radio buttons etc.
Listing Page
Once the users open the listing, they immediately see filters on the left side and products on the right side. The products have two different CTAs such as green „Add to Basket“ for the „normal“ products and blue „Configure“ for the configurable products (PC Configurators)
Product Detail Page
The parts of the PC System on the left side underneath the gallery, putting the most important features to the left and less important to the right — based on this research by NN Group. (Web users spend 80% of their time viewing the left half of the page and 20% viewing the right half.). Most the PC systems have preselected Parts, however more experienced users can add
The first accordion represents the Case, the most visual part of the PC System, users see all available Cases for the PC system, can compare images one by one, and also could open the Case in Gallery mode.
The rest accordions serve for the less visual pars, where we don’t have a lot of images and the product name is the most valuable part.
The first accordion represents the Case, the most visual part of the PC System, users see all available Cases for the PC system, can compare images one by one, and also could open the Case in Gallery mode.
The rest accordions serve for the less visual pars, where we don’t have a lot of images and the product name is the most valuable part.
Shopping Cart & Checkout
In the Shopping Cart and Checkout, users can see selected parts in their PC System.
Outcome
Overclockers management was very please with the resulting conversation rate and performance. This project was completed in the 2021 and fully launched in February 2022.
Personal takeaways
It was one of the biggest and most important projects in my career so far, it was very important for me to have such a great and talented team and meaningful steakholders feedback.
I learned how to better express my ideas and convince stakeholders to be user-centred, find a middle ground with the Frontend team and deliver results fast.
I learned how to better express my ideas and convince stakeholders to be user-centred, find a middle ground with the Frontend team and deliver results fast.
Contact me:
+49 163 978 3 978
mikhailsekerin@gmail.com
mikhailsekerin@gmail.com
