Value Comparison Chart

I built this feature using an endpoint that returns a heavily nested pricing struct. I wrote a helper function that loops through multiple layers of properties while extracting prices for each cabin type, available promos, promo type, while ultimately tallying the values of each data point to run an across-the-board comparison.

Despite it's look, I was able to achieve this without using a table. I created a parent component that houses column components which converts to a tab view on smaller screens. This also allows cabin types to be hidden when they are not available. This project started out as a simple wireframe that I created in Adobe Illustrator, but iterated into a complex UI. With the interest of multiple stakeholders, the design pivoted a few times (even in the middle of development), but the end result has proven to be a key component to drive sales.