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

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.

“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.

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.

“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.”

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.”

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.”

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.