Marketing Product UI
Interactive Platform Diagram RedesignRho
Interactive platform diagram redesign using an animated mountain visualization to communicate how Rho’s financial tools scale with a company.
01
The Problem
The carousel didn't tell a story.
Rho's PlatformDiagram component sits on one of the company's highest-trafficked marketing pages. Its job is to communicate that the platform grows with you at every stage. The existing implementation is a horizontal carousel with scenario labels and feature chips. It's functional, but nothing conveys progression. Each scenario feels interchangeable rather than sequential, with no visual cue that these represent stages of a company's trajectory.
The team VP flagged this as worth rethinking. It was never formally ticketed, but the problem stayed with me, so I rebuilt it on my own as a design and engineering exercise.
Before
The existing component on Rho's live site. It's clean, but nothing in the design communicates progression.
02
Constraints
Grounded in the realities of building at Rho.
I kept the project within the same boundaries I would have worked under at Rho: the existing design system, the production tech stack, the pace the team shipped at, and a bias toward clarity over complexity.
Brand fidelity
Rho's color palette, typography, spacing conventions, and recurring rock and cairns motifs across marketing materials.
Tech stack parity
Next.js, React, TypeScript, and SCSS Modules. The only gap was Storyblok, which I couldn't replicate without access to Rho's CMS environment.
Feasible timeline
Scope was measured in days at Rho, not weeks. I held myself to that pace and finished in roughly two days.
Simplicity
Anything too complex works against itself on a marketing page. Users need to understand the product, not decode the interface.
03
My Approach
Start with the metaphor, then design around it.
When the VP described the problem, the image that came to mind was climbing a mountain. Rho's brand already leaned into rock and cairns imagery, so a mountain felt native rather than forced.
I explored topography maps first, using Figma Make to generate wireframes with contour lines. The results were literally flat: top-down treatments that read as textures, not journeys. But the dead end was useful. Viewing contour lines from the side made me realize a straightforward, dimensional mountain would carry the metaphor more clearly than any abstraction.
From there, I placed interactive pulse points at different elevations, connected them with dashed lines to make progression explicit, and kept the carousel below so the two layers work together. The mountain provides the visual narrative, the carousel provides the detail.
Early explorations
Figma Make wireframes exploring the topography direction. The top-down contour style read as texture, not trajectory.
04
Interaction & UI Decisions
The mountain is the interface.
The core interaction is simple: click a pulse point, and the view shifts to follow it up the mountain. The carousel stays in sync as a secondary navigation path, the dashed line makes the progression between points clear, and small details like the active state scaling and the content crossfade keep transitions feeling smooth without pulling focus from the visual narrative.
Pulse points as primary navigation
Each growth stage is an animated point on the mountain. Clicking one zooms and pans to center on it. Active points scale up, inactive ones dim.
A visible path between points
Faint, curved dashed lines connect points from base to summit, turning isolated markers into waypoints on a progression.
Carousel retained, not replaced
The carousel stays below as secondary navigation. One familiar element from the original keeps the redesign feeling like an extension, not a departure.
Camera-follow animation
Clicking a pulse point triggers a smooth zoom and translates to center it in view, reinforcing the feeling of moving through the mountain.
Content crossfade
Label, description, and chips fade out and back in over ~2 seconds, preventing a jarring text snap during the camera shift.
After
The final component: the mountain visual with pulse points, dashed path, and a redesigned carousel underneath.
05
Implementation Details
Making it work across every screen size.
The main challenge was keeping pulse points accurately placed on the mountain regardless of viewport. Each dot position is stored as a percentage of the original image, then mapped at runtime to its actual position within the container. A resize observer handles dimension changes automatically, so no hardcoded breakpoints needed.
On mobile, the content area swaps to a swipeable carousel. The mountain and pulse points stay interactive above, so tapping a point or swiping through slides both stay in sync.
06
Outcome
A shipped demo that reframes the narrative.
The component replaces a flat carousel with an interface that visually communicates what the original only stated in text: that Rho supports companies through distinct stages of growth. The mountain, the path, and the pulse points make that progression the first thing a user registers, before they read a single label.
A side-by-side comparison
The current Rho component alongside the redesign. The heading is cropped from the redesign screenshot to focus on the mountain and carousel.
07
Reflections
The metaphor did the heavy lifting.
The original component and the redesign present the same information, but placing it onto a mountain with a visible path reframes it entirely. When a component isn't communicating well, the answer isn't always more features. Sometimes it's finding the right frame.
Using Figma Make for initial wireframes compressed the exploration phase. The iterations weren't usable as-is, but seeing flat contour maps fall short helped me articulate what I wanted faster. This further solidified my belief that AI isn't a replacement for design judgment, but it's a solid accelerant for early ideation.