versionicon linkedinicon linkedin
2021-2023
Product design for the PC game.
POSTED: 12/09/2023 - 5 MINUTES READ

The Intro

“Experience unparalleled off-road driving in Offroad Truck Simulator: Heavy Duty Challenge®. This game delivers an exhilarating off-road experience with an extensive fleet of massive and powerful trucks.” - from HDC Steam Page

00Box 1

My Responsibilities:

As a hands-on Lead Product Designer, I managed the team of senior designers and was responsible for design and implementation of UX/UI and, the design of the product.

Other Skills used:

A/B Testing - Art Directing - Cinematic Directing - Documentation writing - Font Design - GUI Design - Icon Design - Interface Programming - Logo Design - Market Research - Motion Design - Production Scheduling - Prototyping - Storyboarding - Style Guide Creation - Surveys - Team Management - 3D Modelling and Rendering - UX Design - User Research - Wire-framing

2401 KeyArt

 Steam store product page

The Process

My process was iterative, and I designed all systems and left my files open to support such an approach.

HDC Process
HDC Tut-Needed

I began by playing the game to understand the user experience, taking notes on key issues like the lack of a tutorial explaining controls. 

Despite not being a driving game fan, I invested time to build empathy with the product and community by watching related YouTube videos and streams, reading comments, and learning about industry challenges. 

After comprehensive research into competitors and access to design documents from the lead designer, I broke down the product into screens and began iteratively prototyping the interface design in Figma to solve for the user needs identified.

The Greyscale Prototype

01Sketch

 The exploration phase - screen sketches 

05Wireframe

 Greyscale prototype in progress

User Flow 2021

 The main wireframe

Visual Direction - New Brand

We've decided to redesign the brand to the new one, to give it more modern and sporty look.

After analyzing the market trends, I proposed a duotone logo with a white accent.

Branding

 Brand book

User Flow 2021

 Logo and colours

Colours

The combination of yellow and black is often linked to the construction industry and warning signs.

User Flow 2021

 Two pages from the brand book

Typography

I chose clear, readable fonts like Work Sans and Roboto Condensed to align with user expectations. Icons kept a consistent circular style for visual cohesion.

User Flow 2021

 Two pages - typography

The Design System

I began with fundamentals like typography, grid, and colors, then built up from there.

User Flow 2021

 The design system in progress in Figma

Fonts And Icons

We created two custom fonts containing all in-game icons and console buttons which were used in settings and tooltips.

User Flow 2021

 Console font had been created

3D Icons

We added them to "break" the "flatness" of the UI and to make it more appealing to our target audience.

User Flow 2021

 Icons were rendered in Blender 3D

User Flow 2021

 Icons for upgrades - rendered in Blender 3D

The Grid

I used my favourite 12-column grid as a starting point and added margins from all sides.

For in-between margins and paddings to keep everything clean and clear, I used Fibonacci-inspired numbers.

User Flow 2021

 The 12 Cloumns grid with three anchors

The H.U.D.

For HUD, I used the right and left parts of the screen.

Points and time are grouped in the top left corner, the damage panel in the bottom left, differential and gearbox in the bottom right. All groups are intentional and I experimented before placing them where they are now.

User Flow 2021

 H.U.D. - PC

User Flow 2021

 The screen from tutorial - Console version

Implementation of the GUI

I provided specifications to programmers about constraints, resolutions, and responsiveness.

Visual Studio - Noesis GUI

XAML is a scripting language developed by Microsoft. We used it to describe elements of our GUI for NoesisGUI, a third-party framework we used to render GUI in our game. NoesisGUI has some great features. It supports full-vector Bezier rendering and animations created in VS or AE(Lottie).

User Flow 2021

 MS Visual Studio - WPF XAML

The WPF Designer is like Unreal UI Widget Designer, but it is twice as complicated.

14MomJoke

My task in Visual Studio was to prepare all components for binding. We created and tested them for responsiveness and scaling.

Universal Component

To simplify the interface I created a reusable "universal component".

It was possible to turn on and off functions of this component and reuse them accordingly. Once we used it to display events next time to show "new career". It was a true time saver and programmers were very happy with this idea.

15UCInfo
UCAnimated

 Universal component - responsivnes and prot

User Flow 2021

 Universal component in various implementations

User Flow 2021

 More examples of the universal component

Consoles

The design system supported PC, console, various resolutions, and multi-monitor.

User Flow 2021

 Main menu WFH tesing

Construction

The interface used a screen/popup structure. Main screens flowed into popups for confirming actions like purchases or deletions.

User Flow 2021

 the example of a pop-up on the top of the UI

User Flow 2021

 Question POP-UP

User Flow 2021

 Debriefing

Motion Design

Lively animations and transitions add dynamism and energy. Icons, widgets and screens animate for a "EuroSport TV" look.

I worked with a great motion designer Dmytro Klid and he created them.

placeholder image
placeholder image
placeholder image
placeholder image

 Various Animated Icons

placeholder image
placeholder image
placeholder image
placeholder image

 Loaders - some alternative versions - never used

Transitions in particular were very important for me because I wanted the UI to be dynamic and “cool”  

placeholder image
placeholder image

 Screen transitions

I've been also working on trailers. I drafted storyboards for them. I worked with directors, marketing and motion design to find the best ways to communicate our product. Its features and attractions.

User Flow 2021

 An example of storyboard, I made a few

The YouTube Trailer Examples

 HDC Launch trailer 

 A game mode advertising trailer

Part Two - User Experience UX

HDC is a difficult game, it's a niche product, but players will be expecting the best.

The UX was very important for us. We Also wanted to learn more about customers, this knowledge could be used during the launch marketing campaign.

User Flow 2021

 Making of on-boarding, storyboard and dev-doc

Surveys and User Persona

I Collaborated with marketing on research to build detailed user personas.

We conducted surveys, analyzed social media, and synthesized data to understand target users' motivations and expectations.

User Flow 2021

 Survey from GDC

Other Materials 

I also worked on supplementary materials like the game key art utilized across media and devices. I provided art direction on everything from expo booths to minor assets, fully immersing myself in the visual landscape.

Examples: Key Art

Was an important part of the product identity, we used it in many places from Tik-Tok to the Steam Store. I modelled and rendered a few versions of it in Blender 3D and we conducted A/B tests to pick the best one.

User Flow 2021

 The key art In some applications

User Flow 2021

 The box - PS5

Conclusion

This project was an absolute joy to work on. With a relatively small team, we accomplished a lot and learned even more. I loved every moment of this enriching experience and want to thank the entire team.

The Gallery

Random screens from the Heavy Duty Challenge - Please let me know if you want to see something specific. 

User Flow 2021

 Main menu

User Flow 2021

 My career the central screen of the UI

User Flow 2021

 Both Arabic and Chinese versions were supported

User Flow 2021

 Team camp - repairs and upgrades

User Flow 2021

 Third person camera and the H.U.D

User Flow 2021

 Even selection

User Flow 2021

 Version 2 of the UI - not implemented

User Flow 2021

 A Pop-up example

User Flow 2021

 Section debriefing

User Flow 2021

 New best score reached

User Flow 2021

 Trophy received

User Flow 2021

 Settings panel

User Flow 2021

 Leaderboards

Portfolio

Recent 2019-2023

2023

Heavy Duty Challenge

Design for the AA computer game product

Product design

2021

Internet Raffles

I designed a line of products for the internet competitions.

Product design

Older works +5 years

2019

Platform
Design

I led a design system and a platform for online casino products.

GUI DESIGN

2018

Gamified Experience

I’ve researched and designed gamification features

PRODUCT DESIGN

sep 2016

Lottery Syndicates

A green-field project about lotteries. I tested and created a product

PRODUCT DESIGN

case study

2018

Slingo Boom HTML5 game

My task was to create UX and UI for free to play product

GUI DESIGN

More Projects and Samples Avalible Upon Request

Archive

+6 years old works

may 2015

Pirate
Plunder

GUI design, animations and art for company’s flagship product 

VISUAL DESIGN

2013-2015

Geonomics GUI design

I was Art Directing creation of skins for company’s instant win games 

VISUAL DESIGN

Ancient

+10 years old projects

aug 2013

Zoony
Match

Game UI And UX

GUI DESIGN

may 2012

Brainstorm iOS app

New product line design and service

PRODUCT DESIGN

jan 2012

M.E.T.A.R
Weather

New product line design and service

HEADING CONTENT

JUN 2009

Blamball
iOS game

New product line design and service

GAME DESIGN

MISC

Areas Of Interest

2010-2013

Various
Animations

Some Animations For The US Based Companies

Animations

lottery item

JULY 2020

Nathaniel 19
free font for all

As an experiment I had created a freeware font for all designers

FONT DESIGN

lottery item

2009-2020

MY Art &
Drawings

After Hours, 
My Art and Hobby

ART

lottery item
Logo A

Copyright 2024 - Adam Jedrzejewski - All Rights reserved.
All product names, logos, and brands are the property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement. Adam Jedrzejewski - London-based product designer portfolio. Available for short and long-term contracts.