< />
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.
As the Product 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.
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 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 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 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 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 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.
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.
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.
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.
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.
Key Findings
Buttons are too small and closely spaced, hindering touch accuracy.
User might not readily recognise elements as clickable buttons.
General mobile layout and navigation could be optimized further
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.
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.
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!
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.
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.
Results of Using the Design System
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.
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.
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 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
272% Growth in New Purchases
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.
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! :)
