*You can find the TL;DR at the bottom of this post.*

This is going to be an unusually long post, but I promise it’ll be well worth reading from beginning to end.

As a UI/UX designer, I’ve had the opportunity to contribute to the design and development of products shipped by early-stage startups, serial entrepreneurs, and fast-growing scale-ups.

It’s always an exciting process that comes with its fair share of ups and downs—usually more downs than ups, but the small wins consistently lift everyone’s spirits, regardless of the team’s size.

I’ve only worked once as a full-time UI/UX designer at a company. The rest of my design career has been as a contractor, offering the versatility and freedom I value the most.

In addition to the typical benefits of freelancing, I’ve also been privy to the mechanics involved in both the development and marketing stages of new rollouts or entirely new products.

At a certain point, I observed how design can directly impact a product’s appeal and user retention.

Surprisingly, the elements contributing to a product’s design success are often overlooked. I believe this occurs because, in a project, things tend to be unnecessarily complicated due to the perceived difficulty of achieving success.

This sentiment usually trickles down from project stakeholders and can become a significant detriment to a product’s success.

I can’t tell you how often I’ve come in to fix designs that made absolutely no sense or made the product look like it launched 10 years ago.

There are also instances where the product designer spends too much time on research and Information Architecture (IA) but not enough time making the UI designs intuitive enough.

Based on my experiences, several elements can help a product look appealing enough to attract early adopters, which, for the entrepreneurs in this sub, translates to new paying customers.

Here are the 4 essential design principles you should strive to meet before shipping your product.

1. Think like a mailman

When a mailman delivers mail to your door, they’ll open your mailbox and slide in the mail. If the mailbox is stuck or broken, they might ring the doorbell and wait for someone to open the door to hand them the mail.

If the bell is broken, they might knock on the door or a window to get anyone’s attention inside. If still no one opens the door, they might drop the mail right in front of your door.

The point of this analogy is to demonstrate how a mailman focuses on one solution at a time and does not bother themselves with any alternative options that exist at the moment they’re trying a specific solution. The act in which they engage is simple, and the manner with which they go from one possible solution to the next is based on logic. It’s highly intuitive and highly effective.

You need to apply this to your users as well. Consider them mailmen. They need to achieve a simple goal as part of a larger objective. You want to make it easy for them to try one solution (feature) before the other, and to have them see the logic in it.

Just because you have several fancy features doesn’t mean you have to display them all on one screen, even when they all relate to a specific part of your product.

The best products can get a user from A to B in the fastest way possible without many distractions. Determine a hierarchy from the most essential to the least essential features.

Prioritize the ones you deem most essential, give them the most real estate, and use logic to make the secondary features available in an intuitive way, through gestures or active engagement, without cluttering up a screen.

A good example of this is the way you can write and publish an article on Medium. The only focus on the screen is the cursor that’s ready for you to write the actual sentence you’re about to write; the rest is hidden from view.

A bad example of this is using Wordpress to create a blog post.

Make the experience sequential, logical, intuitive, and spacious. Keep the environment clean, just as you would a desk. Don’t be afraid of introducing more steps for users if it means the majority can get things done faster and easier within the initial step. If anything, introducing more steps is more skeuomorphic and therefore more intuitive.

2. Styles are tools

Please, for the love of all that is holy, do not use more than 1 typeface. Sure, you can always use different fonts to establish hierarchy (semibold for headlines vs. regular for body), but using different typefaces in the same product creates a disconnect between elements, breaks consistency, and prevents a unified product experience users can differentiate from other products they’re using.

Using a single typeface saves you time in trying to make several match each other, and if you’re going with premium typefaces, it will also save you costs.

Don’t get me wrong—there’s absolutely nothing wrong with using a pair of different typefaces for your landing pages to spice things up and get more creative. But in your product, focus on a single typeface to reinforce cohesion.

The same should be applied to your color scheme. Pick one primary color and one accent color. Use the accent color like an actual accent color, and not as an alternative to your primary color.

Colors play a huge role in your brand identity and product experience. Picking the right set of colors helps users mentally remember the product, which makes the user experience easier.

Again, you could go a bit more creative with landing pages, but for the actual product, you don’t want to distract a user with a whole lot of colors or a lack of hierarchy in the colors they observe.

My best advice is to go for a simple typeface and neutral colors. You can still make everything look good and introduce a bit of character to your product. It’ll also make it less trend-reliant, which means the UI can last longer without needing a visual update.

Use styles as a means to make your product more practical. Secondary to practicality is clean and original aesthetics, which can easily be achieved when the product itself and your design system come together in a coherent way.

3. Literalism before icons

Because icons can sometimes make an interface look better, many designers have become too reliant on iconography in UI design. Don’t get me wrong—icons can be helpful in saving space and encouraging intuitive interactions.

However, just like eating too much broccoli can still be unhealthy, too many icons will lead to an adverse effect where they no longer become helpful; they become an obstacle to a user connecting with a product.

Icons are a figurative way to inform a user there’s something specific they can do by clicking it. Icons can also be used to reinforce a text with something that evokes a specific emotion.

And while some icons are super clear in what they stand for, to the point it’s quite literal (e.g., a flag icon can mean “flag this item” or a right arrow can mean there’s another item to the right), many creative icons are figurative and not as clear, which means a user would need to first figure out what it could mean by clicking on it.

This is fine, as once they do that and see where it leads them, they have a good understanding of it. However, where it becomes too much of a problem is when there are too many icons involved throughout a UI, and a good portion of the user’s time in-app is spent on figuring out what the icons do.

That’s when the user starts getting annoyed, thinking the interface is being too lazy in using figurative signs instead of literal texts that they can understand instantly.

Furthermore, because icons are visual cues, they can also overwhelm a user in needing to process all the visual cues at once.

The best way to incorporate icons is to prioritize being literal. Since you’ve followed principle 1 (think like a mailman), adding text-based action buttons or links makes the translation of your IA to an interface even clearer, practical, and more pleasant to experience, leading to higher engagement and user retention.

A good example is a button with the text “Invite Friends” instead of just having a button with an icon symbolic of sending invites. You could make it more emotional by adding an icon before it, if the button remains proportional to the screen’s hierarchy.

A bad example is using a plus icon to indicate they can add or create something when you have multiple different types of items a user can create. In that case, it’s best to be literal and write “Create board” or “create team” so users instantly understand.

Use icons wisely but prioritize being literal with your UI elements.

4. Hierarchy is order

Once you’ve made your product easy to use, navigate, remember, and understand, while ensuring it all looks and feels clean, you’ll automatically have a premium-looking UI that’s appealing to users. It’s a direct consequence of applying these principles. Nice aesthetics become an effect, an inherent result of the underlying fundamentals.

But to really bring it home, ensure there’s a clear design hierarchy between aesthetics, function, and experience.

Contrary to most conventional understanding, especially among designers, aesthetics can never be the highest goal within the design hierarchy. Design itself translates a concept into a usable solution through elements users can engage with.

This means we have to think in reverse, especially if you’re a developer needing to design your product yourself.

These are the three questions you need to ask yourself, in this exact order:

1. What do I want the users to experience?
2. How do I structure the functions (features) to enable the aforementioned experience?
3. With which look and feel do I enhance the structure of functions and the experience I want to create?

You can incorporate your research, like user interviews and market research, to answer these questions more intelligently.

Say I want to create a new search engine for the web and I’m about to ask myself these three questions. Here’s how I would answer them:

Instant gratification through easy and focused digestion of the most relevant information served in small bites, one at a time.

1. Each search produces a single result, presenting a short contextual summary of the top 100 web results most relevant to the search query. From there, users are shown the best recommendation (web result) and its relevancy score in relation to the query.
2. A futuristic look and feel symbolizing computational power and accuracy.
3. Of course, there are unlimited ways to answer these questions. But by focusing first on experience, then function presentation, and lastly aesthetics, you’ll naturally establish a built-in hierarchy where the user senses how you’ve prioritized what’s essential to them rather than how it looks.

Notice that there’s no principle in this list that aims to dictate what’s “pretty” or not. That’s because styles come and go, but the fundamentals never change.

I want to clarify that these principles are simply the ones I follow based on my past experiences. There are other principles or frameworks one could follow as a startup or solopreneur to achieve a similar result.

I also did not aim to define for every designer or developer what good design is or isn’t. My goal is to help you make it easier to design your product, not only to find your users more efficiently but also to optimize and maintain higher user retention.

I’m quite passionate about it myself. That’s why I started my UI/UX as a subscription service, taking care of designing new products for startups, serial entrepreneurs, and scale-ups.

I charge an affordable monthly fee, and in exchange, clients can request unlimited designs on-demand.

I hope this post makes sense, but feel free to ask questions, raise concerns, or challenge my principles. I’d be happy to engage in a discussion with you.

Thanks!

TL;DR

As a UI/UX designer, I’ve worked with startups and scale-ups, where I was able to experience and see the significance of design in product success. Four design principles stand out:

1. Think Like a Mailman: Prioritize simplicity in navigating features, focusing on essential functions first and presenting secondary features intuitively.
2. Styles Are Tools: Use one typeface and limited colors for consistency. Reserve creative styles for landing pages; keep the product simple and practical.
3. Literalism Before Icons: Limit the use of icons; prioritize clarity over visual symbols. Utilize text-based actions for better user understanding.
4. Hierarchy Is Order: Focus on user experience, function structure, and aesthetics in that order. Build a design hierarchy around user essentials.

These principles prioritize user-centricity and practicality over aesthetics. They foster efficient design, user engagement, and retention.