“In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.” – Steve Jobs
Steve Jobs had an innate instinct for creating and identifying effective design. One of the most common reasons why Apple users love their Apple products is because of the “design,” that “fundamental soul” of the product that makes them “just work.”
However, “effective design” is not just design that is visually appealing.
Effective design can be pretty, but a pretty design does not guarantee that it is effective design.If you were to deconstruct what Steve Jobs meant when he referred to the “fundamental soul” of the product, I think qualities of effective design, these “successive outer layers of the product or service,” would follow what I call the “Design Stack.”
Much like how there is a tech stack that has layers of components that power an app, there is an analogous “Design Stack” with individual components that powers the way someone experiences your product.
I believe that the structure of a Design Stack will give you clarity around your goals for why something in the design should be the case, rather than just designing something because that’s the way it’s always been done before, or that your “gut” tells you to.
Here is a high level outline of the successive layers of the Design Stack:
- Business Goals
- User Goals and Psychology
- User Flows
These components are all tied to each other – they drive decisions in each of the other components.
1) Business Goals
Define what you want to accomplish as a business and the success metrics associated with success. This could be something like:
- x% market share
- $y revenue per month
- 25% DAU/MAU (engagement)
- 5% conversion rate from a landing page (acquisition)
It is important to keep your business goals in mind as you design so that all of your design decisions help accomplish your business goals. This might not seem like “design,” but it is an important part of design thinking.
2) User Goals and Psychology
We are all psychologists when designing.
In addition to the business goals (#1), it’s important to understand the mindset of your target user. What are the different personas of your users, and what do they want to accomplish with your product?
- What are their goals?
- What is the status quo to accomplish those goals?
- What gestures or use cases are they used to?
- What is the frame of mind or context of when they will be using your product?
- How do they feel when they use this? utility, happiness, nostalgia, aspirational, etc.
When forming these user goals, draw from your own personal experience, but also do user studies on the problem you are trying to solve to form a full picture of how people will interact with your product. Understanding the psychology of your users is at the core of user experience design.
3) User Flows
Next, based on the user goals and psychology (#2), what decisions and steps do the users take in your product?
Map out these user flows like a tree with branches.
It is very important to start here before going to the wireframes because you can visualize the context in which each view exists. You can answer questions like:
- Are there too many steps to sign up?
- Is there information overload on a view?
- Is the first time user experience clear?
- Does this view drive natural viral engagement?
- Are there user flows that a user is most likely to abandon your product?
There are many tools out there, but recently I’ve been excited about this new tool called POP. It lets you wireframe on paper, take photos of them with your iPhone, and simulate user flows without actually building the product.
Also, UX Archive is a good resource for a collection of popular iPhone apps’ user flows.
Now we’re getting somewhere. The wireframe is what is often seen as the natural starting point for a “design.”
A wireframe is a schematic or other low-fidelity rendering of a computer interface, intended to primarily demonstrate functionality, features, content, and user flow without explicitly specifying the visual design of a product. – “Wireframes,” Konigi
The goal of the wireframe is to determine the information architecture of the product, to best accomplish the user flows (#3).
Don’t try to design how the product will look in your wireframe. You want to focus on the interaction design, not the visual design. This is what you should accomplish in your wireframe:
- The kinds of information displayed
- The range of functions available
- The relative priorities of the information and functions (hierarchy)
- The rules for displaying certain kinds of information
- The effect of different scenarios on the display1
Finally, after accomplishing the previous layers of the Design Stack, we are ready to tackle the mockup, which focuses on the visual design of your product, how it looks, how visually appealing it is it is.
Whether something is visually appealing is highly subjective, so I won’t go into great detail on what this looks like.
The general guideline that I would recommend here is to keep with the theme of this post: make sure that your visual design accomplishes your goals in all of the previous steps of the Design Stack: your business goals (#1), user goals (#2), user flows (#3), and wireframes (#4).
I’ll add on to the Design Stack the prototype of your product because the translation of a product’s essence from a static mockup to a functional product is just as important to the user experience design.
Here are some examples of how building a prototype can add more nuance to your product’s user experience. These are all design decisions that you need to take into account.
- For an iPhone app, should tapping a button swipe left-to-right or bottom-to-top?
- How important is speed when loading new content? Should you have a loading indicator for a particular view? Making your users wait too long can cause low engagement, which can affect your business goals (#1).
- Should you reload the entire page or refresh only an element of the page?
Depending on the situation, some designers like to skip the mockup stage directly to the prototyping stage and come back to the visual design later.
Throughout this whole stack, you should be measuring and (in)validating your assumptions. I’ll cover this in a separate post.
The Design Stack creates valuable dialogue around design decisions that without this framework can many times seem superficial or not concrete.
By framing your design decisions this way, you can not only be a better holistic designer, but also help convince non-designers (and even other designers) of the value of your design and process.