<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Design Community: Aravind S</title>
    <description>The latest articles on Design Community by Aravind S (@aravink).</description>
    <link>https://design.forem.com/aravink</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2408839%2Ff82390d2-939d-4713-abf2-31a91c2773bf.jpg</url>
      <title>Design Community: Aravind S</title>
      <link>https://design.forem.com/aravink</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://design.forem.com/feed/aravink"/>
    <language>en</language>
    <item>
      <title>We reinvented comparison page</title>
      <dc:creator>Aravind S</dc:creator>
      <pubDate>Wed, 03 Sep 2025 11:31:58 +0000</pubDate>
      <link>https://design.forem.com/aravink/we-reinvented-comparison-page-o1i</link>
      <guid>https://design.forem.com/aravink/we-reinvented-comparison-page-o1i</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Current product comparison pages suck and here’s what we did instead&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What do you usually do when you come across a promising new piece of software?&lt;/p&gt;

&lt;p&gt;I usually look for a quick YouTube review or bookmark the site for later. YouTube comparison videos help explain features and how they stack up against existing solutions.&lt;br&gt;
Either way, trying new software takes time—both to test it and to decide whether it fits into our day-to-day routine.&lt;/p&gt;

&lt;p&gt;Default comparison pages on software websites are narrow and limited. They’re mainly written for SEO and typically compare the product to a single competitor at a time.&lt;br&gt;
The only deviation among all the thousands of product websites I’ve visited is Beehiiv’s &lt;a href="https://www.beehiiv.com/comparisons" rel="noopener noreferrer"&gt;product comparison page&lt;/a&gt;. &lt;br&gt;
Even this compares only four products at a time using a carousel.&lt;/p&gt;

&lt;p&gt;Existing attempts to solve this problem often rely on a truckload of feature lists, tables, and text. Or you might have seen a chart that maps two features on a 2D axis for visual comparison like the one below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8twb5une0r2owujp0oh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8twb5une0r2owujp0oh.png" alt="quadrant comparison" width="800" height="634"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But this chart also has limitations: it compares only two features at a time and this is used mainly for VC pitch decks.&lt;/p&gt;

&lt;p&gt;The wholesome chart is our attempt to solve this. Here’s how it works.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a wholesome chart?
&lt;/h2&gt;

&lt;p&gt;To understand the wholesome chart, imagine comparing features of a PKM (Personal Knowledge Management) app. &lt;br&gt;
Consider the diagram below: a single feature mapped to a single axis, rated from 0 (worst) on the left to 100 (best) on the right.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnf6rt68jggkwz87l7gbe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnf6rt68jggkwz87l7gbe.png" alt="Single axis comparison" width="800" height="230"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We rate each product for that feature on a 0–100 scale. This makes it easy to compare multiple products along a single feature.&lt;/p&gt;

&lt;p&gt;Now, let’s reverse the axis direction, add another axis (another important feature), and arrange the axes as spokes of a wheel—keeping 100 at the center.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr12takv9mgsewfkrk870.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr12takv9mgsewfkrk870.png" alt="Two axes on wheel" width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With this approach, we can add as many spokes as we want and compare many products across many features. &lt;strong&gt;The product closest to the center on all axes is the best fit.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We call this the &lt;code&gt;wholesome chart&lt;/code&gt;: a wheel whose spokes represent features. It visualizes a product’s core capabilities and places comparable products along each feature axis for quick comparison. It makes it easy to see overlap and differentiation at a glance.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgo55qlc959t20vz5c33v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgo55qlc959t20vz5c33v.png" alt="Memotron wholesome chart" width="800" height="560"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Try the interactive chart: &lt;a href="https://memotron.app/compare" rel="noopener noreferrer"&gt;Memotron compare&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The origin story
&lt;/h2&gt;

&lt;p&gt;I am the founder of &lt;a href="https://21n.org" rel="noopener noreferrer"&gt;21n&lt;/a&gt; and we are currently on a mission to build super and wholesome software. Contrary to what you might think, we didn’t create the wholesome chart for a marketing comparison page. We invented it early in our product-building process. As we set out to build products with many features and sub-features, we needed a way to track progress in each area. That’s how the wholesome wheel chart came to be.&lt;/p&gt;

&lt;p&gt;Similar to the comparison wheel, we mapped features to each spoke. In this mode, the spokes act as progress bars, and we color them to mark progress.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ltfkva99skhk8wo7yec.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ltfkva99skhk8wo7yec.png" alt="Progress mode" width="800" height="650"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Above is a snapshot of the wheel’s Progress mode, which we used internally to track progress across areas. You can access a version of the chart with multiple modes from an October 2024 deployment &lt;a href="https://d3b2ase6s9uuba.cloudfront.net/fw" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's all for now. Happy comparing!&lt;/p&gt;

</description>
      <category>design</category>
      <category>marketing</category>
    </item>
  </channel>
</rss>
