"Dedicated support for World of Warcraft players. Save time, reach your goals, and rediscover the joy of the game."
"Dedicated support for World of Warcraft players. Save time, reach your goals, and rediscover the joy of the game."
the challenge
More Than Just Pixels
the challenge
More Than Just Pixels
My main challenge was about more than just making it look good. I needed to capture that World of Warcraft excitement, that feeling of jumping back into the game after a long day. I wanted players to immediately understand what Ball Hard's Den could do for them.
Also, many long-time WoW fans love the classic feel. So, the site had to find a good balance: be modern and easy to use, but also feel like real "WoW" to build trust and connection right away. The platform needed to clearly show the value of its in-game services to players who care about honesty and good service.
My main challenge was about more than just making it look good. I needed to capture that World of Warcraft excitement, that feeling of jumping back into the game after a long day. I wanted players to immediately understand what Ball Hard's Den could do for them.
Also, many long-time WoW fans love the classic feel. So, the site had to find a good balance: be modern and easy to use, but also feel like real "WoW" to build trust and connection right away. The platform needed to clearly show the value of its in-game services to players who care about honesty and good service.
my role
From Research to Reality
my role
From Research to Reality
As the Lead UX/UI Designer for the Ball Hard's Den design, I was responsible for the entire design lifecycle, from initial research and concept development through to high-fidelity prototyping, design system creation, and close collaboration with development teams for successful launch and iteration.
As the Lead UX/UI Designer for the Ball Hard's Den design, I was responsible for the entire design lifecycle, from initial research and concept development through to high-fidelity prototyping, design system creation, and close collaboration with development teams for successful launch and iteration.
Understanding WoW & Its Players
Understanding WoW & Its Players
I carefully studied World of Warcraft's current UI, look, and what players expect. This helped set a design direction that felt true to the game. I even went back to play the game to remember its style and how it works.
I carefully studied World of Warcraft's current UI, look, and what players expect. This helped set a design direction that felt true to the game. I even went back to play the game to remember its style and how it works.
User Experience (UX) Design
User Experience (UX) Design
I planned how users would move through the site (user flows), how information would be organized (information architecture), and how things would work. I started with paper sketches (paper prototyping) to quickly test layouts and navigation before making digital designs.
I planned how users would move through the site (user flows), how information would be organized (information architecture), and how things would work. I started with paper sketches (paper prototyping) to quickly test layouts and navigation before making digital designs.
User Interface (UI) & Visual Design
User Interface (UI) & Visual Design
I created wireframes, mockups, and interactive prototypes in Figma. I made important decisions about where to put buttons, what fonts to use, and which colors to pick, so the website would feel familiar and easy for WoW players to use.
I created wireframes, mockups, and interactive prototypes in Figma. I made important decisions about where to put buttons, what fonts to use, and which colors to pick, so the website would feel familiar and easy for WoW players to use.
Finding and Solving Problems
Finding and Solving Problems
I found key usability issues by getting feedback from users and testing (like making buttons easier to find and improving the mobile site). I then designed solutions that had a real, measurable impact.
I found key usability issues by getting feedback from users and testing (like making buttons easier to find and improving the mobile site). I then designed solutions that had a real, measurable impact.
Developing a Design System
Developing a Design System
I led the effort to create a complete design system. This system helps keep the UI consistent, makes communication with developers easier, and speeds up future projects.
I led the effort to create a complete design system. This system helps keep the UI consistent, makes communication with developers easier, and speeds up future projects.
Cross-Functional Collaboration
Cross-Functional Collaboration
I worked closely with our own developers, project managers, and also managed communication with outside front-end developers. We used ClickUp and a step-by-step (milestone-driven) workflow.
I worked closely with our own developers, project managers, and also managed communication with outside front-end developers. We used ClickUp and a step-by-step (milestone-driven) workflow.
The Approach & Process
Getting into the Game and Improving Step-by-Step
The Approach & Process
Getting into the Game and Improving Step-by-Step
The Approach & Process
Getting into the Game and Improving
Step-by-Step
To solve this challenge, I used a user-focused method. I started by deeply understanding the game and then made improvements in quick, repeated cycles.
To solve this challenge, I used a user-focused method. I started by deeply understanding the game and then made improvements in quick, repeated cycles.
"Back to Basics" Immersion
"Back to Basics" Immersion
The first step was to get back into World of Warcraft. The login screen is very well-known :) , but I needed to refresh my memory on all the game's visuals and UI details. This wasn't just for fun; it was important research to understand the details that create the real "WoW feel." What I learned directly helped my design choices for the website.
The first step was to get back into World of Warcraft. The login screen is very well-known :) , but I needed to refresh my memory on all the game's visuals and UI details. This wasn't just for fun; it was important research to understand the details that create the real "WoW feel." What I learned directly helped my design choices for the website.
Paper Prototyping
Sketching the Path
Paper
Prototyping
Sketching the Path
Paper
Prototyping
Sketching the Path
It's always great to sketch out those first rough ideas. Paper prototyping was very important for quickly trying out different layouts and how users would move through the site, without spending too much time on digital tools at the start. This simple, early exploration helped me find potential problems and avoid paths that wouldn't be user-friendly, saving a lot of time and effort.
It's always great to sketch out those first rough ideas. Paper prototyping was very important for quickly trying out different layouts and how users would move through the site, without spending too much time on digital tools at the start. This simple, early exploration helped me find potential problems and avoid paths that wouldn't be user-friendly, saving a lot of time and effort.
Discovery & Insights
Finding Key Problems
Discovery & Insights
Finding Key Problems
By testing early ideas and prototypes with real WoW players, we found several important areas that needed improvement. This feedback helped us see the main problems users had with the existing (or first proposed) experience.
By testing early ideas and prototypes with real WoW players, we found several important areas that needed improvement. This feedback helped us see the main problems users had with the existing (or first proposed) experience.
The feedback showed common issues: buttons were not always easy to see or click, which made users hesitate. Also, the mobile experience didn't feel as good as it should, lacking the ease-of-use players expect on their phones.
The feedback showed common issues: buttons were not always easy to see or click, which made users hesitate. Also, the mobile experience didn't feel as good as it should, lacking the ease-of-use players expect on their phones.
Key Findings
Key Findings
Buttons are too small and closely spaced, hindering touch accuracy.
Buttons are too small and closely spaced, hindering touch accuracy.
User might not readily recognise elements as clickable buttons.
User might not readily recognise elements as clickable buttons.
General mobile layout and navigation could be optimized further
General mobile layout and navigation could be optimized further
Designing the Solution
Making Things Clearer and Better
Designing the Solution
Making Things Clearer and Better
Making Buttons Easier to Find and Use
Problem: Users had trouble finding or confidently clicking on important buttons.
Solution: I made the buttons much bigger across the platform and added small shadows and hover effects to make them look more clickable and stand out.
Impact: This led to faster navigation and fewer mistakes when clicking, as buttons were easier to see and use.
Making Buttons Easier to Find and Use
Problem: Users had trouble finding or confidently clicking on important buttons.
Solution: I made the buttons much bigger across the platform and added small shadows and hover effects to make them look more clickable and stand out.
Impact: This led to faster navigation and fewer mistakes when clicking, as buttons were easier to see and use.
Improving the Mobile Experience
Problem: The first mobile layout wasn't smooth or easy to use.
Solution: I redesigned the layout specifically for mobile screens. I focused on the most important content, made navigation simpler, and created a smoother scrolling experience. This meant changing how content was arranged and making sure touch targets were big enough.
Impact: Players could now quickly get the information they needed on their phones, making the overall user experience much better and easier to access on the go.
Improving the Mobile Experience
Problem: The first mobile layout wasn't smooth or easy to use.
Solution: I redesigned the layout specifically for mobile screens. I focused on the most important content, made navigation simpler, and created a smoother scrolling experience. This meant changing how content was arranged and making sure touch targets were big enough.
Impact: Players could now quickly get the information they needed on their phones, making the overall user experience much better and easier to access on the go.
The Framework
Buidling a Design System
The Framework
Buidling a Design System
To make sure everything looked consistent, could grow easily, and to help teams work together better, a big part of the project was creating a complete design system for Ball Hard's Den. This was more than just a style guide; it was planned as the main guide for creating everything for the brand – from the website and marketing materials to future projects. And, of course, it had that important World of Warcraft feel!
To make sure everything looked consistent, could grow easily, and to help teams work together better, a big part of the project was creating a complete design system for Ball Hard's Den. This was more than just a style guide; it was planned as the main guide for creating everything for the brand – from the website and marketing materials to future projects. And, of course, it had that important World of Warcraft feel!
A Warm Welcome: The design system starts with a friendly message, explaining its purpose and how easy it is to use for both designers and developers.
A Warm Welcome: The design system starts with a friendly message, explaining its purpose and how easy it is to use for both designers and developers.
Your Design Map: A clear, well-organized list of parts and rules makes it easy for anyone on the team to find the design elements they need. This helps keep everything looking and working the same way across all projects.
Your Design Map: A clear, well-organized list of parts and rules makes it easy for anyone on the team to find the design elements they need. This helps keep everything looking and working the same way across all projects.
Button Best Practices: Clear rules on how to design buttons that are user-friendly, accessible, and match the WoW style.
Button Best Practices: Clear rules on how to design buttons that are user-friendly, accessible, and match the WoW style.
Iconography Dos & Don'ts & Logo Protection: Detailed instructions on how to use icons well to improve the user experience, and strict rules for using the logo to keep its look and brand strong.
Iconography Dos & Don'ts & Logo Protection: Detailed instructions on how to use icons well to improve the user experience, and strict rules for using the logo to keep its look and brand strong.
Results of Using the Design System
Results of Using the Design System
Communication between design and development teams became much smoother, with less need for back-and-forth questions.
Communication between design and development teams became much smoother, with less need for back-and-forth questions.
Developers said they could build things faster because they had easy access to ready-to-use parts and clear rules.
Developers said they could build things faster because they had easy access to ready-to-use parts and clear rules.
The design system's clear structure made it quick and easy for everyone on the team, including new people, to find the information they needed.
The design system's clear structure made it quick and easy for everyone on the team, including new people, to find the information they needed.
Although it was a success, the first version of the design system showed that we needed even clearer rules for using images and fonts in some special cases.
This experience showed how important it is to see a design system as something that grows and changes, with regular updates based on how it's used in real projects.
Although it was a success, the first version of the design system showed that we needed even clearer rules for using images and fonts in some special cases.
This experience showed how important it is to see a design system as something that grows and changes, with regular updates based on how it's used in real projects.
The Execution
Final Results
The Execution
Final Results
The new homepage quickly builds trust and makes its purpose clear. By starting with a disclaimer about service guarantees and showing an explanatory video, Ball Hard's Den shows it is transparent. This direct approach is designed to make potential customers feel confident from their first visit, encouraging them to stay longer and understand what's offered.
The new homepage quickly builds trust and makes its purpose clear. By starting with a disclaimer about service guarantees and showing an explanatory video, Ball Hard's Den shows it is transparent. This direct approach is designed to make potential customers feel confident from their first visit, encouraging them to stay longer and understand what's offered.
The shop page was redesigned to balance clear service information with other useful details. The main goal is still to make buying "hero boosting" services easy, but adding details about what's included in each service helps clients feel more sure and less hesitant before they buy. This makes the buying process smoother and more confident.
The shop page was redesigned to balance clear service information with other useful details. The main goal is still to make buying "hero boosting" services easy, but adding details about what's included in each service helps clients feel more sure and less hesitant before they buy. This makes the buying process smoother and more confident.
the Impact
Real Success
the Impact
Real Success
The redesign and smart UX/UI changes for Ball Hard's Den brought clear, measurable results that directly helped the business and how customers saw it:
The redesign and smart UX/UI changes for Ball Hard's Den brought clear, measurable results that directly helped the business and how customers saw it:
103% Increase in Specific Service Sales
103% Increase in Specific Service Sales
272% Growth in New Purchases
272% Growth in New Purchases
Reflections & Lessons
Learned
Reflections & Lessons Learned
This project was a great learning experience, mixing my love for gaming with the challenges of UX/UI design for a special and dedicated community.
This project was a great learning experience, mixing my love for gaming with the challenges of UX/UI design for a special and dedicated community.
Authenticity is Most Important
Understanding and respecting the look and feel that World of Warcraft players already know and expect was essential. My personal experience as a player was very helpful, but it also showed the need to always check ideas with real users.
Authenticity is Most Important
Understanding and respecting the look and feel that World of Warcraft players already know and expect was essential. My personal experience as a player was very helpful, but it also showed the need to always check ideas with real users.
Improving Based on Real Feedback
The "Finding Key Problems" stage showed how important user testing is. First ideas, no matter how good they seem, must be tested and improved based on how users actually interact with them. The changes to button design and mobile usability were direct results of this.
Improving Based on Real Feedback
The "Finding Key Problems" stage showed how important user testing is. First ideas, no matter how good they seem, must be tested and improved based on how users actually interact with them. The changes to button design and mobile usability were direct results of this.
The Power of a Design System
Creating a design system wasn't just an extra task; it was a smart tool that greatly improved how efficiently and consistently we worked. The lesson here is to treat it as a living guide that changes with the product.
The Power of a Design System
Creating a design system wasn't just an extra task; it was a smart tool that greatly improved how efficiently and consistently we worked. The lesson here is to treat it as a living guide that changes with the product.
Balancing Old and New
One of the main challenges was finding the right balance. Players love the classic WoW feel, but they also expect modern, easy-to-use designs. This project taught me a lot about how to manage that.
Balancing Old and New
One of the main challenges was finding the right balance. Players love the classic WoW feel, but they also expect modern, easy-to-use designs. This project taught me a lot about how to manage that.
Clear Communication is a Must
Working with our own teams and outside developers showed how important it is to have very clear design instructions and good communication, especially when using a step-by-step workflow managed with tools like ClickUp.
Clear Communication is a Must
Working with our own teams and outside developers showed how important it is to have very clear design instructions and good communication, especially when using a step-by-step workflow managed with tools like ClickUp.
Overall, the Ball Hard's Den project was a rewarding challenge. It allowed me to use all my UX/UI skills to deliver real business results and a much better experience for a passionate group of users.
Overall, the Ball Hard's Den project was a rewarding challenge. It allowed me to use all my UX/UI skills to deliver real business results and a much better experience for a passionate group of users.
Thanks for reading! :)