Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Beyond pixels: the human side of building design principles

--

We often think of design principles as rigid guidelines, etched in stone, dictating pixel placement and user flows. But I want to tell you a story that shattered that perception. This isn’t a tale of perfect execution, but of messy, human collaboration — a reminder that design principles are as much about people as they are about pixels.

My colleagues and I were working on a major redesign of a checkout. To kick off the final phase, the three of us escaped to Kaş, Turkey for an offsite brainstorming session. Imagine this: a quiet room, the off-season serenity of a holiday town, the winter sun shimmering on the sea… It seemed like the perfect setting to wrap things up. We had our goals, our analytics, our prototype, our architecture — all that remained was unifying the UI, polishing the design system, and then enjoying some well-deserved relaxation.

However, things didn’t go as expected. As soon as we started discussing, it became clear that there were numerous ways to solve the same problem. Each of us brought a distinct perspective shaped by our individual experiences, and all of these perspectives deserved thoughtful consideration. Over a few days of intense discussions and voting, we came to a surprising conclusion:

the true value of this project wasn’t about finalizing the design itself but establishing the principles that would guide the product’s interface moving forward.

This was our breakthrough moment. The focus shifted from the immediate deliverable to defining the design principles that would help the team make decisions, scale the product, and align everyone involved, both now and in the future. And this was not a theoretical challenge. Design principles are a very important framework for any product and team.

Types Design Principles

We gathered in one room, discussing the project. While I brewed coffee and my colleagues joked about our boss’s temporary barista role, something significant happened. Our conversation deepened, leading to a shared understanding that accelerated our decision-making. We even reached a point where formal votes became unnecessary.

However, we realized that our internal agreement wasn’t enough. To truly benefit the entire team, we needed to articulate our principles clearly and create a structured framework. This required more than just shared experience; it demanded a formal, theoretical foundation.

There are several types of design principles, each serving a specific purpose:

Universal Principles

These are foundational principles that all designers are familiar with. They form the bedrock of design and include:

  • UX Heuristics: Core guidelines for creating user-friendly and intuitive experiences.
  • Visual Principles: Concepts like balance, contrast, hierarchy, and alignment.
  • Platform Guidelines: Standards provided by platforms (e.g., iOS Human Interface Guidelines, Material Design).

Company Principles

The second layer of principles operates at the organizational level, reflecting the company’s identity and workflows. These include:

  • Design Systems: Centralized frameworks for maintaining design consistency across products.
  • Brand Guidelines: Rules for visual and verbal representation of the company.

Product Principles

The final layer focuses on the product and its interface, representing principles specific to the product’s design and development. These are often based on the universal and company-level principles but tailored for the product’s unique context. Examples include:

  • Product Design Principles: Specific rules for crafting the product’s user interface and experience.
  • Communication Design Principles: Specific rules for crafting the inproduct communication with user.

Creating Design Principles

To formulate our product principles, we drew from a blend of universal design, visual design best practices, and established usability heuristics. These principles were designed to serve as a guiding compass for our design team, influencing every stage of product development. They were intended to shape both the visual aesthetics and the product’s ability to drive our business objectives. Now, let’s explore these principles in detail. I’ll share the core tenets that steered us toward creating a successful, redesigned сheckout.

1. Modularity & Flexibility

  • Visual Principles: Balance & Alignment, Unity, Pattern
  • Heuristics: Flexibility and efficiency of use

Modularity is essential for a complex system, functioning as a construction set. To achieve this, we use visual principles to break the interface into basic blocks, align elements, and combine them into patterns and modules.

Flexibility extends beyond adaptive layouts to include cross-product integration and quick adaptations of the interface for diverse user and business needs.

2. Consistency & Design System

  • Visual Principles: Rhythm, Repetition, and Pattern
  • Heuristics: Consistency and standards, Match between system and real world, Recognition rather than recall

Consistency is crucial for maintaining quality across product interfaces. By following and evolving UX and brand standards, we create a unified system that combines styles and ensures harmony across products and interfaces.

This consistency enhances the connection between the product, the brand, and other systems, reinforcing usability and familiarity.

3. Hierarchy

  • Visual Principles: Hierarchy, Proportion
  • Heuristics: User control and freedom, Consistency and standards, Visibility of system status

Hierarchy defines the relationships within the interface, from colors and typography to module organization. It controls user flows and prioritizes information to align with both user needs and business goals.

By improving readability, managing context, and controlling states, hierarchy ensures an effective and intuitive interface.

4. Focus

  • Visual Principles: Emphasis, Contrast
  • Heuristics: User control and freedom

User attention is a critical resource. The principle of focus ensures the interface directs attention where it’s needed most, using visual accents and scenario emphasis to guide users through clear and efficient flows.

5. Clarity

  • Visual Principles: White Space
  • Heuristics: Aesthetic and minimalist design, Visibility of system status, Error prevention, Help users with errors

Clarity reduces visual and informational noise while providing explanations and additional communication when needed. This principle ensures users can easily understand and interact with the product, enhancing their experience through simplicity and guidance.

The role of Design principles

Funny story, our strategy session was a complete fluke. I spontaneously decided to visit colleagues wintering at the beach and, naturally, convinced another to join. I’m pretty good at getting people to travel. But what started as a sunny getaway became something much more valuable: we developed a universal tool. This tool allowed us to not only reach immediate consensus but also facilitated productive discussions with diverse groups later on.

This tool, built on design principles, directly supports several strategic activities:

Alignment

The first role of principles, as you may have gathered from my story, is alignment. Things are always changing — companies scale, employees come and go, and features evolve or get shelved. However, principles ensure that the same core values remain intact, regardless of the situation or the people involved.

Focus

In a fast-paced environment, it’s easy for teams to lose sight of the bigger picture. Imagine a team designing a new feature without clear guiding principles. One designer might prioritize visual flair, another might focus on raw functionality, and yet another might get caught up in the minutiae of micro-interactions. This can lead to a disjointed user experience, inconsistent design, and ultimately, a product that fails to meet its goals. But with shared principles in place, the team has a north star. In our case, one of our key principles was ‘user-friendliness above all else.

Consistency

Principles should guide everything the product team does. When the team feels lost in the details or questions why they’re working on something that seems irrelevant or unusual, they can turn to the principles for direction and validation. This ensures that decisions align with the team’s overarching goals and values.

Afterword

The redesign of our payment solution wasn’t just a success on paper. We saw an 11%+ jump in payment conversion, driving a 38% year-over-year revenue surge. We enabled seamless customization and flexible integrations, and even inspired others in the gaming industry. But the story behind those numbers is where the real magic lies. It’s a story of intense, coffee-fueled brainstorming sessions, of sunsets over the winter sea during an off-site in the midst of the Covid era. It’s about the power of collaboration and open dialogue — a testament to what we can achieve when we work together.

Yet, a critical lesson emerged: while active listening and open dialogue are indispensable, they are insufficient for scalable decision-making. To navigate complex choices effectively across diverse teams, an objective, unbiased decision-making framework is essential.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Kir Romanovsky
Kir Romanovsky

Written by Kir Romanovsky

VP of Design at Xsolla, ex. Kaspersky, ex. Mail.ru

Responses (1)