Debgames Gaming

Online retailer DebGames offers activation codes for software and games available across various platforms. This platform’s design is centered on a dark user interface that highlights objects through the shadows, hues, and placement of each product cover.

My role

UX/UI Design

Product Management

User Research

Journey Mapping

Wireframing

Information Architecture

Interaction Design

 

client

Freelance

 

members

Daniel David (UX/UI Designer)

completed

2022

 

Software

Adobe XD

Adobe Illustrator

Miro

challenge

In the UK, little more over 50% of individuals play video games despite the gaming industry’s explosive growth over the past ten years. Players of video games, whether they are children or adults, are constantly seeking the finest experience that will transport them to a new world filled with action and adventure and stimulate their desire for the product.

DebGames serves as a platform for all virtual requirements. It offers consumers rapid access to the game within minutes after activation by selling product keys. Similar to G2A, consumers may find the greatest offers for their favourite gaming platform by comparing the best prices listed by many merchants and finding a quick deal.

 

The problem

I explained to the client that his website is only an e-commerce platform and not a game website. The website’s primary focus has shifted from interactive to a broader focus on product cards and pricing combined with an animated orange circuit design.

As a gamer, you spend a lot of time looking for the greatest bargains on retail gaming platforms. A lot of animations and interactions can quickly cause you to become distracted and lose interest.

defining the process

We chose to divide the project into four main phases, each separated into many sections, while working with another freelancer. With a three-week deadline, we had to work quickly using an agile development methodology that allowed us to identify quick and effective solutions.

The project was also broken down into weekly sprints, with daily feedback from the team and the client.

discovery & analysis

To start the discovery process, I held a series of Zoom sessions with the product owner for a series of workshops to learn about their present workflow, identify project goals, define the project roadmap, and sketch live concepts during the meetings. Then I got the opportunity to speak with one of the practitioners, to whom I posed a number of questions in order to identify the final concept’s impending aspects.

I proceeded to synthesise common themes using the thoughts and responses I had received. Thanks to the practitioner, I was able to establish a persona profile, and then I developed journey maps in Miro to understand better the relationships between the platform’s various user categories.

sprints & task management

I met with the other UX designer after each week-long sprint to reflect on the previous sprint’s accomplishments and highlight areas for improvement. We created and divided our tasks using Monday.com, and each task was prioritised based on how quickly we needed to complete that component of the project.

low fidelity wireframes

To rapidly identify which concepts worked best, I drew each iteration and incorporated the pieces and screens that were required to achieve the users’ goals. The majority of these versions were created with a pencil, a ruler, and a printed web layout during Zoom sessions.

Those iterations play an important part in the process since they allow for fast modifications and allow both the designer and the client to convey their views.

Later, I used Adobe XD to transform the drawings into a high-fidelity design.

high fidelity Wireframes

I was able to turn the “old school” versions into a high resolution digital format using an Adobe wireframe toolkit. I had the drawings side by side with the digital sheet in Adobe XD, and as soon as those were completed, I was given the green light for the high-end design concept.

Outcome

The conversion for the final design began once the high-fidelity wireframes were done. The final output was completed two days before the final deadline, using a broad range of photographs, colours, shadows, and other graphical components.

sketch vs final result

The client contacted me on the last day with a bonus request from the development team. They also want a dashboard that was as quick and easy to use as possible. Both the patient and the practitioner may use the dashboard, which gives them access to the platform’s most important features.

 

Sketch Final
Design System

A design system has to be built in order to establish a link with the brand. I began the branding process by experimenting with several logo variations, colour palettes, and typeface combinations.

 

typography
Colour Palette

Aqua Blue #0FD8EF
RGB (15, 216, 239)

Night Blue #2F2660
RGB (47, 38, 96)

Pure White #FFFFFF
RGB (255, 255, 255)

Lavender #9B5DE5
RGB (155, 93, 229)

Dark Violet #37324D
RGB (55, 50, 77)

Aqua Green #89F8AB
RGB (137, 248, 171)