I worked on the UI design and development of this Gamer Guide page in order to try and cater to the specific requirements of different customers. The campaign focused around helping families and gifters find the right game for themselves or a friend/family member. It was important to make the games more accessible for people who may not be interested in them and also take a less sales-focussed approach.


I was proud of this project as the website had some technical limitations I needed to work around and given I didn’t have access to the resources/skills of the backend development team. It also gave me a chance to collaborate with people in the office as a broad panel was formed to decide which products would be most suitable for different types of customer.


Taking the various considerations into account, as part of my design process I first performed a brief feasibility study to discover whether the requirements would be achievable. Given the in-house application development team were not able to assist in creation of the page, I needed to tailor the design and functionality to work within my own skillset.


Based on the outcomes of the feasibility study, I decided to design and build a set of filters which would display a different set of products depending on the selections the user has made. As a cosmetic feature I also decided to add a dynamic background to the page using a JavaScript library. To enhance functionality, I added a custom piece of JavaScript that made it possible to automatically hide products that were no longer in stock, if required. I knew these would be challenging to accomplish without outside help, but felt confident I could reproduce.

I produced this wireframe in Figma to formalise agreement on the layout and tease out any final problems with my line manager and colleagues before progressing to the build stage. I used a set of UI components and annotations/sticky notes to highlight my thought process. This was an area I sought to improve in the company as there generally wasn’t much consideration for UI design which is essential for modern campaigns and user interfaces.


Although a challenge, it was good to have ownership of the design process and build itself from start to finish. I made sure to get feedback from the line manager throughout and gave frequent updates, and I think this consultative approach also helped shape/perfect the final product, and also raised awareness of designing effective UI’s to help drive their KPI’s.


Moving on toward the development phase, I also populated the list of products which was a little time consuming, as our e-commence team couldn’t find a way to pull these into the page dynamically and without assistance from the application development team this was the only way to achieve it, which had been a consideration from the beginning, however I was able to create a workflow which made the task a little less tedious (search and replace etc).

This project helped further my knowledge of filtering inside the browser window (DOM) and also working with JavaScript animation libraries. You can check out a full length final version of how the page appeared below! This includes an example of the filtered content based on what the user has selected from the drop down.


Although this project was not as in-depth and feature rich as other web products out there, it gave me a chance to bring a more modern approach to UI design in-house, where these hadn’t really been considered previously, and allowed me to improve my own skills and set the bar higher for future web projects that I would be working on.


It also allowed me to combine my design and development skill sets which is always a unique challenge, but I always feel that it adds value being able to design first, do it well, and also consider things from a developers point of view throughout, which is key when considering native apps and web UI development.