Figma
HomeProductEngineeringEditorialArchive
Figma

Beyond mocks: co-designing journeys, diagrams, and more

Hareem Mannan
Hareem Mannan, Senior Manager, Product Design at Segment

Editor’s note: The following is a recap from a livestream presented by Segment’s Senior Manager of Product Design, Hareem Mannan, where she shares real examples of how Segment co-designs in unexpected ways with researchers, product managers, engineers, and others.

You can watch Hareem's full presentation on YouTube or grab a copy of her presentation slides here.

I want to start off by asking a somewhat existential question: what does it mean to design? When I describe my job to someone not in tech, people think I design “logos and stuff.” To demonstrate how design is more than that, I typically launch into a full explanation of the design process—how we generate ideas, validate them, talk to users, etc.

By the end of it, they come to the conclusion that I design "mocks.” It’s technically accurate. My main output is indeed “mocks.”

But as we all know, design is a lot more than designing mocks. It can be designing delight, joy, culture, process, and community. And designing these types of experiences relies on co-designing not just with designers but with teammates across your entire company.

To illustrate what this looks like, here are a few real examples of how we co-design (outside of just mocks!) with teammates at Segment:

Mapping our customers’ journey with UX research

To better understand the product experience for our users, one of our designers worked with one of our UX researchers to co-design this customer journey map in Figma. Starting from discovery and sign-up to ending with scaled implementation of the product, they took the entire Segment journey and mapped out the experience for different tiers of customers.

The designers and researcher supplemented each step of the journey with analytics and created an interactive prototype with clickable customer stories. This file has become the source of truth for whenever we as an entire Segment team need to reference our customers’ experience, and as an additional bonus, a great onboarding tool!

Diagramming our data architecture

Segment is a customer data platform, which means we have a ton of data flowing through our product. A bunch of our teammates got together—designers, researchers, customer success managers, and infrastructure engineers—to diagram all the data that’s flowing through our platform and highlighted how the data is being transformed, enriched, and cleaned.

This diagram has become a foundational component for how we build future products. It highlights where we are strong and where we should focus on improving, acting as another source of truth for our team at Segment as we think about these problems.

Retrospective on our design system

At Segment, we have an open source design system called Evergreen. Because many teams beyond design use our design system, it’s critical for us to gather feedback from other teammates—especially from our partners in engineering—about how Evergreen is serving us as an org.

A couple of weeks ago, one of our design leads led a retrospective to gather feedback about Evergreen. This is something we would have normally done in person, but now that we’re all remote, we jumped into a Figma file instead. Using virtual sticky notes, a team of designers and engineers wrote out pain points and mapped out areas of opportunities that exist with our design system.

Not only was this exercise useful, it helped us create a framework for next quarter’s OKRs and fostered a new way of thinking about our design system. Through this process, we were able to co-design a roadmap for a path forward!

Creating a sense of community

Co-designing can also help create a sense of community with others. In preparation for International Women’s Day this past March, our awesome Chief Product Development Officer planned on sending all our female-identifying teammates in EPD (Engineering, Product, and Design) a card of appreciation. In a world where we were remote, we couldn’t exactly do that the way we originally planned. So our teammates jumped into Figma to co-design and collaborate on meaningful notes to a fellow female coworker and express how they’d like to learn from them.

We do these types of virtual cards too for birthdays, now that we can’t celebrate these special occasions in person.

While some of the above examples may challenge your definition of co-designing, I hope it provides some ideas and inspiration around how might we co-design together beyond mocks.

With that in mind, what will you co-design? Who will you co-design for? What impact could it have? I’d love to hear how you’re co-designing these days on Twitter @hareemmannan!

You can watch Hareem's full presentation on YouTube or grab a copy of her presentation slides here.

Related Content

Nina Mehta |
How to pair design (and convince your boss to invest in it)
Mailchimp's Nina Mehta believes that design pairing can improve work quality and save time. Here, she shares how to structure it, plus tips for convincing your boss that it's a good idea.
Noah Levin |
Inside Figma: the product design team’s process
A deep dive into our product design team's day-to-day: meeting cadences, rituals, and culture-building exercises that help everyone stay connected and efficient.

Try Figma for free.