When Derek Sakamoto, a senior UI designer at Blizzard Entertainment, first started working on Hearthstone in 2012, the digital card game was still trying to find its identity. Early prototypes had names like "Warcraft Legends" and took inspiration from World of Warcraft with 3D cards and single-player quests.

"The path to Hearthstone as it is today was not obvious or clear to us," Salkamoto admitted.

The Secret Sauce: Finding Hearthstone's "Seed"

To pull the project together, the team needed what Sakamoto calls a "seed" - a central unifying vision that guides the game's look and feel.

"This 'seed' is like a muse or it's like an image or a movie or song. Something for your team that they can all look at and understand the direction that your game is going to go in," he explained.

Without a strong seed, development ends up scattershot and disjointed. But with a seed, "it grows roots into the team's minds and hearts. And it grew strength and was able to grow up into this tree. And it branched out and created all kinds of different fruits."

For Hearthstone, the "eureka" moment came when a 3D artist mocked up an animation zooming into a wooden box, revealing a World of Warcraft-inspired diorama inside.

"This could be something. This is pretty neat," Salkamoto recalled thinking.

The seed sprouted. The team envisioned the box sitting on a tavern table, which led to atmospheric loading screens of tavern doors opening. Key art and trailers embraced the warm, inviting tavern aesthetic. Even Hearthstone's stage at BlizzCon 2014 brought the seed to life in epic form.

"It makes everything fit and feel like it's one thing," Salkamoto said. Finding a strong seed early will "make the rest of things go so much smoother."

Getting Physical

Once Hearthstone had its core identity, Salkamoto's team made a pivotal decision: embrace physicality in the UI design.

At the time, flat and minimalist interfaces were trendy. But for a card collecting game, Salkamoto felt players needed to feel connected to tangible objects.

"Let's get physical. Physicality can be big for us," he urged.

Every click and drag aimed to feel responsive. Cards tilt and swoosh. Game boards thump when tapped. The collection manager resembles a jewelry box, with satisfying clicks as it opens.

"These are objects, people can relate to the materials. People can know whether they're worth something or not because they're gold and gems," Sakamoto said.

The results exceeded expectations. Hearthstone's physicality made touch controls on phones and tablets feel magical. Fans recreated game pieces in woodworking and cakes.

But Salkamoto acknowledged physicality has downsides too. New heroes can't just be slotted into a rigid layout. Every asset requires extensive modeling and animation work. Navigation suffers when favoring "flavor over efficiency."

Still, for Hearthstone, physicality was the right choice. As Salkamoto put it, "Physical UI is awesome in the right context." The core experience revolves around collecting cards and game pieces. Making them feel real enhances the game.

Sit at the Big Kids' Table

For Hearthstone's success, Salkamoto credits leadership giving UI design equal importance as game design from the start.

"We didn't want to be off in the corner eating chicken fingers and hot dogs and spilling milk on ourselves and crying or whatever," he joked. "We wanted to be at the big kids' table."

In practice, that meant UI mockups actively shaped mechanics and features. If a UI looked too visually cluttered, designers stepped back to streamline the complexity.

For example, early prototypes had lengthy tooltips explaining every card ability. "And we just got rid of it all because nobody reads right? We know this," Salkamoto said. "We didn't want this screen to be too scary to just frighten people off before they actually play the game."

Similarly, mechanics like a card chaining system bogged down the UI. So out it went.

UI designers weren't just "slapping a UI" on top of a rigid design. They collaborated as equals.

Salkamoto walked through the iterative process taking a feature from rough concept to final implementation. UI designers, 3D artists, programmers, and effects artists all converge to refine the details.

"I think the results are kind of cool," he said, showing the polished product.

In his view, giving UI parity delivers better results. "Good things will happen if UIs appeared to the rest of development, I guarantee it."

Design for Now, Not the Future

Salkamoto acknowledged physical UI design has downsides. For example, new features can't just be slotted into an intricate layout built for "now."

But he argued obsessing about infinitely flexible and expandable UIs often backfires.

"We design for now, and that's why we try to make things have their own little homes," he said. Rather than overengineer for an uncertain future, "future Derek will figure it out. He'll be smarter by then, right?"

For Hearthstone, this philosophy manifested in details like capping the hero portrait tray at 9 classes.

"Our stance on this is that it's finely crafted. Everything has its place, and we tend to design for now," Salkamoto explained.

The alternative - building endless expandable grids - damages the tactile physicality at Hearthstone's core.

Of course, balance is needed. Salkamoto acknowledged key pain points like limited deck slots do get addressed over time. But in general, designing tightly for the present trumps overengineering for unknown future needs.

Flavor and Charm Over Efficiency

Hearthstone consistently favors flavor, charm and tactility over clinical efficiency. Salkamoto admitted this has tradeoffs but ultimately reinforces the spirit of the experience.

For example, the user flow to accomplish certain tasks takes more clicks than strictly needed. The collection manager doesn't allow instant jumping between pages.

"We designed this box to fold open the drawers to slide around, all for you to have a sense of place of where you are in this box," Salkamoto said. "You can't instantly jump from place to place because we feel that that kind of disconnects you from the experience."

Critics have called out inefficiencies in the UI design. But to Salkamoto, the immersive sense of tangibility takes priority over shaving off clicks.

Of course, there are limits - gameplay always comes first. If charm ever badly hurts usability, changes must be made.

But within reason, Hearthstone embraces flavor and physicality over clinical efficiency. And that tangible soul is essential to its identity.

The Magic is in the Details

Throughout his talk, Salkamoto emphasized how Hearthstone's UI design elevated seemingly minor details into an immersive tactile experience.

For example, cards don't just move - they tilt, swoosh and flutter. Game boards thump when tapped. Every action aims to feel responsive and physical.

3D artists meticulously model the tiniest game pieces as real world objects, down to decks of cards having properly staggered heights like a real decks. No detail is too small.

For Salkamoto, this craftsmanship taps into the primal joy of collecting cards, dice, and game pieces. The physicality makes digital objects feel real in your hand.

That's why UI design matters - it's not surface level "skinning." The tactile details breathe life into the underlying game. They create a spirit that resonates.

By valuing UI design from the start, Hearthstone's team infused charm into every corner of the experience. That charm keeps players invested and delighted.

Iterative Collaboration

Behind Hearthstone's polished UI lies an iterative collaboration between designers, artists and programmers.

Salkamoto walked through the process of taking a feature from rough concept to final implementation. It involves continual cross-discipline feedback.

For example, early in prototyping, UI designers sketch ideas to capture core functionality. Then programming and 3D artists vet whether those ideas are technically feasible.

Often, new design needs emerge mid-stream. The team then revises UI mockups to address them.

Finally, visual artists, animators, and technical artists refine the look, feel and effects. The polished product comes together through iteration.

This collaboration allows each discipline to influence the end result. according to their expertise. The outcome is more cohesive than designers handing off rigid specs.

"I think the results are kind of cool," Salkamoto said. The secret is cross-discipline participation throughout development.

Consistent Communication

To enable fluid collaboration, Hearthstone's team communicates consistently and democratically.

There are no rigid hand-offs between departments. Instead, interested parties remain engaged in the process.

Salkamoto emphasized that UI designers don't disappear after initial mockups. They continue tweaking and refining features side-by-side with artists and programmers.

He also noted that game designers frequently drop from discussions once their core mechanics are established. They trust the UI team to develop the best presentation.

This flexibility allows each discipline to focus where they add most value. No one is boxed into a single development stage.

The end result is that every group contributes to the big picture product, not just their departmental silo. Consistent communication ensures nothing gets lost in translation.

Player-Focused Evaluation

While collaboration unifies Hearthstone's design, the team never loses sight of the player experience.

Evaluating ideas through the lens of clarity, approachability and enjoyment guides decisions. As Salkamoto put it, "gameplay first."

For example, early cards had paragraphs of explanatory text. While comprehensive, this risked overwhelming new players.

By cutting the text and refining visual designs, the team lowered the initial learning curve. They trusted players to learn organically through the game itself.

Approachability and progression superseded giving players all information up front. Respecting players meant evaluating ideas from their perspective.

This player-focused evaluation ensures Hearthstone delights without overwhelming. Even with many cooks in the kitchen, the end goal stays clear.

Custom Tooling Enables Agility

Since Hearthstone's gameplay revolves around UI, the team prioritizes custom tools to increase agility.

Salkamoto explained that instead of restrictive general purpose software, they build bespoke tools tailored specifically to their workflow.

For example, UI designers use simple prototyping aids focused entirely on their needs. They don't lose time learning complex programs unrelated to card games.

This custom tooling allows the team to work swiftly and iteratively. They can test ideas quickly without overhead.

Of course, this approach has tradeoffs. Custom tools require additional up front development and maintenance work. Off-the-shelf software provides more built-in features.

But for Hearthstone, prioritizing agile iteration and rapid prototyping overcame those challenges. The end result is a snappy, responsive workflow.

By valuing UI design as a core discipline, and not an afterthought, Hearthstone's beloved style was able to take shape. The principles Salkamoto shared provide guidelines to elevate any video game's user experience.