Motley Fool product suite overhaul

Simplifying and redesigning an unwieldy collection of 40+ digital subscription products.

My Role: Concept, Creative Direction, Product & Design Strategy
From: March 2021 - July 2022

The Challenge

Through years of adding on just one more subscription service, report, tool, or special one-off the experience for members of the Motley Fool premium service became bloated and unwieldy. Members did not understand what they bought, what they owned, or how it all should work together. That confusion resulted in cancellations and retention rates dropping.

User Research: Top pain points within the experience and potential solutions

My Role and Process

I was an instrumental voice in the planning and execution of the project. I led the end-to-end strategy, research, and design process — leading brainstormings, overseeing research, organizing the information and site architecture, and providing leadership for the design and development process.

1. Brainstorming Sessions

The overhaul and complete inversion of the product suite was primarily the brainchild of myself and the Head of Product. We met individually and with members of our teams as well as in sessions with leaders of Product, Tech, Editorial, Investing, Business Intelligence, Marketing, Commerce, and Legal. Our team diverged and converged again and again finding the best path forward.

2. Competitive Research

I led the investigation into how other companies both in finance and media handled having a growing suite of subscription products and how they kept the function and purpose of each clear to their subscribers.

3. Information and Site Architecture

I hands-on created low-fidelity flows and wireframes to illuminate the new experience at a high-level and to illustrate how the new shared structure would incorporate all the core and expected features found on the current individual service sites.

4. Customer Interviews

My team conducted quick user research with members at different levels from new to advanced investors. They tested different concept mocks, language and user flows to validate the product direction.

5. Prototypes and High-Fidelity Design

I directed my team of designers through the prototype creation process using Figma. I met with my lead designers every day and each designer on the team at least once a week. All designers on the project met twice weekly to review the progress of the work. I signed off on each update before it was demoed to leadership.

6. Demoing to Stakeholders

The new approach for product development focused on rapid prototyping and consistent communication with stakeholders all the way up to the CEO. This stage went extensively long as the company directors had a lot of explicit feedback. I directed my team of designers through the politics of the new process and met after each demo to review the notes and recording and discuss the next actions.

6. Evaluative Testing

With each major update in the prototyping process that impacted the site structure, user flow, or overall design, the updated prototype was retested with members to get qualitative feedback that provided both immediate updates and backlog items for future revisions.

7. Development Process

As work was ready to move to code I met regularly with the leads of Tech and Product Management and their respective teams to walk through the upcoming work, answer questions and help break it down into iterative steps and stories.

8. QA and Visual Testing

When ready to launch, I led the design team in visual testing each page to see that the elements developed matched what was produced in the Figma and each primary user flow to see that all the stages were seamless. Having led both design and development teams to use a shared component and pattern library made most of the development faster and the results were predictable as intended.

9. Improvements and Additional Features

Starting from the soft launch, I hands-on monitored the incoming feedback channels, providing direct solutions to users where possible, redirecting to the proper teams (Tech, Editorial) when necessary, and incorporating the new ideas into improvements the design team would fold into the next iterations of the prototypes.

High-Fidelity Mockups: Responsive prototypes of different portfolio pages

The Solution

To better serve our members, the 40+ subscription products and services and one-offs were all folding into one common site experience that broadened with more value as the member rose through three distinct membership levels. Not only does this make the entire experience easier for the member to understand, but it greatly reduced operational overhead for PMs, Tech, Editorial, and Customer Service.

The Impact

It took 18 months to launch the solution that upended 15 years of a legacy approach to product development (built on an outdated newsletter model). Early quantitative results show member satisfaction leaping up by 34% and qualitative feedback is peppered with grateful members who finally understand their product and its value.

The Motley Fool begins its next chapter with a modern web-based financial application platform organized for ease of use and increasing member success and retention.

Unlisted

--

--

Designing & developing websites since Web0. Writing mostly about design, CSS, product strategy, leadership, investing, and more. Thanks for reading.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Greg Robleto

Greg Robleto

Designing & developing websites since Web0. Writing mostly about design, CSS, product strategy, leadership, investing, and more. Thanks for reading.