End-to-end Research, design & development

Defining and developing a complete product portfolio

The startup weißaufschwarz, a sub-company for Mittwald hosting sought to launch a marketplace with B2B applications tailored specifically for their core business – hosting for agencies & freelancers.

WHO: weißaufschwarz

WHAT: End-to-end Product Portfolio Research and Development

WHEN: 10/2023 – 06/2024

Summary

This case study delves into the research, prioritization, creation, and development of a product portfolio for hosting features. The initiative is to identify and prioritize the development of a product portfolio consisting of roughly 20 applications that will be developed in 2024 as a part of a marketplace offered in the Mittwald hosting platform.

01

02

Problem Statement

Weissaufschwarz, a B2B startup working in close collaboration with hosting provider Mittwald, needed strategic direction to shape its product development priorities for 2024–2025. With early-stage ideas forming and a growing partnership pipeline, the team faced uncertainty around which features to build first, how to align with business goals, and how to communicate their vision effectively.

While no design system was in place yet, it became clear that a scalable, unified design approach would soon be essential – as the product matured and more stakeholders got involved. Laying the groundwork early was critical to avoid future bottlenecks in product design, communication, and development.

03

The Plan

  • User Research
    • Survey Analysis
    • Quantitive Analysis
    • Competitor Analysis
  • UX Design
  • Design System for white-labeling
    • Visual Design
    • UI Design
  • Tech-stack agreement
  • Development

User Research

A. Survey Analysis

Surveyed to acquire information on repetitive tasks and friction points in servicing, maintenance, administration, client attrition, billing management, end client UX, and platform expectations.

04

We gathered client feedback on the importance of various applications to determine which to prioritize for development and narowed it down to 5 priority applications.

What questions did we ask for selected features?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

White-label Email Account Manager

  1. How frequently do you have to administrate new/obsolete email accounts (Daily,Weekly, Monthly).
  2. How many email accounts do you have on average per client?
  3. How important is the ability to fully customize email templates, signatures and branding? (1-5)
  4. Would integration with other email clients (e.g., Outlook, Gmail) be beneficial? (Yes/No)
  5. How important is email filtering and spam management? (1-5)
  6. Is it important to provide an application for your client’s branding? (Yes/No)

Smart Invoicing for Splitting Bills

  1. How important is the ability to split bills based on custom criteria? (1-5)
  2. Would you find automatic invoice generation based on usage beneficial? (Yes/No)
  3. How essential is integration with external payment providers? (1-5)
  4. How important is a clear and detailed invoice summary? (1-5)
  5. How important is automatic billing schedule per client? (1-5)

Feedback Portal

  1. How important is the ability for users to submit feedback directly through the portal? (1-5)
  2. Would analytics and reporting per client be useful? (Yes/No)
  3. How valuable is the ability to categorize and prioritize feedback? (1-5)
  4. Would you prefer video over text feedback? (1-5)

Performance Monitoring Dashboard

  1. How important is real-time performance data visualization? (1-5)
  2. Would customizable dashboards and reporting for end users be useful? (Yes/No)
  3. How crucial is historical data analysis for performance metrics? (1-5)
  4. How important is real time user monitoring? (1-5)
  5. How important is load time monitoring? (1-5)

Server Resource Management Tool

  1. How important is real-time monitoring of server resources? (1-5)
  2. How crucial is automated alerting for resource usage thresholds? (1-5)
  3. Would you value a feature that provides detailed resource usage reports? (Yes/No)
  4. How important is the ability to optimize resource allocation automatically? (1-5)
  5. How important is it to be able to switch between hosting types within the application – shared, VPS, Cloud, Dedicated? (1-5)
  6. How important is manual configuration ability? (1-5)
Is it important to provide an application for your client’s branding? (Yes/No)
Would you prefer video over text feedback? (1-5)
B. Competitor Analysis

User Personas

05

User Journey Rudi

06

Sentiment scoring & opportunities

User Flow

07

Wireframes

07

Tech-Stack Agreement

08

  • Design
    • UX & User Research – Miro 
    • Ilustrator – Graphics
    • Marketing Materials – Figma 
    • Figjam – User Flows

  • Design System
    • Figma + Token Studio
    • StyleDictionary

  • Front-End Development
    • ShadCN + Flowbite
    • Tailwind CSS
    • React
    • NextJS

Let’s create something great together.

My Process

1. Ideation

Surface real problems, not just feature requests.

Capture user signals (ideas, opportunities, warnings, errors) and convert them into tightly framed problem hypotheses for quick validation.

Key deliverable: tagged idea backlog + 1-page problem brief.

UX boost

idea generation

opportunity

error

2. Business Validation

Make sure the idea matters to users and the business.

Quickly test value and risk: size demand, surface downstream impacts (ops/legal/support), and run lightweight experiments (landing page, concierge MVP, etc.) to validate willingness-to-pay or behavior change before engineering.

Deliverables: business brief (assumptions + TAM snapshot), simple experiment plan, go/no-go recommendation.

validation

valuation

risk assessment 

3. Tech Buy-in

Turn validated value into a predictable engineering plan.

Engineers translate the validated case into a pragmatic technical approach: feasibility checks, data/API contracts, MVP scope, acceptance criteria, and a phased rollout (feature flags / canary / incremental migrations). Align on risks, performance and security requirements so delivery is predictable and debt is managed.

Deliverables: one-page tech spec + sequence diagram, backlog tickets with acceptance criteria, rollout & mitigation plan.

Feasibility

alignment

flagging

4. Stakeholder Buy-in

Secure resources, remove blockers, and de-risk execution.

We synthesize ideation, validation, and technical alignment into a concise decision pack that answers: Why now? What is the financial impact? Who does what? How do we mitigate risk? The pack includes an executive one-pager, ROI/payback scenarios (conservative → aggressive), a resourcing map (teams, capacity), and a phased milestone plan with KPIs. In the decision review, we anticipate objections (cost, scope, system impact) and offer mitigations (phased pilots, lighthouse customers, feature-flagged rollouts). The goal is formal sign-off.

Deliverables: executive one-pager, ROI model, approved resource allocation, milestone sign-off + communication plan.

Success metrics: time to funding decision, % of requested resources granted, milestones met vs committed, realized vs projected impact at Q1/Q4.

pitch

approval

budget

Delivery
Development