FC.Product case study / 01
Commercial Product Design

From Market Research to $300K in Revenue

Building a commercially successful digital product by identifying where business opportunity and customer friction intersect.

Outcome
$300,000+
Satisfaction
4.9 / 5.0
Launch
2020
00 / Overview

In 2020, I identified an opportunity at the intersection of product design, frontend development, and the growing demand for ready-to-use React and Material UI products.

Rather than starting with a visual concept and trying to find a market for it, I approached the opportunity as a product problem: what were developers, designers, freelancers, and early-stage businesses struggling with when building digital products and marketing websites — and would they pay for a product that solved those problems?

I conducted market research, interviewed potential customers, validated early concepts, built and tested prototypes, and ultimately launched a reusable MUI-based template and UI kit through the MUI Store.

The resulting product generated approximately $300K in revenue over two years, with 5,000+ sales and a 4.9/5 customer rating. The project demonstrated that a product designer can create significantly more business value by treating design as a commercial product — not simply as a collection of screens.

— / The challenge

The market was crowded. The opportunity was hidden in the repetitive work behind the interface.

A technical diagram showing market demand, product design, and frontend development converging

The obvious approach would have been to create another visually polished template and compete on aesthetics. I considered that approach too risky.

The real opportunity was to understand why people were buying these products, what prevented them from using them effectively, and which parts of the product-development process they were actually willing to outsource.

The target audience included frontend developers, product designers, freelancers and agencies, startup founders, and small businesses without the resources to build everything from scratch.

The underlying problem was consistent: teams were spending significant time rebuilding common interface patterns, landing-page structures, responsive layouts, and frontend foundations that were not necessarily a source of differentiation for their business.

This created an opportunity to productise the repetitive work.
01

Discover

Qualitative research focused on identifying the job to be done.

Starting with the market, not the interface

I began with qualitative market research rather than immediately designing the product. I interviewed frontend developers, product designers, freelancers, and startup owners to understand what they were currently using, why they purchased templates, which parts of building a website consumed the most time, and where existing products fell short.

The goal wasn't simply to collect feature requests. I wanted to understand the job the customer was hiring the product to do.

The research revealed that customers weren't primarily buying a collection of UI components. They were buying time.

“We already have most of the building blocks — now we can focus on our actual business.”
02

Define

Turning insight into a proposition with clear commercial value.

Turning research into a product proposition

Based on the research, I defined the product around three core value propositions: reduce time to launch, provide flexibility rather than rigid templates, and bridge design and development.

01

Reduce time to launch

Move from an empty project to a credible, production-ready website significantly faster.

02

Flexible building blocks

Create a system customers can combine and adapt instead of a collection of fixed pages.

03

Bridge design and code

Think through architecture, responsive behaviour, documentation, and developer experience.

The resulting proposition was closer to a product ecosystem than a traditional website template.

03

Validate

Testing the concept before committing to the full product.

Testing the concept before building the product

Before investing heavily in development, I created approximately four to five early landing-page concepts and brought them back to the people I had interviewed during discovery.

01
Research
02
Concept
03
Prototype
04
Feedback
05
Iteration

Rather than asking whether people “liked” the designs, I focused on behavioural and commercial questions: would they use it, what would stop them buying, what was missing, and would it save meaningful development time?

This helped separate visual preference from actual product value and shaped both the product itself and how it would eventually be positioned in the marketplace.

04 / Build

A reusable ecosystem

01
Navigation

Dynamic headers with multi-level nesting.

02
Forms

Validatable MUI-ready input primitives.

03
Ecommerce

Optimised conversion-ready cart flows.

04
Auth

Reusable login and signup state templates.

05
Content

Blog, portfolio, and editorial page structures.

06
Applications

Dashboard patterns for product experiences.

“A traditional template solves one website problem. A reusable system can solve hundreds of website problems.”

A modular overview of UI kit components and product interface patterns

The current product has evolved substantially since the original 2020 release. The MUI Store describes theFront as a React/MUI product with hundreds of reusable components and dozens of example pages, reflecting the original strategy of building a flexible system rather than a single fixed template.

05 / Commercialise

Good product value still needs the right route to market.

Turning a design product into a distribution business

Creating a good product was not enough. It needed to reach an audience that already had an established need for MUI and React resources.

Instead of building an independent sales channel from scratch, I approached the owners of the MUI Store with the research, product concept, validation work, and finished product.

↗An established developer audience
↗Existing customer trust
↗Search demand
↗A relevant product ecosystem
↗A purchasing mechanism
↗Distribution infrastructure

This allowed me to focus on product value rather than customer-acquisition infrastructure. The product was subsequently published through the MUI Store.

06 / Scale

A digital product changed the economics of the work.

Designing for repeatable revenue

A client project typically creates revenue once. A digital product can be created once and sold repeatedly. Instead of one project, one client, and one payment, the model became one product, thousands of customers, and recurring sales.

Traditional
1 project → 1 client → 1 payment
Product model
1 product → thousands of customers

The product could evolve through new components, pages, technical updates, documentation, and improvements based on customer feedback. Sales became a feedback loop: customer feedback led to product improvements, which made the product stronger and created more sales.

— / Business impact

The outcome was a business, not just a design.

$300K+
Revenue generated in approximately two years
5,000+
Customer purchases across the ecosystem
4.9/5
Average customer rating

Beyond revenue: operational impact

Ready-to-use components, layouts, and implementation patterns reduced the amount of repetitive work required to launch digital experiences.

For a freelancer or agency, that could mean less time spent building foundational UI and more time available for client-specific work. For a startup, it meant faster time to market. For a developer, less repetitive frontend implementation meant more time spent on product-specific functionality.

The product converted repetitive implementation work into a reusable asset.
— / End-to-end ownership

Beyond design and launch.

My responsibility did not end when the product was published. I treated the UI kit as a living digital product and took ownership of its continued commercial and product development.

This included business development, product maintenance, and customer support — each one feeding the next product decision.

Business development

Identifying market demand, new templates, components, and ways to keep the proposition commercially relevant.

Product maintenance

Shipping updates, new patterns, compatibility improvements, documentation, and design refinements.

Customer support

Answering questions directly and turning recurring friction into product research and roadmap input.

Customer support as research

Customer questions revealed missing documentation, unclear interactions, new use cases, and friction in the implementation experience.

Product-design perspective

The most important lesson was not visual design.

The commercial success came from applying product-design thinking to a design resource.

Identify→Understand→Validate→Build→Launch→Iterate→Scale

This changed my role from someone producing interfaces into someone identifying an opportunity, validating demand, defining a proposition, building a product, and taking it to market.

— / Key decisions

What drove the outcome

01

I validated demand before building

Potential customers shaped the opportunity before a final visual direction or codebase existed.

02

I focused on the customer's job-to-be-done

The product was positioned around helping people launch faster, not simply around beautiful UI.

03

I designed a system, not a collection of screens

Reusable components and flexible layouts increased the number of problems the product could solve.

04

I treated distribution as product strategy

Publishing through an established marketplace reduced the customer-acquisition barrier.

05

I created a scalable business model

The work became a reusable commercial asset capable of generating revenue repeatedly.

— / Outcome

From a simple question to a scalable product business.

The project generated approximately $300K in revenue over two years, reached thousands of customers, and maintained a strong customer rating.

More importantly, it demonstrated a broader principle: the highest-value design work doesn't start with designing the interface. It starts with understanding where the business opportunity and customer problem intersect.

$300K+
Revenue generated
5,000+
Customer purchases
4.9/5
Average rating
2020
Initial launch
MUI Store
Distribution channel
— / Lessons learnt and takeaways

Research → Validate → Build → Launch → Support → Learn → Improve → Scale

That experience gave me direct exposure to the relationship between customer needs, product decisions, technical constraints, distribution, customer satisfaction, and business performance.

External verification

Review the live product on MUI Store

Visit MUI Marketplace →