Post

Heuri: Brutally Honest Design

Heuri: Brutally Honest Design

When I was a kid, I loved drawing houses. In fact, most of the drawings my parents saved for me were just houses. When retrospectively viewing my artistic treasures the other day, I noticed a particular pattern: they were oversized, simplistic (duh!) and had pretty much nothing around them. The pinnacle of my graphical extravaganza was trees and picket fences. There were no people, no animals around, just the house, staring at you from the picture.

Children's crayon drawing of a house and a tree Flowers and birds are a superfluity. Image source: Picryl

Instead of psychoanalytically laying out what that might entail about my personality (a task left as an exercise for the reader), I’m mentioning this because I think that directness and crudeness still vastly define how I think and who I am today.

On Designing Things

When I started designing Heuri, all I considered important was what data to use and how robust my system architecture should be. It won’t surprise you I’m a software engineer. The more I developed the app, however, the more I realized how important the overall design is, including the graphical one.

Early UI design draft of the Heuri application interface This initial design of Heuri bites felt diffident to me, exactly how a student might feel about math after getting into regular contact with its merchant form. Image source: author

This month, I’ve started researching and putting together a more distinctive and assertive design system which highlights and fosters one of the few Heuri values, namely creativity and novelty.

Inspirations

It would be ludicrous of me to stitch everything together myself, so I searched around for a way to design Heuri scalably. I’ve found an incredibly vast amount of information, extending even to product design. I also didn’t want Heuri to look like a “vibecoded” SaaS from 2026, many examples of which I’ve already shown in previous articles. I hope I’m stating the obvious: if you want to build trust among users, you have to have an idea of what you’re doing.

Brutalism

I won’t even pretend to understand the intricacies and ingenuities of any of the art forms or web design trends. I just rummaged through a few web design and art articles I found on the internet and extracted whatever resonated with me the most.

I think brutalism best describes the crudeness part of my house drawings, which is why it resonated so much. It’s to the point, no questions asked. There you have it, take it or leave it. Exactly how I still think and what Heuri is trying to promote: it’s not here to hold your hand and prepare wonderful flashcards for you. Expect constructive and controlled struggle because that’s the natural part of any learning, at least from my experience. You make mistakes, you learn from them, rinse and repeat.

Black and white photograph depicting raw concrete architectural brutalism Let’s rage against the EdTech vibemachine. Image source: Picryl

Brutalist web design is sometimes criticized for its randomness, its inability to accommodate web accessibility, and the fact that it may even cause anxiety for some users (examples of these critiques and web brutalism can be found in the reading list below). I would argue, however, that was exactly the point in the 2010s when brutalism came about as a trend in web design. It was purely an experiment to see where else we can take web browsing. That’s why brutalism has never become a mainstream UX trend, as it’s not easily reproducible and transferable to any domain language. And that’s perfectly fine.

Neubrutalism

That doesn’t mean, however, that web designers haven’t taken inspiration from brutalism. Neubrutalism is an attempt to commodify and streamline the uncompromising pragmatism and boldness of heavyhanded brutalism: Crudeness as a Service, if you will. That’s why it makes sense to me to incorporate this style even in Heuri, as it provides dead-simple rules and guides on how to design a system accordingly.

Screenshot of the neubrutalism.com guide showcasing the design style The official neubrutalism guide showcases this exact aesthetic. Hard shadows, distinct palette, prominent fonts, minimum of animations, layout asymmetry. Even though it’s a 2020s trend, it’s also a timeless design methodology. Image source: neubrutalism.com

Nomenclature Comes First

One of the typical aspects of brutalism in architecture is the repeated patterns and modularity of the design. To me as a software engineer, thinking in terms of these constraints is second nature. That’s why I was ecstatic when I found out about Object Oriented UX (OOUX) through a very refreshing interview.

Sophia Prater, evangelist of OOUX, has a very compelling point: object-oriented programming isn’t useful only for software engineers and architects; it’s the natural way we process and understand the world around us. First, we establish nouns by which we grasp the concepts around us, and only then do we describe actions or verbs that define relationships between those nouns. Prater argues that traditional UX design has it the other way around: by designing flows (or verbs) without knowing the domain language, we might get trapped into designing a system that’s very hard to scale and test, as nothing is pluggable and/or reusable.

That’s why the fundamental principle of OOUX is defining a glossary first, or a ubiquitous language, as advocates of Domain-Driven Design (DDD) would put it: a unified, unambiguous language that’s ardently enforced throughout all divisions of the company: business owners, sales, marketing, software development, R&D, and so on. Such noun foraging is established as part of a process named ORCA.

Even though that might sound like something from a corporate business management book, trust me, it’s much more flexible and engaging than that: to me, ORCA has felt like one continuous back-and-forth brainstorming session, helping me realize what parts of Heuri are still ambiguous and relying on the presence of a rainbow fairy.

That’s why I’ve decided to adopt an incremental OOUX approach to my design process: whenever I’m designing a new, substantial part of Heuri, using this clever combination of object-oriented thinking and DDD will uncompromisingly guide me towards the decisions I need to make.

Heuri Glossary

Here is what I was able to establish during a 2-hour brainstorming session:

BITE: A little piece of granular mathematical knowledge that’s densely indexed. A bite purposefully segments the high school curriculum so that students can target specific areas and don’t have to navigate through long-form lectures or texts.

LEARNING LOG: A standalone data point capturing a snapshot of a user’s understanding and learning progress. It intentionally moves away from binary “right/wrong” paradigms to favor a standalone entity that can be leveraged as an input to a Socratic dialogue, counterexamples, etc.

KNOWLEDGE GRAPH: Shows what the user knows, organized in a densely interconnected graph that’s constantly evolving.

STUDY GROUP: A social boundary, or a collection of people in Heuri, that determines the way users are organized within the platform. It treats all possible external spaces architecturally the same, managing shared resources, custom permissions, and lifecycle rules.

This just shows the immense potential this approach has.

Happy learning!


Reading List

  1. 10 UX Writing Principles — ParallelHQ
  2. Atomic Design 101 — Radiant Digital
  3. Atomic Design and Modern Design Systems — Design Systems Collective
  4. Atomic Design Methodology — Brad Frost
  5. Atomic Design: Why the Labels Don’t Matter — Qt
  6. Bauhaus Brutalism — The Backward Vendor
  7. Bauhaus vs Brutalism: Impact on Modern Branding — PutraCetol Studio
  8. Bauhaus vs Brutalism: Key Differences — LearnArchitecture
  9. Brutalism vs Neubrutalism in UI Design — CC Creative
  10. Brutalism, Minimalism and Neobrutalism in Design — Medium
  11. Controlled Vocabulary: Practical UX Method — Chandan Mendiratta
  12. Controlled Vocabulary: Say the Same Thing the Same Way — Medium
  13. Design and Digital Interfaces — Barnes & Noble
  14. Design and Digital Interfaces — Goodreads
  15. Design Principles — Robot Moon
  16. Futura: The Typographic Avant-Garde — Medium
  17. Microcopy: The Book — Nemala
  18. Minimalism in Graphic Design — The Developing Life
  19. Neo Brutalism Web Design: A Guide — Alpha Efficiency
  20. Neobrutalism: Definition and Best Practices — Nielsen Norman Group
  21. Neubrutalism in Web Design — LogRocket
  22. Neubrutalism: UI Design Trend That Wins The Web — Bejamas
  23. Object-Oriented UX with Sophia Prater — InfoQ
  24. Object-Oriented UX: A Structured Approach — LogRocket
  25. Object-Oriented UX: The Power of Objects-First Design — UX Planet
  26. The Essential Guide to Microcopy — UX Magazine
  27. The Object-Oriented User — OOUX
  28. Top UI Design Books — Nucleus UI
  29. What Is Atomic Design? — FlowMapp
  30. What Is Neubrutalism? A Visual Guide — SVGator

Music Fun Fact

Loading a fun music fact...