The Platform Empowering Analysts Worldwide - How Marvel Handoff transformed Mode’s design to development communication

Mode employee’s working in open office space
  • 1,260


    on Marvel prototypes between design, product managers, engineers, and marketing

  • 140


    spanning various product areas and marketing functions

  • 3


    of time saved per project with Prototypes and Handoff

Industry: Data Analytics
Key Feature: Collaboration, Prototyping and Handoff
Locations: San Francisco, New York

Mode, the data science and analytics platform was launched in 2014. It was built by three co-founders who had spent most of their careers building and using analytical tools. Mode’s platform combines a powerful, web-based SQL editor, R and Python notebooks, and visualization and reporting automation tools. Mode’s mission is to empower data scientists and analysts worldwide.

Mode’s fast-growing team of more than 70 people includes Sam Novak, their Senior Product Designer. Sam spoke to us about Mode’s business, design process and work with Marvel.

  • Person working with charts and analytic tools
  • People working with charts and analytic tools

“Mode’s goals right now are ubiquity and efficiency. We’re exploring how we can reach and help all data scientists and analysts, and how to make our tools more performant and reliable for our growing customer base.”

Recently, Mode restructured its product teams to help achieve those goals.

“We’ve moved to a durable team structure, which means we’re split up to each sit in centralised units which focus on particular areas of the business and user personas.”

Each team typically includes eight to ten people. Each team has a PM, a designer, backend and frontend engineers, and a dedicated customer success manager.

A meeting in Mode

How Marvel helps Mode work together

The adoption of durable teams has helped create more collaboration across Mode’s entire organization.

“We’re able to bring in the PMs and engineers very early in the ideation process,” Sam said. “Our PMs and designers work very closely at the beginning of each project to understand the problem, carry out user research or validate through wireframes. Marvel helps because everyone has access to the right projects and can give feedback on them as well.”

Primarily, Mode’s design team uses Sketch to build mock-ups, Abstract for versioning, and Dropbox to store their final files and assets. Marvel helps in three core areas: syncing their Sketch artboards to create interactive prototypes, communicating with developers, and coordinating asset libraries.

  • Developer uses Handoff with Marvel
  • Prototyping with Marvel at Mode

“One thing we’re working on is creating a low-fidelity wireframe kit with the new Marvel libraries feature, to make sure that all members of the product team have access to it. We’re hoping this will encourage our PMs to do more ideation, diverge on ideas and wireframe a range of different concepts. This is something I'm super excited about, as it means we’re not waiting around for higher-fidelity assets to put into Marvel when we just want to ideate quickly.”

Mode migrated to Marvel when their other tool’s feature releases began to feel like they had less emphasis on a designer’s needs. “We found that these platforms began to focus on areas which were solved through other tools we use internally,” Sam explains. “We really wanted to feel more empowered as designers to make these mock-ups as powerful as possible, to really sell the vision and story and to help validate these things through user testing.”

“In the process of switching to Marvel, there was such a personal touch around the sales process and everyone we spoke to. It really felt like another group of humans who cared and wanted to work with us.”

  • Mode employees working with analytics
  • Mode employees working with analytics

Introducing Handoff into their design process

Recently, Mode have been working on autocomplete features for their SQL editor, with a strong focus on making that experience as powerful as possible for SQL writers, their core users.

They used Marvel early on to lay out a number of different solutions. The problem was well understood internally and they had conducted competitive research to look at how other code editors handled this process.

Mode always includes Handoff in the final versions of their mock ups. “A lot of times it's just individual components,” Sam tells us. “It's super helpful to be able to send a Handoff screen and have the developers be able to just copy the hex codes and padding, and even the CSS rules.”

“Handoff has been a lifesaver.”

Before switching to Marvel, the team would type those values out by hand in Sketch. Though they dabbled with other tools like Zeplin and Invision, Sam tells us, “This was the first time we were able to have something work out of the box, especially something that was so integrated with our existing prototyping tools.”

  • “Handoff is actually the biggest thing that we use on the product team. I can′t tell you how much time it saves in terms of making redlines or helping go back and forth with front-end engineering about anything from padding to colours to font weights."

When it came to implementing Handoff within the team, Mode simply arranged a quick kick-off meeting and a short recap when they moved to the durable team structure. “It was super easy,” says Sam. “We’ve integrated it with Slack now, where we’ll link directly to those Handoff screens in addition to one link that points to the whole prototype.”

Another thing the team noticed during this transition was that their designers started using more accurate CSS terminology after getting used to seeing it in Handoff.

“In Sketch, a lot of terms don’t correlate with CSS, so being able to start using those terms like ‘border radius’ and ‘box shadow’ is great. It seems small, but it really helps with the communication between design and front end.”

Throughout all the changes Mode has made to achieve their goals of ubiquity and efficiency, Marvel has been there to support their process and make each transition as smooth as possible.

Make design your company's competitive edge.
Discover Marvel Enterprise