Role
UX/UI Designer
Team
Caseking Development Team
Platform
Web
Check it out
Overclockers UK Relaunch
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.
Project Summary
In 2021, as part of the company's strategy, Caseking decided to migrate the old Shopware-based Overclockers UK shop to the Spryker system and refresh its design. We used the design from the company's previous project, globaldata.pt, as the foundation, while applying the Overclockers UK style guide.
The most challenging aspect was rebuilding the PC Configurator, one of the most important and popular features of the old shop. This feature helps users build custom PC systems tailored to their needs.
The most challenging aspect was rebuilding the PC Configurator, one of the most important and popular features of the old shop. This feature helps users build custom PC systems tailored to their needs.
Users
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. In this project, I worked as a UX/UI Designer alongside the Project Manager, Frontend Lead, Head of Development and Devs.
My responsibilities included building a design system, wireframing, creating user flows, and developing the visual design for the Listing Page, Product Detail Page, PC Configurator, and Checkout.
My responsibilities included building a design system, wireframing, creating user flows, and developing the visual design for the Listing Page, Product Detail Page, PC Configurator, and Checkout.
Design process
Overclockers UK has been operating since the early 2000s and has a large, trusted customer base. We joined this project when the Overclockers team already had a well-performing shop,
user research, and defined requirements. One of our key objectives was to make it easy and accessible for users to build their own PC systems, effectively converting users into customers.
To address this objective, we began by analyzing the current solution and studying over 15 competitors from around the world to build our MVP.
Key takeaways
- 1User should define the purpose of use of the PC System e.g. Home PC, Professional, Gaming PCThe ability to pre-filter PC Systems is key to successful conversion.
- 2The configurator should be integrated on listingUsers should be able to easily identify configurable products on listing
- 3The configurator should be integrated on Product detail PageIt should look and feel similar to the "normal" PDP.
User Flow
Based on the Competetitors Audit and current version of PC Configurator, I sketched very simple user flow to make our takeaways visual and enable conversation with stakeholders.
User Journey Map
Hand-drawn Wireframes
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, including typefaces and color palette, was provided by Overclockers UK. To expedite the development process, I built a design system incorporating the most necessary components, such as dropdowns, input fields, checkboxes, and radio buttons, based on our previous project, Globaldata.
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
This project was one of the biggest and most significant endeavors of my career to date. Having such a talented and dedicated team, as well as meaningful stakeholder feedback, was invaluable to me.
Throughout this experience, I learned how to effectively express my ideas and persuade stakeholders to adopt a user-centered approach. Additionally, I honed my ability to find common ground with the frontend team and deliver results rapidly.
Throughout this experience, I learned how to effectively express my ideas and persuade stakeholders to adopt a user-centered approach. Additionally, I honed my ability to find common ground with the frontend team and deliver results rapidly.
Contact me:
+49 163 978 3 978
mikhailsekerin@gmail.com
mikhailsekerin@gmail.com
