Marfeel

Marfeel is a publisher platform that enhances traffic, engagement, and ad revenue. Over 700 publishers use its mobile features, which reach 1 billion monthly sessions. The company expanded its Software as a Service (SaaS) product by acquiring Newsroom, a tool for tracking and improving performance, enhancing the range of features.

Context

The main challenge was merging Marfeel's features into the new app design. We redefined the information architecture (features, user flows, navigation...) and built a design system that served the design team and engineers.

Marfeel Compass and Newsroom

Redesign example - Navigation

We examined the site architecture to enhance navigation between content sections, ensuring it could accommodate future scalability with additional features over time.

We grouped common area features, simplifying the product's mental model. The collapsible sidebar allowed the user increase the canva's white space. Additionally, we revamped all the iconography.

Main dashboard

We showed the most critical KPIs for publishers in 6 cards to give an overall status picture. Traffic medium sources, for instance, always use the same color tokens to help identify them across the product (posts, sections, authors, etc...).

Flowcard configuration

Flowcards promote content by using micro-segmentation capabilities and a no-code approach. Any editor can trigger a Flowcard to deliver specific content.

The Flowcard configuration had a complex setup. To keep the users focused on the creation process, I grouped the fields in collapsible steps to give a sense of progress, reducing frustration and visual complexity.

Detail page - Topic

A seamless visual hierarchy, and using the same design patterns across the tool ensured easy recognition of essential data.

Marfeel Design System

I defined and implemented the Design System for design and dev teams, managing documentation, design tokens, components, assets, layouts, and typography. We decided to adopt the new app design for many reasons:

• Better typeface for data visualization
• Cohesive design patterns
• More white space to focus on what matters
• Rounded edges resulting in a lesser cognitive load
• Pastel colors instead of intensive vivid colors

Some foundation and components from the Design System

Dev handoff

It was crucial to have a centralized source of truth for developers, ensuring that all features and iterations were always up-to-date. Thanks to Figma "variants," I matched the same props with the development components, so design and dev kept aligned.

I documented the Design System with Storybook, where developers had access to the complete component catalog and guidelines for a robust visual implementation.