Redesigning the entire product suite

A case study in the colassal task of simplifying and redesigning an unwieldy suite of 40 products

The Challenge
Between the suite of 40 services and various tools and hubs, members are confused what they bought from The Motley Fool and how the different services and portfolios should work together.
The Solution
Overhaul the entire product suite reducing from 40 services to 3 distinct levels of membership each that builds upon the previous.
Results
A streamlined and intuitive product experience that is simplified down to four key sections that are all built around the top needs of the members.

The product design strategy I provided unshackles 25 years of legacy built on an archaic newsletter model, and moves The Motley Fool into a modern web-based application.

Discovery

Establish the goals and scope of the project

The primary aim was to implement a new business model that would increase the value of the subscription to Motley Fool’s Premium service as the member escalated to higher levels. The scope of achieving this was massive, shifting the product suite for 40 independent subscription newsletter-based products to one single subscription application.

My role was leading the product and design strategy. Collaborating with the VP of Product, and leveraging the design research my team provided, we established a set of member personas, mapped those to different levels, and determined the primary goals members are purchasing a subscription with The Motley Fool to achieve. Then we set out to design a product that directly served those needs.

UX Design

Ensure solving the user needs efficiently and creating an application that is easy to use and understand

Initially, I was hands-on in leading the UX efforts, organizing a feature map based on the primary needs of the members and mapping those to the solutions provided by the business. I met with senior leadership at the company and the CEO to share the vision for the new product. Upon approval, I assembled a team of designers to begin crafting low-fidelity wireframes of the user experience.

The team of five designers and a user researcher worked collaboratively, providing wireframes of the main dashboard, the main pages of the application, and core tools and features that we would develop. These wireframes were initially produced in Sketch and stitched together in InVision (later moved to Figma) to provide a loose experience prototype. I met every other day with senior leadership to communicate the latest progress of the wireframes, attain feedback, and review changes.

Map and wireframe of the primary architecture and user flow

UI Design

Setting the style concept and creating high-fidelity mockup

The visual design of the websites for the Motley Fool premium subscriptions had not changed significantly in over five years since they were companion pieces to print newsletters. With its intent to touch all corners of the site experience, I lobbied for this project to become an opportunity to address a user-interface upgrade.

There was no clear successor to the current UI, so I concocted and facilitated a Design Derby, leveraging the talents of the in-house design team and select contractors to determine the next direction of the look and feel of The Motley Fool experience.

Once we collected the principal elements of each entry together and stakeholders approved the updated design, I carved out resources to move the new styles to be the updated patterns in the Figma library. Simultaneously, I had the lead designer on the project incorporating the elements into the low-fidelity wireframes in Figma to create a stylized and polished presentation of all the main pages of the new site experience.

Crafting a new visual language for the new solution with updated typefaces, colors, spacing and imagery

Prototypes

Creating a clickable model of the overall experience

With the researched and understood UX experience ascertained and the new approved UI established, the next step was prototyping. Fortunately, the powerful tools in Figma made converting the mockups to a clickable set of pages simple. The result of having the lead designer and team stitch together all the different visuals was to create a faux experience of clicking through all the core functionality and elements of the user experience.

These prototypes and their subsequent revisions became the deliverable that I socialized across the company. I met with the front-line teams such as customer service to share the directional changes and how this will change the products for the users. I talked with leads of Investing, Marketing, Retention, Upsell, Editorial, Commerce, Tech, Legal, and Communications to communicate the upcoming changes and address any expected disruptions or dependencies. And I met almost daily with the company’s leadership to address changes, take feedback and provide detailed updates of progress.

Planning

Assembling a team, handing off design deliverables setting up stories and planning sprints.

One focus I have had as the Director of Design is maintaining an excellent report with the Director of Development to keep our two teams in constant communication to accomplish the shared goals. The design deliverables from the UX flow to the UI mocks to the Prototype are essential maps for the development team. Still, we have not produced value for the user until those deliverables are converted to code and launched.

When the work was ready to move to development sprints, I met regularly with the Development and Project Management directors. We organized the work into different backlogs, allowing small collaborating teams (typically two developers and a designer) to work independently on particular elements of the new experience.

I oversaw the prioritization and backlog of work to properly sequence the elements of the designs, moving the approved pieced into production while setting up the underlying infrastructure for those areas still in refinement. I routinely went to development team Scrums to assess the progress, answer questions and make adjustments as issues arose.

Development

Completion of milestones in two-week sprints concluded with a Sprint Review

Active development is completed in two-week sprints with daily morning stand-ups (over Zoom) to check-in. I had the designer participate in each daily stand-up and attended many myself to access the progress. I reported to the senior leadership the current design and development progress three times a week.

At the end of the two-week Sprint, following the development and quality checking of the code, is the team’s Sprint Review. I attended the Sprint Review, as did many of the senior stakeholders, to hear from the development team’s progress and make sure it matched the expectations set for the Sprint.

Launch

Preparing for updates going into testing or eventually a public release

Once the final approved version was completed, accepted, and ready for launch, my last job was to help circulate the changes. I would participate in meetings with departments from Marketing to Legal to the Customer Service team. We would take the time to comb through all the changes (on the Staging site) and highlight what would be new or different for the users to make sure everyone’s department was on the same page about these improvements to the experience.

Product Design and Development Lead at The Motley Fool writing mostly about design and front-end development. Thx for reading.

Unlisted

Product Design and Development Lead at The Motley Fool writing mostly about design and front-end development. Thx for reading.