Survata “Brand Lift” Charts
A drag-and-drop SASS feature to explore ad effectiveness with custom segment cuts and KPIs
Survata (now Upwave) is a market research and ad measurement company. For the first years of the company we did a lot of research in-house. But in 2018 we began moving our company toward SASS-style interactions. Instead of organizing our product around how our database was organized, we were tasked with giving highly customizable cuts and KPIs on-the-fly. With this move toward self-service created a drag-and-drop interactive chart to present how a brand’s marketing “lift” was affected by their currently running ads.
To start, my PM and I worked on some drag-and-drop style ideas. We started with some sketches around connecting “KPIs” and “Cuts.” These two data points are our X and Y axis for charting brand lift.
I began, after some conversations from those sketches, to work out in high fidelity how the super-level dropdown, the item toggle, and the drag icon would work together, as well as how the sub-content and header needed to work.
From here we chose some directions and I worked out as much of the minute iterations as I could. I used to get the opportunity to translate all my designs into CSS, but this project I had to give the specifics to our growing development team.
The different states for “Cuts” and “Questions” were slightly different, so getting them to make sense and consistent took some time...
Then we changed ordering and were working on scroll design and drag design. We decided it was better to open up KPI drag options rather than hide them under another toggle
Moving along we're getting into how where the draggable pills would land. When the pills were in their temporary location they needed to be editable for reordering and renaming, and removable. The expected chart would load below the right content.
After this we started developing our brand lift charts, and as we developed it we of course saw more interactions that were worth revisiting. An in-progress screenshot and video below show some more details and changes, as well as a fuller picture of how our brand lift charts were meant to work.
There were a few key aspects to this design process. First, it was more SASSy, a new requirement we needed to figure out. Secondly, and subsequently, I was able to update our more rudimentary design system to something a little more modern with an interactive, “touchable” feel. Thirdly, the interactions, now more rigorously client-centric, needed to move away from database language. Our drag-and-drop brand lift charts exposed lots of JSON objects that were incongruent in the codebase, as well as confusion between what the front-end was asking for and what the back-end was providing.