INTERACTIVE DATAVIZ

INTERACTIVE DATAVIZ

Visualizing software with VFunction

Visualizing software with VFunction

Visualizing software with VFunction

vFunction, a Palo Alto–based deep tech startup, was tackling one of DevOps’ biggest challenges: migrating legacy applications to the cloud. Their powerful backend could analyze software complexity, offload CPU processes to AWS Lambda, and calculate cost savings automatically — but without a customer-facing interface, the technology had no path to market.

client

client

FATHOM DESIGN AGENCY
FATHOM DESIGN AGENCY

year

year

2018

Industry

Industry

SAAS, DATA DRIVEN SOFTWARE DEV

team

team

1 UX DESIGNER, 1 VISUAL DESIGNER

scope

12w to ship MVP

12w to ship MVP

Data Viz

interaction design

Data Viz

UI Design

UI Design

1. context

1. context

migrating legacy applications to the cloud

migrating legacy applications to the cloud

When I joined the project at Fathom, my role was to design vFunction’s first self-serve product experience: a beta platform that would showcase the tech, attract early customers, and support high-stakes investor demos.

2. challenge

2. challenge

brilliant backend for AI-driven cloud migration, but no customer-facing product

We launched with a focused one-week discovery sprint. Through whiteboard exercises and collaborative workshops, I worked to achieve two critical goals: clarify the business value proposition and distil the core challenge into a sharp "How might we..." problem statement.

The sessions revealed a common startup challenge: the engineering team's brilliant technical solution was trapped in highly technical language. While perfectly accurate, their messaging alienated the very audiences they needed to reach: DevOps teams who would use the product daily, CIOs who would approve budgets, and investors who would fund growth.

Our path forward became clear: design an interface that made complex cloud migration feel approachable rather than intimidating. We needed to transform their "tech-heavy" proposition into something engaging, intuitive, and yes, even enjoyable to use.

  1. approach

  1. approach

Discovery sprint

Our discovery sessions painted a clear picture of two very different worlds. DevOps engineers were dealing with the daily reality of legacy code, they knew modernisation was necessary and frankly, it would look good on their resumes too. But the people writing the checks? Business leaders juggling tight deadlines and even tighter budgets, desperate to ship faster while spending less.

The irony wasn't lost on us: the people who'd never touch our interface were the ones who'd decide whether to buy it. These business leaders spoke fluent P&L but saw code as mysterious hieroglyphics. They trusted their technical teams but couldn't personally evaluate whether a migration tool was worth the investment.

This created our biggest design challenge: how do you make something as abstract as "code complexity" feel tangible to someone who's never written a line of code? We needed to transform technical bottlenecks into something a CFO could point to in a meeting and say, "This is why we're moving too slowly, and here's how we fix it."

  1. process

  1. process

mapping the app architecture

We had our target: a live dashboard where complex code analysis became instantly visual and actionable. To get there, I started with the foundations—mapping application architecture and user workflows to understand exactly how data would move through the system and land in front of our two very different audiences.

We translated a complex backend tech into an intuitive, self-serve interface

  • Aligned stakeholders, clarified value proposition, and ran discovery workshops

  • Designed user flows, wires , data visualisations, and onboarding experience

  • Borrowed design patterns from gaming + cockpit interfaces to engage DevOps engineers

5. product desiign

5. product desiign

strategic MVP. building a sales driven demo

Next came the critical question: what's the minimum we could build that would still wow potential customers? Our MVP strategy was simple but powerful, let people experience the magic firsthand.

We designed a frictionless trial flow: users could register with just an email, connect their codebase in minutes, and watch our AI analyze their software in real-time. For a limited period, they'd get to see exactly what vFunction could do with their actual code, not some generic demo.

This approach solved multiple challenges at once. Business leaders got concrete proof of value they could understand and share with their teams. Meanwhile, the founders gained a pipeline of engaged prospects who had already experienced the product's impact, the warmest possible leads for follow-up conversations.

  1. timeline

  1. timeline

12 weeks to MVP

With our strategy locked in, I had to orchestrate a tight 12-week timeline that would take us from concept to functional demo. The first month was intentionally dual-tracked, while I developed the visual identity and brand language that would make vFunction feel approachable rather than intimidating, my team simultaneously built the core interface components. This parallel approach meant our design system and user experience evolved together, ensuring visual consistency from day one. The remaining eight weeks shifted focus to the make-or-break challenge: proving our interface could handle real-world complexity.

Dual-audience design: spoke to both DevOps users (hands-on) & business leaders (decision-makers)

  • Onboarding experience: replaced static loading with animated, real-time visualisations of code analysis

  • Frictionless trial flow: email signup → connect codebase → live AI analysis in minutes

  • Tablet-first UI: flexible, demo-friendly for on the go meetings and pitches


We moved from designing for hypothetical use cases to stress-testing against actual client codebases, iterating rapidly as we discovered edge cases and performance bottlenecks. Every week brought new technical constraints that required design solutions, balancing ambitious visualisations with the reality of what our backend could reliably deliver under tight deadlines.


Rapid Prototyping to Market-Leading Adoption

Raised $2.2M in seed funding, post MVP launch

  • Earned top-tier recognition:

    • Named to CRN’s 2024 “Coolest Cloud Software Companies” list.

    • Finalist in both DevOps Excellence Awards and DevOps Dozen.

    • Named a Gartner Cool Vendor in AI-Augmented Development and Testing

  • Results: In just 12 weeks, your design enabled vFunction to go from backend-only tech to an award-winning, VC-backed product, dramatically improving investor pitches, user engagement, and market positioning.

  • https://vfunction.com/awards/

  • Customer-Centric Transformation – Shifted focus to user needs, improving overall customer satisfaction by +35% in post-launch surveys

  • Smarter Navigation – Reduced time to find products by 40%, increasing site stickiness and engagement

  • Clearer Structure – Reworked taxonomy improved product discoverability, driving a 25% rise in add-to-cart rates

  • Engaging Experience – Updated layouts and visuals led to +50% longer average session

  • Community Integration – Featured DIY content from 3 countries, boosting community interaction by +60%

  • Seamless Ecosystem – Integrated catalogs and support tools, cutting customer service inquiries by 30%

link to site

https://vfunction.com/
.
.
.
.

Create a free website with Framer, the website builder loved by startups, designers and agencies.