StormForce manufactures specialist and high performance pre-built gaming desktop PCs which are coveted by a young and tech-savvy audience. The core aims of the project were to design and develop a modern and responsive e-commerce website with a user friendly CMS along with a first-class mobile user experience that would all help drive its Google rankings.
The project for Stormforce was based around:
- A fully bespoke design and build, in keeping with existing branding, but with a vastly improved user experience
- Fully customisable homepage with editable banner, featured products and CTA sections
- Choose Your Level page, where Stormforce Gaming’s different ranges are easily browsed and selected
- Browse By Game, where Stormforce Gaming’s PCs are broken up based on their suitability to different games’ operating requirements
- Bespoke filtering system enabling customers to narrow their search across various attributes
- Product page template with block builder functionality and detailed computer specification
- An engaging blog section
- Integration with PayPal and Braintree payments
One of our existing clients, VIP Computers, came to us with an underperforming Magento website. The site was designed to sell high-end gaming PCs and associated gear, such as mice, keyboards and monitors.
The brief was to review the useability of the website and incorporate the existing Stormforce branding into a completely new, refreshed user experience. The emphasis here was on the usability of the product filters. The PCs come in a wide variety of specifications and ranges, so allowing users to easily browse the PCs by filtering down on various attributes was paramount.
Limited by the existing Magento set-up, it was requested that we make banners and other forms of on-site content much easier to update.
We were also tasked with migrating over products from the existing Magento website to a new WooCommerce set-up for the relaunch.
The Stormforce project timeline
As with any project, the early stages involved a couple of face-to-face kick-off meetings. We spend a lot of time scoping out the project to gain a thorough understanding of all technical requirements and requests.
From there, a technical specification and design brief were written and agreed with the client. These are fundamental documents that provide the basis for any project, as they give us clear objectives to work towards, and allow us to work to specific standards and criteria.
Wireframes are the first step of the creative process at Pixel Kicks. It is important that we communicate a skeletal framework to the client in the first instance, so that the full website designs are grounded in solid UX principles, and all required features are going to be present. This was one of our Head of Design, Dan Parr’s first design projects with Pixel Kicks. We created a series of design options for the homepage, category and product pages along with a number of key content additions, too.
Designs are put through a revision process as standard, and using Adobe XD, the client had ample opportunity to feed back on the look and feel of the concepts we put together.
With approval and agreement on the designs, we then moved the project into the build stage.
Concurrently, we also set up a copy of the existing Magento website on our servers. With this in place we were able to write a script that migrated the products across to the new WooCommerce set-up. As with anything of this nature, the task required some manual input, and so working with the client on a mass CSV upload, we were able to follow this up and add the correct attributes to any products that weren’t 100% accurate.
Finally, we worked closely with the client on the product filtering process – a key requirement of the project. Lots of testing was required in setting attributes and options that users could use, such as RAM, CPU and Hard Drive options.