Hi there! I'm Noah, longtime MetaLab blog reader, first-time writer. I started out in product design before carving out a niche for myself as the team's very first Design Specialist. I typically stick with iconography & illustration these days.

Why am I talking about icons, exactly? Icons are like microcosms of a product or a brand. Through what they depict and how they depict it, you can glean a lot about a product, how it functions, and how interacting with it might make you feel.

So, what is an icon? And what are the icon basics?

There’s a lot of interpretations of the word icon floating out there in the design world, but the most helpful for our purposes comes from illustrator extraordinaire Meg Robichaud:

"An icon is a symbol … representing a larger idea. It’s one of those things that you shouldn’t notice when it’s done really well, but always notice when it’s done poorly (which is a lot of the time). Above all else, an icon should be something you can easily interact with. It should be intuitive. It should concisely capture the idea that it represents."

Of course, this can cover a lot of ground, so in the interest of time (and our considerable workloads) we’ll just be focusing on UI icons in a mobile product. But this is also where you can really let an app’s personality shine!

And a fantastic opportunity to do just that arose earlier this year with Indigo, a fast-growing startup that brings Silicon Valley tech into the world of agriculture. Their existing marketplace connects farmers and buyers, and we partnered with them to expand that experience to mobile.

Groundwork

Why icons matter

So why isn’t more care given to icons? A lot of products treat them as an afterthought (if they're thought about at all), and sometimes don't change at all from wireframes through final deliverables. Now not every project calls for custom icon work. But relying on a stock icon library is the same as relying on stock photography; it might functionally do the job, but it’s generic, unownable, and doesn’t speak to a brand/product’s particular strengths & quirks. And we quickly learned that in the farming and agriculture space, well-made and cohesive icon sets are hard to come by.

If you're trying to sell the idea of custom iconography to a stakeholder, here are a few more concrete rationales you can provide:

• The set you have isn’t extensive enough or expandable (e.g. missing or inconsistent rules)
• The product is using uncommon or new visual metaphors. Maybe it’s workflow-heavy and has some tool functionality that hasn’t been represented before.
• There are some funky UI or typography choices that should be paired & reflected in the iconography

Strategy & tone

Laying out a baseline strategy with Indigo and our internal project team was vital to hitting the ground running. The sooner you can develop a shared language of what you’re trying to say and how to say it, the fewer frustrations you’ll run into later.

A big part of our attack plan when we’re starting new icon work is performing a comprehensive audit. An audit is the process of going through the product to figure out what it needs, and identifying potential areas where product icon or illustration could elevate the experience.

In a couple days, we figured out an itemized list of every icon/illustration opportunity. Each entry included the existing icon location, function within the UI, metaphor/style notes, target resolution(s), priority, and other considerations (like active states).

Visual metaphors

Once we knew what we were dealing with, we set to task figuring out how to make this product stand out — how might we design iconography that not only differentiates Indigo but also supports its users?

For inspiration, let’s look at a couple good examples of thoughtful & specific approaches in their respective spaces: Twitter (though Twitterrific did it better first) and Spotify:

Twitter puts a fun spin on the ubiquitous home icon by rendering it as a jaunty birdhouse. And through the use of just three simple lines, Spotify suggests the old cubby shelves in your parents’ basement full of vinyl records.

For Indigo, various farming imagery naturally came to the forefront, but we limited it to some high impact areas like tab bars and onboarding. The users know what they’re doing—they don't need hay bales and irrigation equipment shoved in their faces from all quarters.

Figuring out metaphors can be an ongoing process, and usually dovetails (if not entirely overlaps) with ideation. Everybody’s got their own way to muddle through this;  when I’m starting a set from scratch, I try to draw as much as I can on paper to get my thoughts out.

Your mileage may vary with this, of course. Sometimes, I dive right into the computer if the style is already pretty well-established or I’m expanding an existing set that already has rules.

Style

“The start of any design project is overwhelming, and finding restrictions to impose on yourself can focus your attention and lead to more creative solutions. By considering an icon’s context, you’re immediately able to tick off a number of decisions and direct your focus accordingly.”

‍Designer Alex Griendling is right. One of the things I hear most often about icon design is “That sounds miserable. There’s so little space!” And while the second half of that sentiment is true, embracing the inherent constraints can simultaneously do a lot of work for you, and free up your mind for new ideas.

Imposing limitations on yourself is one of the most valuable things you can do in icon design (or most design, for that matter). Not only will it save a lot of headaches down the road if you understand and plan for them, but it allows creativity to flourish once you've narrowed your scope.

Beginning with a set of aesthetic rules is a great place to start—so, on Indigo, we did.

Imposing limitations on yourself is one of the most valuable things you can do in icon design (or most design, for that matter).

Grid

The skeleton of every icon set is its underlying grid system. You’re probably aware of Google’s Material Icons, which are built on a 24x24 pixel grid. But other multiples of 8 are pretty common, from 8x8 up to 64x64 or more (though that often infringes on spot illustration territory).

For Indigo, we actually used four different grids:

• 48px for spots
• 32px for the tab bar
• 24px for more basic utility icons
• 16px for small indicators.

Visual balance

A discussion about icons wouldn't be complete without mentioning keylines. Keylines are guides that help keep icon sets visually balanced, regardless of the orientation of their component parts.

Most icons are based on a handful of core silhouettes: squares, circles, vertical rectangles, and horizontal rectangles. There are, of course, variants on all of these; but keylines help keep your icons balanced when seen and used together.

For a quick example, let's take a look at a circle and square. Your first instinct might be to make their dimensions the same.

But we're dealing more with visual area here than with exact exterior dimensions—iconography is a lot like typography letter spacing in this way. At their target size and placement, how will these two geometric shapes stack up? The square will invariably feel heavier because its geometric area is larger. A quick way to test this is to add a blur to your icons, or un-focus your eyes.

So we used keylines to find something a little more balanced:

When dealing with different shapes at such a small scale, shaving off a couple of pixels can make a big difference! These are just basic shape guidelines, of course, but they can provide a good foundation for icon consistency.

Now let’s take a look at how those shapes translated into some glyphs for Indigo:

Keeping those base shapes in mind is important, since using a good mix of them (especially in persistent elements like tab bars) helps users cut down on cognitive load and understand them more quickly.

We could write a whole separate blog post just on accessibility best practices when it comes to icons (and we will!), but for now let’s continue on with the mechanics.

Level of detail

Before we get too nitty-gritty, level of detail is one area where a lot of icon designers stumble (myself included). It’s very tempting to cram as much content as you can into the space, especially if you’re working at an enlarged icon size and without surrounding screen context. It's always easier to add elements than remove them, so err on the side of simplicity, and constantly check icons against their intended context.

For example, this icon looks pretty good if you’re working at a blown-up size like a lot of folks do. But when you double-check it against its intended target context (12px in this case), things can get pretty muddy and illegible quickly when adjusting to different sizes.

Designing for the smallest size and scaling up, though, opens a wide range of possibilities. As the size increases, the potential for added detail and styling increases as well. This is not only a way to inject more brand personality, but can also perform double-duty as both icons and spot illustrations.

Since Indigo is a product that a lot of folks would be using outside in bright sunlight, we opted to trim and keep our icons as clear and as open as possible.

Rules & consistency

Time to get granular. There are a few essential things to consider when building a set or checking for inconsistencies:

Element size

It can be helpful to start with whatever the smallest element in your icon needs to be, and add detail from there. Cramming more elements in is always tempting, but rarely pays off. For example, I know that I want a dollar sign on this price tag, so I start there, get the stroke vertices where I want them on the grid for legibility, then build the tag around it.

Dimension & perspective

Should your icons have dimension or perspective baked in? It's something that can definitely set them apart, but make sure the treatment is spread around consistently. If you’re doing a side view forced perspective to show an open file folder, think about how that impacts the entire set. Again, we leaned toward flat icons for legibility and expandability.

Overlaps

Speaking of depth, you can’t always communicate complex concepts with singular elements or objects. A lot of icons rely on juxtaposing two or more elements together, sometimes even on top of each other. Do elements fit snugly together? Is there a stroke break for extra impact? Maybe elements further back are a different color or fill? Ask yourself these questions before you consider an icon done.

Strokes, corners, & terminals

Nothing makes an icon stick out like a sore thumb more than mismatched corner treatments and stroke weight. They shine like a beacon from a mile away and say “We don’t belong here!” Very small changes can make a big difference, and can vastly influence an icon set’s character and cohesion.

You probably noticed by now we used 1.5px strokes for Indigo. This was to reinforce of sense of lightness in a very info-heavy interface, and to reflect some typographic choices. If you’re guaranteed that your icons’ context won’t include low-density displays (like on desktop web, where where some folks have older monitors), then you’ve got more wiggle room when it comes to stroke weights. But since we knew these would be used exclusively on mobile, exact grid alignment wasn't as necessary to legibility.

That may be where we landed, but we did some exploration & testing before arriving there. Check out how some minor differences can change the vibe of the entire set:

Color & states

This is a big one, not just from an accessibility or active/inactive standpoint, but also as a way to make your icons distinct from other, run-of-the-mill sets. One color is classic and easy to implement, and this is the route we took on the tab bar icons for Indigo. We played around with some complicated, duotone treatments but simplicity and legibility won out in the end. We did use filled states for active tab bar icons though—going above and beyond simple color shifts to help users know where exactly they are in the product.

Documentation

Writing down your new rules help make sense of your icons for yourself, but they're an absolute must if you're shipping an MVP set that will need to be expanded upon later. Since you probably can’t guarantee that you will be helming that ship, guidelines are critical to setting up clients or another team for success.

If you have rules, you can also determine when it’s appropriate to bend or break them. (Make sure you document that too, along with your reasons why).

That's all, folks! For now, anyway...

While by no means is this an exhaustive list of pointers, what we did for Indigo might help set you up for success in your next icon project!

However, the mechanics of form and style are just the tip of the iceberg. Always remember that UI icons like these are just that: UI. They have a functional job to do within the larger product—and if overly-styled fanciness or obtuse metaphors get in the way of that job, then they've failed.

Clear beats clever every single time.

For those of you that want to dig into icons further, you can check out my Figma worksheet, which most of this material is based on.

Now that you have a strategy and your differentiators in place, it’s time to draft the entire product experience into a single document. This is a key step in the product lifecycle called product definition. 

One of the key deliverables that comes out of the product definition is the product blueprint. Your product blueprint allows you to visualize the entire product service on one page. This helps manage its complexity, including the actions and touchpoints of all the actors, key features, technical dependencies, and operational requirements.

Behind the scenes, there are several key assets that power this product blueprint: 

This view helps to ensure your team is aligned on the critical pieces of success.

That being said, it’s easy to go overboard with product blueprints, so don’t boil the ocean! Focus on the few critical features and components that will make a big impact for your customers.

Remember to trust in yourself and the research that has been done. Your customers don't always know what the right solution is for their wants and needs. That's why it's your job to consider their needs in the context of your product's potential and develop an appropriate blueprint that can scale in the future.

We saw earlier that you’re going to be spending the majority of your time in the product definition/design, testing, and build phases, which means you need a talented team of skilled makers. 

This may seem obvious, but when building the right team with the right chemistry within your budget, there are a lot of factors to consider. How long will it take for the team to gel? Do you stick with who you have? When should you contract vs. hire?

Too often, we see companies spend big budgets hiring a ton of great developers and designers. They throw them onto a project expecting the product will be delivered fast only to find the team isn’t hitting their milestones. Why? 

Teams typically struggle to get going immediately because of differing working styles, personalities, mindsets, and honestly… sometimes ego. That’s why you shouldn’t focus on individual hires but on the team as a whole.

If you have time, budget, and desire to invest in the future culture of your company, you have to invest time to build the team dynamics. We find that it typically takes 4-5 sprints for a team to find its groove — approximately four months, or more.

If you are an early stage startup, and don’t have a lot of time (six months or less), but still want to get a product out there quickly, we recommend hiring a pre-built team of skilled makers who have launched several products together. 

The key takeaway is to not waste all of your time and money hiring. Building a successful team takes time and cycles of members working together to hit their stride. When necessary, augment with experts to help your team grow, add a skill, or just simply to outsource a function. It ultimately comes down to how you want to allocate your resources.

Don’t reinvent the wheel… and don’t build everything from scratch! Accelerators are existing tools and technologies you can leverage or integrate into your product.

Some of the tools that we use to help accelerate the design process to create and test out designs, concepts, and prototypes with users include Figma, Framer.io, and even Typeform.

For development, we use many different tools and platforms on our projects to help accelerate the product development lifecycle and build products that can scale to meet customer demand.  Several of the most popular and impactful integrations and platforms used by our teams include:

AI is everywhere these days for a reason. It’s powering brand new ways to get work done and being incorporated into almost every tool we already use to make workflows easier. From content creation to scheduling, we are seeing tools popping up for everything. Here are a few that can help accelerate product development:

There are important considerations to keep in mind when using any AI tool in a responsible way. Sensitivity of data uploaded into any of these systems and the originality of the content is a big one.

Policies and regulation with AI are still being figured out, so it’s wise to exercise caution when setting guidelines for your product teams. Leverage these tools as inspiration or starting points for copy, as pieces of a larger composite for images, or to get as specific as possible with prompts in order to generate something unique.

Product development succeeds when teams develop a culture of continuous learning. This is fueled by rigorous testing, analytics, and strategic iteration during key phases of the product lifecycle.

In the discovery phase, we immerse ourselves in understanding our potential early adopters' needs and motivations (see #validators). Alongside this, we work with clients to think through solid analytics strategies. This step instills a data-centric culture from the start, setting the stage for ongoing learning and adaptation. 

By aligning qualitative user insights with a framework for quantitative data capture, we ensure the product strategy we craft will continually evolve to meet user needs.

As we pivot to the alpha and beta stages, the emphasis turns to iterative improvement. We engage early adopters in testing programs. Their first-hand experiences provides invaluable feedback to detect bugs and potential enhancements. 

This feedback, bolstered by real-time analytics data, drives our evidence-based refinement process, prepping the product to be market-fit.

By investing in this cycle of continuous learning — persistent testing, data-informed analytics, and strategic iteration — we embrace a user-centric ethos in product development. This equips our clients to not just navigate, but also thrive.

‍

When Ravi Mehta (former CPO at Tinder/Product Director at Facebook) was working on the first iteration of his personalized coaching product, he validated it quickly with a paid offering he pieced together with a number of low-code tools.

Leveraging learnings from a community of early adopters, he partnered with MetaLab to help enhance, refine, and evolve the product into the Outpace app.

Outpace launched earlier this year. It provides guided programs for personalized career development designed to level up with the support of a one-on-one AI coach.

We are in a post-WeWork/Theranos era of founders promising growth without showing any profit. You need to ask yourself "What do we need to show investors?" Users are great, but how is this actually going to make money?

You have to show real numbers and an actionable monetization strategy. This means outlining your marketing and growth strategies — and the mechanisms that will bring in not only revenue but profit.

Revenue strategies can vary greatly, but the following are a few of the most common buckets of digital product monetization mechanisms:

There are many ways to monetize a product, and this is by no means an exhaustive list. The right way is the one that will resonate with your audience, so feel free to experiment and be flexible when choosing a strategy.

We’ve been supporting Modular with the release of their new AI platform and product offerings. Early in our engagement, they asked us to design a marketing site to help them grow and segment their sales pipeline. This allowed them better understand, and target, existing and potential users. We took those early learnings to ensure the product landed with their audience and supported their revenue targets.

The product lifecycle doesn’t end with a launch, it goes far beyond. Once you begin to get a better understanding of your customers and their purchase behaviours, it’s vital to adapt, being flexible with pricing, monetization strategies, and identifying unexpected revenue drivers. 

For example, you may see that your primary offering for your SaaS tool is slowly gaining traction, but over and over customers are requesting access to an API for a specific data flow. You may be sitting on a large additional untapped revenue stream and there could be more. Meet your customers where they are!

It helps to consult the people who’ve been there before. There are a million people on LinkedIn who are trying to sell you a service or product that you may not need. There are critical steps that could cost you if you miss them. There are shortcuts you may not even know exist. Trusted advisors can help you navigate this and more. There is just no substitute for experience.

Find seasoned product leaders, designers, or engineers who have launched products in the past and will be familiar with the nitty-gritty details. They will have the perspective to help you find the forest through the trees. You want people on your side who can make sure you are spending your time, efforts, and money on the right things.

These are the Product Survival Kit items that we recommend to anyone who is creating and launching a product in today's climate. It's a mix of techniques, processes, people, actions and tools that we've seen provide success to many of our clients, colleagues and partners out there. But remember — each product is different, so find the mix that worst best for you. 

It may seem daunting but it is possible to successfully bring your idea or product concept to life today.  This may even be the right moment to go after it. Companies who launch useful and impactful products during economic downturns have a history of surviving and thriving. The next one could be you.