We recently worked with Section, a startup operating in the emerging category of edge computing. We helped them design a Traffic Monitor, a new feature of the Section Edge Compute Platform. ‍

Hold up, what’s edge computing?

‍As The Verge puts it, “The word edge in this context means literal geographic distribution. Edge computing is computing that’s done at or near the source of the data.” In other words, Section distributes backend code to servers around the world. This is similar to how a content delivery network serves images from a server close to your location. 

TL;DR: Edge computing brings the server as close to you as possible, so everything feels super fast.

‍And, what is the Traffic Monitor?

‍Traffic Monitor is a dashboard for your apps running on Section. The new feature helps Section’s users understand the concept of edge computing by visualizing network health, and makes it easy to understand what’s going on all over the world at a glance. You can use this data to monitor systems, investigate issues, and manage environments. 

We worked closely with Section’s engineering team to design data visualizations and a holistic design system for the platform.

‍Here’s a quick peek at some of our work, plus three big lessons this project taught us along the way.

1. Successful developer tools prioritize utility

One major challenge of this project was developing a visualization that helps people instantly understand exactly what their edge stack is doing. 

To effectively summarize, you need to understand, at a very deep level, how things work. Only then can you know what data to highlight and what to de-emphasize. 

We pushed for as much simplicity in the experience as possible. The Section engineers let us know when something had been over-generalized, or the utility had become unclear.

Abstracting the right stuff

The map visualization is a helpful abstraction. It gives the user a bird’s eye view of the whole network. 

The map provides structure that makes the “edge” more tangible. We introduced the idea of “Regions” to simplify the UI. Each region may represent hundreds of localized edge nodes. These regions also illustrate where the edge is within the delivery stack. 

Finally, the data flow brings a sense of dynamism that resonates with users. The colors have semantic meanings (e.g., red is bad) that are like vital signs for the network. In a single glance, Traffic Monitor gives Section users a birds’ eye view of their environment.‍

In a single glance, Traffic Monitor gives Section users a birds’ eye view of their environment.

Enabling data manipulation and collaboration

Because Traffic Monitor collects data in real-time and records historical data, the product is useful for monitoring, trouble-shooting, and making other decisions about Section environments. 

We designed an immersive experience where users can interact with and understand traffic data. Instead of showing everything at once, users can interact with the interface to learn more about what’s going on and make changes.

Customized views enable users to tailor Traffic Monitor to their particular situation. Users can also share these views with other people to help pinpoint problems and identify root causes. 

We designed Traffic Monitor, some configuration tools, and other areas of the Section platform. Engineers rely on Section to manage their edge stacks. The scenario planning feature is modeled loosely after preparing for battle in a video game. The performance, cost, and security indicators (on the right) change whenever the user makes a configuration change.

2. Collaboration leads to better decisions

At MetaLab, we approach every project with a beginner’s mindset. Ramping up on edge computing wasn’t easy, but Section helped us understand the technology and its use cases as quickly and deeply as possible. 

For example, we learned that Traffic Monitor may be used in large-screen applications common in a Network Operations Center. This product would likely sit aside several other dashboards in a sort of “mission control.” 

Simplifying interactions

It’s easy to get focused on aesthetics, but the most important aspect was for the dashboard to feel familiar and helpful. So, we took inspiration from many places, including Netflix’s Flux, gaming platforms, and other developer tools. 

We knew early on that we would “show the world and the data traveling through it.” We tried a lot of options. Using a globe was an interesting approach, but the interactions proved far too complicated. The map (“flat earth”) option we eventually chose struck the right balance of accuracy and simplicity.

Expanding the design language

We worked closely with the engineers from Section who would eventually build the finished product. Our team took cues from other areas of their platform and explored several approaches to data visualization.

We considered our options on a spectrum of “mild to wild.” The middle—which supports light and dark modes—worked best. It’s inspired by developer IDE tools and introduces a secondary palette of greens, blues, and purples which helped modernize the platform.

3. Communication paves the way for smooth implementation

Throughout the engagement, we had weekly check-ins to share work and discuss next steps. We continually found ourselves asking how and what we should abstract away versus what needed to be emphasized. We debated when to simplify and when to expand. 

Our team designed the product in Figma. We also communicated asynchronously using Slack, Loom, and Notion. This mixture of real-time and asynchronous communication created time for deep thinking, good questions, and sound decision making. 

By the end of the project, everyone understood the design intent. 

Asking the right questions

At the heart of our weekly conversations with Section, we asked: 

• Is the design serving today’s problems?
• Where will the design go next? 
• How is the design feeding the future? 

Of course we wanted to deliver on the core needs Section came to us with, but we also were looking to go beyond that. We saw an opportunity for a design system that Section could reference to accelerate product development. 

Documenting the design system

Traffic Monitor is just one part of the Section platform. 

Our teams worked together to clarify ambiguous terms, establish priorities for each feature, and work through countless design decisions. We worked in sprints and chronicled our progress, decisions, and other details in slide decks. 

We delivered a design system built in Figma. It specifies foundational elements: color, typography, iconography, buttons, and form elements. The system also contains all reusable styles, components, and patterns used throughout the Section web portal. 

This system is extensible. It can be remixed, in accordance with usage guidelines, to build new features that rely on similar UI. 

Wrapping up

It’s not every day you work on an interface for engineers managing a whole new computing paradigm. This project was hard to wrap our heads around, as you can imagine. 

We learned three big lessons while designing Traffic Monitor:

1. Successful developer tools prioritize utility
2. Collaboration leads to better decisions
3. Communication paves the way for smooth implementation

At the end of the day, I’m most proud of the sense of holistic improvements the Section team has shared.‍

‍At Section, we’re on a mission to accelerate edge computing adoption through simplification. Traffic Monitor has provided this sort of “Aha!” moment for our customers to instantly understand how their edge stack is performing, while also serving as a tool to communicate the value that the platform is delivering for the entire organization. Beyond the Traffic Monitor, the UI kit provided by MetaLab continues to guide all of our UI decisions.
— Molly Wojcik, Director of Marketing

It’s great to move one specific needle, in this case… designing a new product. But, what gets me the most excited is when a feature we work on plays an important role in leveling up the rest of the product experience. 

That sounds like exactly what’s happening at Section, and I love hearing that. 

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.