Marketing Data Tool
Problem
Our client had awesome research about their customers, but it only existed in fragmented PowerPoint and Word docs.
Solution
Create a centralized, "second-screen" experience for marketers to understand and empathize with their customers.
Marketing Data Tool
Q2 + Q3 2023
Major Alc-Bev
This was the most fun project I worked on at ?What If!. I reveled in the interaction design parts and tolerated the data consumption aspects. Despite a difficult client, I commend my leaders for shielding me from a lot of the drama and keep me focused on work.
Marketing Data Tool
Q2 + Q3 2023
Major Alc-Bev
This was the most fun project I worked on at ?What If!. I reveled in the interaction design parts and tolerated the data consumption aspects. Despite a difficult client, I commend my leaders for shielding me from a lot of the drama and keep me focused on work.
Problem
Our client had awesome research about their customers, but it only existed in fragmented PowerPoint and Word docs.
Solution
Create a centralized, "second-screen" experience for marketers to understand and empathize with their customers.
Chief Storyteller
I crafted team check-in presentations, presented them, and coached other teammates on presentation strategy and performance.
UI Designer
I designed the visual and interactive experience of using the product to spark delight.
UX Designer
I designed the experience of using the product based on research, testing, and intuition.
Product design and prototyping
Marketers at a major Alc-Bev company felt detached from the customer data tools they had. Their research sources of truth were in fragmented PowerPoint and Excel files, making it time-consuming to find, consume, and update. The storytelling was also lacking as the focus was only on the data instead of the vital context that came along with it.
Our client asked us to build them a new kind of reference tool for marketers of every scope to learn about their consumers and how they consume products. From a brand rep making graphics for a new campaign to a marketing lead hunting for white space for a new product line, this is the tool brings hard and soft data to the decision making process.
A full system built on the client's branding and Google's Material 3, customized with our own colors, components, and interactions.
Three requirements shaped our components
Tell the story in the consumers' words
Lead with qualitative voice and user imagery instead of numbers, when possible.
Handle many different datasets
Flex to any mix of qualitative and quantitative data; any insight could be one of multiple types of info.
Stay versatile
Components, variables, and auto-layout for maximum design flexibility.
Storytelling components
Three content blocks carried most of the storytelling.
Persona blocks: rich, per-persona themed multimedia, so a consumer group speaks in several voices instead of collapsing to a single quote or statistic.
Stat blocks: a graph, an index, and the headline figure in one place, giving the numbers enough context to matter without letting them take over.
Dropdowns: a highlighted stat, index, icon, and short description for a quick read on the time, space, and people tied to consumption.
Standard design system decisions
The everyday building blocks behind every screen, from buttons to type scales.
Buttons and tags based on Material 3
Rich page links for internal pages
Three levels of callout panels
These pages are half data, half story. A modular card system made the storytelling half fast to build.
One component, six layouts
All six modules use the same component with different properties.
Top-level layouts of the UGC module
The Component Properties of each sub-card in use
The client had a last-minute request to translate the site to mobile
Blistering speed
The atomic groundwork paid off the moment it was time to go responsive.
The full mobile site took
1 day
to translate from desktop
Flexible layouts for the win
The mobile site came together in one day thanks to the desktop site's extensive use of auto layout, variables, and flexible components. It wasn't a slop job either... the client was so pleased with the result that most of our presentation materials used this version instead of the desktop one.