Viewstats by Mr. Beast

Platforms: My Roles: Product Engineering Manager, Lead Frontend Engineer, UI/UX Designer Tools: Next.js, React, TypeScript, Node.js, React eCharts, Figma, Spanner, GCP

Viewstats is a YouTube analytics platform created in collaboration with Mr. Beast, one of the world's most popular content creators. The platform provides detailed analytics and insights for YouTube channels, helping creators understand their audience and optimize their content strategy.

I was responsible for both the strategic direction and technical implementation of the platform, managing a team of 10+ employees across engineering, design, and QA departments.

Project Overview & Leadership

Viewstats dashboard and analytics interface

Leading the design and development of Viewstats.com required a comprehensive approach that balanced technical excellence with strategic business objectives. I worked closely with the CEO, COO, and other leadership to ideate on product wireframes, marketing strategies, and talent alignment.

One of my key responsibilities was managing a $1M budget to release a SaaS pro subscription model ahead of schedule, which ultimately drove over 50% of the company's yearly revenue. This aggressive 5-month pro launch timeline required careful planning, efficient resource allocation, and effective team management.

Throughout the project, I mentored and guided a team of 10+ employees, including engineers, designers, and QA specialists, fostering their professional growth and cultivating an open, collaborative environment. This approach not only improved team morale but also enhanced the quality of our deliverables.

Frontend Architecture & Technical Implementation

Viewstats Pro home page and thumbnail search tool

The frontend architecture was built using Next.js, React, and TypeScript, providing a robust foundation for a complex analytics application. We implemented a component-based architecture that emphasized reusability, maintainability, and performance.

Key technical challenges included:

• Implementing real-time data visualization for YouTube metrics
• Creating a scalable state management solution for complex data relationships
• Optimizing performance for large datasets and complex calculations
• Building a flexible API integration layer for YouTube's API

We adopted a microservices architecture for the backend to ensure the platform could scale as more users and data were added. This approach allowed us to independently deploy and scale different components of the system based on demand.

UI/UX Design & Design Systems

More Viewstats Pro features

I led the design process in Figma, creating key user experiences that would define the product. Our approach focused on creating a comprehensive design system that would ensure consistency across the platform while allowing for flexibility and growth.

The design system included:

• A comprehensive color palette with semantic meaning
• Typography scale with clear hierarchy
• Component library with variants for different states and contexts
• Spacing and layout guidelines for consistent UI structure
• Animation and interaction patterns for a cohesive experience

This design system was then implemented in code, creating a shared component library that developers could use to build new features quickly and consistently. This approach significantly reduced development time and ensured a cohesive user experience across the platform.

Accessibility & Responsive Design

Viewstats mobile and light mode designs

Accessibility was a core consideration throughout the design and development process. We implemented WCAG 2.1 AA compliance standards, ensuring that the platform was usable by people with a wide range of abilities and disabilities. Key accessibility features included:

• Semantic HTML structure for screen readers
• Keyboard navigation support throughout the application
• Color contrast ratios that meet accessibility standards
• Alternative text for all images and visual content
• Focus management for modal dialogs and complex interactions

The platform was designed to be fully responsive, providing an optimal experience across desktop, tablet, and mobile devices. We implemented a mobile-first approach, using CSS Grid and Flexbox for layouts that would adapt seamlessly to different screen sizes.

Agile Methodologies & Product Roadmap

More Viewstats light mode examples

To meet our aggressive 5-month pro launch timeline, we implemented a streamlined agile methodology that balanced structure with flexibility. Our approach included:

• Two-week sprint cycles with clear deliverables
• Daily standups to address blockers and share progress
• Bi-weekly retrospectives to continuously improve our process
• Regular stakeholder reviews to ensure alignment with business goals

The product roadmap was carefully planned to prioritize features that would deliver the most value to users and the business. We used a combination of user research, competitive analysis, and business objectives to inform our prioritization decisions.

This approach allowed us to launch the pro subscription model ahead of schedule, driving significant revenue for the company while delivering a high-quality product that met user needs.