Design Levels

When you’re shaping work for engineers to build, design is a critical component. But I actually think about design more holistically than pretty mockups.

Like Steve Jobs said:

Design is not just what it looks like and feels like. Design is how it works.

Design is how it works.

I was talking with a coworker this past week about the role of design in the shaping process, which is the process used to define the work at the right fidelity for it to be built.

While talking about it, I tapped into a new thought around how design functions across three distinct levels, and they all produce different weights when you’re defining work.

Before an engineer starts writing code, they need a clearly framed problem, a defined time constraint, and a thoughtful, intentional solution they can base their work off of. The solution sits between too abstract and too rigid. It’s a clear concept without forcing the wrong constraints before building.

Why? When you give an engineer a high-fidelity mockup, they’ll do whatever they can to solve the problem to match the mockup exactly. When something doesn’t work—as it inevitably does—then they will toss it back over the wall to the designer to update. That’s the Waterfall Process, the plague of software development. In order for work to be delivered on time, an engineer needs to make decisions, adapting the scope to fit the predetermined time constraint. If you just move the decision to someone else, you lose the thread of context required to build a seamless experience.

And it’s also an example of design masquerading as deep thinking, creating an illusion of intentionality.

Design is meant to be integrative and holistic. While some high-fidelity mockups in Figma may contain intentional thinking, they’re usually visualizing the surface—a high-fidelity visual paired with low-fidelity thinking.

If design is how it works, then shaping should consider design through a holistic lens.

• Surface: How should this look?
• Structure: How should this flow?
• System: How should this function?

These are the Design Levels. Understanding them helps integrate design into a more holistic system of building, where each level surfaces a new perspective to create an ideal experience.

Surface

Most design work expends too much energy on the look and visual aesthetics. This is the paint and decorations in the house. It makes it feel homier, but it won’t help when a gust of wind blows the house down. While a great-looking design elevates the product experience, over-optimizing for this too early is a mistake.

So when do you polish the design?

When the actual building takes place. When the engineers are writing code and working software is emerging in the work. The surface details should come to life in the same context in which users will experience them.

The real humans won’t use your Figma mockups, but they will use the live product.

One caveat here is when you’re trying to cast vision. A sketch won’t do. You need something with more punch to sell a direction and get everyone aligned.

This is just like the concept car.

In the automotive industry, the concept car originated as a way for automakers to showcase new styling, innovate technology, and futuristic ideas without the constraints of mass production. A concept car is not designed to think through details, or even closely resemble the final product. They are meant to cast vision, gather feedback, and generate excitement.

When you’re integrating design before the build, this is the way to do it. Use it like a concept car, but don’t be fooled by this exercise. It won’t eliminate unknowns when the work begins.

The three elements of surface design are:

1. Visual Style: Color, typography, spacing, layout.
2. Component Design: Buttons, cards, form fields, UI patterns.
3. Micro-Interactions: Hover states, animations, feedback cues.

Structure

If the surface is like the paint and decorations in the house, then the structure is the layout—it’s how you flow between rooms. It’s the movement, the experience.

This is typically where I start when shaping. It’s the level of design that allows you to see the connections in the work without the mask of surface-level detailing.

You create flowcharts or breadboards, which is a Shape Up concept borrowed from electrical engineering, where you have a components and wiring of the electrical components, but without the industrial design. This allows you to sketch the structural design without the visuals.

A breadboard in the software context is a sequence of screens and their affordances, which are elements a user can act on (buttons, inputs, copy). It’s a great place to start when you want to figure out how the experience flows.

I like breadboarding because it’s an easy concept to represent in different contexts. You can sketch them on paper, use stickies in a FigJam board, or just outline them in text.

The three elements of structural design are:

1. User Flows: How users move through states, screens, or decision points.
2. Navigation Model: How the interface is structured (e.g., tabs, sidebars, routing).
3. State Transitions: What changes, when, and why (e.g., draft → submitted → approved).

System

The system design is like the foundation of the house. Without it, everything crumbles. This is where you go deep on the underlying technical details to design how the system works.

The structural and system design are the most critical parts of the shaping process. You need to understand how the experience flows and how that is reflected in the code itself. If you have the technical knowledge of how the code works, you can do it yourself. If not, you can interview an engineer to gain an understanding of the current system design. Doing so will help you think through the solution, and build domain knowledge to shape more of the work.

The structural and system design are bi-directional and symbiotic. When one is poorly designed, the other will suffer as well. You need a seamless experience enabled by a well-architected system design. And only a quality system design can create a seamless experience. While you should treat them distinctly, their relationship is important.

The three elements of system design are:

1. Data Models: The entities, attributes, and relationships.
2. Code Architecture: How services and modules interact; where the logic lives.
3. Interaction Logic: Validation, state transitions, permissions.

Level Up

When you think about design, think about it holistically. Don’t expend your thinking energy on the surface design. Think about the flow and the foundation, the structural and systemic.

The deeper design pays dividends when the work begins. Upstream thinking informs downstream decisions. A high-fidelity mockup with pretty surface design is a facade of thoughtful design. It’s only when you look at the structure and the system do you understand how the solution will work. And even with this design thinking, the inevitable unknowns in the work still surface. Be adaptable during the process, but know that early thinking improves later decision-making.

The shaping process works best when multiple perspectives are represented in the work. It’s about design, engineering, and strategy. Each is independent, yet fully integrated, symbiotic, and holistic. Infuse your design thinking with all three to create intentional solutions.