Numskull Games

I joined Rubber Road in 2019 as an E-Commerce Assistant, and within six months my responsibilities moved to that of a UX and UI Web Designer. As the only designer in a small team, I got the opportunity to design a whole website for the gaming publisher. Still in the early stages of the redesigning process, I decided to review the current status of the website.

The first thing I did to kick off the redesign project was to meet everyone involved with the redesign, from the Managing Director all the way to the Numskull Games team. This was essential as we had to discuss every need that needed to be addressed in this redesign.
‍
Due to the lack of existing user data that I could work from, I began by using the business goals provided by my stakeholders as the foundation to shape the design for the website. The gaming publishing company wanted a complete change of the website's purpose: to become more commercially focused and create a smooth purchase route to other retailers, therefore increasing the sales of their games.

I sat with the Managing Director, E-Commerce Manager and the Numskull Games team to brainstorm and identify the current issues with the website.

In order to identify the user goals of the website, I began to ideate on my notebook to generate a persona hypothesis to facilitate decisions based on our users needs, desires and varying contexts of use. I tried to imagine what features user might want to see, and how they might interact with the website.

Due to lack of existing user data specific to this site, I decided to look at the Google Analytics data of the company's merchandising website, Numskull Designs, which had a similar user demographic to what was targeted for this website. This was helpful as a reference point in defining the user persona of the target audience. I also looked at recent psychological research articles that explore the personality factors of video gamer personas.

I also decided to conduct face-to-face user interviews with the Numskull Games staff to identify any pain points they had within the back-end functionality of the current website.

Through careful analysis of this data, I identified sufficient behavioural variables to segment our user audience. These variables could be categories into skills such as technical knowledge of gaming, and motivations such as reasons for using website.

We visualised and expressed the user's end-to-end journey through the website at several touch points using experience mapping techniques. We were able to visualise user pain points and determine where our efforts should be concentrated. Setting the stakeholder's expectations for the aspirational emotional state we were trying to achieve necessitated mapping out the customers' emotions.

I was able to rapidly come up with a broad range of tasks by combining our information and conceptualising the various actions users perform before, during, and after purchasing a game. 

I organised the tasks into behavioural affinities and aligned content and features. This helped me visualise what existing functionality and material would be valuable, what tasks needed to be supported, what potential for innovation was available, and what could be removed from the present website. 

Afterwards, I entered all the ideas into a spreadsheet and prioritised them against our personas needs, tech feasibility, and business objectives.

As part of the business goals was to re-design the website to become more commercially focused, we identified that a critical red route was the user’s journey to purchase the product. This meant we had to address several issues to simplify this route: 

• Organise the retailer links layout so they are easy to access and navigate.
• De-clutter the product page so it is concise.
• Polish the product page to combine social proof and compelling content.

As the website was not strictly an e-commerce site, but functions as a homepage which aggregated various online retailer links, we identified that the most important goal for building an effective red route was to make access to these links as simple as possible. 

We decided to create three sticky buttons located on the bottom of the desktop and mobile designs which you could toggle on and off on the backend, depending on what the product was. One button led to a purchase route for buying a physical copy of the game, another for buying a digital copy and a third which led to a user journey to pre-order or register interest for updates. It was also important that the buttons had a clear call to action so users knew exactly what would happen if they clicked on it.

Another critical red route we identified is the user’s journey to apply for their game to be published. Therefore, we made efforts to simplify this route by making it easier to navigate and by reducing the number of interactions needed to submit an application.

Sketching and storyboarding, I generated stacks of ideas about the arrangement of UI, functional and data elements, and interactive behaviours. Starting broad, our vision began evolving into something tangible.

Once the stakeholders approved the content and functionality to roll-out, I began to work with the E-Commerce Manager to structure that content.

I decided to use Adobe XD as the tool of choice for prototyping. Due to the tight deadlines, I chose to develop a high-fidelity prototype which had both benefits and drawbacks.

On a positive note, the high-fidelity prototype was a powerful tool in creating transparency within the design process. The what you see is what you get approach made it clear what features were to be included and excluded, and allowed us to gain feedback and approval from the stakeholder early on. 

Alternatively, this meant that the prototype was our final deliverable to the stakeholder. This meant that any design amendments needed to be reflected in the prototype itself. In hindsight, we should've found a better way to communicate revisions and let the prototype, be a prototype.

At the request of the stakeholder, it was decided that the website was to be hosted on WordPress. There were a couple of reasons behind this: firstly, employees managing the back end of the website were already familiar with how the WordPress admin area works, therefore little to no training was needed for them to get to grips with the backend functionality. Secondly, the stakeholders had a limited budget therefore couldn’t develop a bespoke backend admin area for their site.

This created limitations within much of the interaction design work as WordPress’s frontend capabilities are restricted to HTML, CSS, JavaScript, and PHP. As a result, most of the interaction design work within the high-fidelity prototype was judged 'cosmetic' and thus de-prioritised, and did not make it into the website.

Although I emphasised the importance of transitions in assisting users in maintaining context while navigating and improving perceived performance, they were only re-prioritised following Usability Testing. However, this allowed us to focus more on ensuring that the website was functional first and foremost.

Each page was created to give users rapid access to the most important parts of the website. The visual hierarchy of the website was organised to follow the natural eye movement patterns. The important areas of the website such as the 'buy now' button and search bar are always visible no matter where you scroll.

The interface design aspires to be self-assured. It is free of UI-glitz and extraneous elements. We used clear, readable lettering with high contrast colours to improve legibility. The layout is uncluttered, clean, spacious, and well-proportioned. All our design decisions contribute to the design's confidence.

The clear and concise information architecture of the backend makes it easy to navigate. The clearly signposted admin area simplifies the editing process and creation of any new product pages by implementing a template-based design.

The primary button on a mobile device is the right size and location for the user's thumb, making it easy to reach. The icons are large enough to make tapping easier, and the layout is flexible for scaling in the future.