Alc-Bev Learning Platform
A new way for marketers to learn about their target audience that keeps up with real-time data and tells a compelling consumer story.
Problem
Marketers at this major Alc-Bev felt detached from current customer data tools that exist only in PowerPoint and Excel, making them time-consuming to update and the storytelling stale.
Looking to the future, they also needed a system that could keep up with their new pace of data collection (once a month vs once a year) and present that data well regardless of its many qualitative and quantitative forms.
Solution
A new kind of "second screen" reference tool for marketers of all scopes to learn about their consumers and how they consume products. Whether you're a brand rep making graphics for a new campaign or a marketing lead finding white-space for a new product line, this is the tool for you.
My Role
Designed modules for multiple pages and a design system based on stakeholder feedback and ideation. Built out figment variables, components and variance, and prototyped the final prototype. Translated Desktop web design to mobile in one day. Presented final deliverable to client.
Client Privacy
Due to the forward-looking nature of this project, I have removed all branding, imagery, and verbiage from the project and replaced it with either ?What If! branding or "Lorem Ipsum" placeholder text and images.
Keeping consistent
Design System
We built out a full design system based on the client's existing branding and Material 3 by Google. We used Google Material Icons and customized M3 with our own colors and interactions. It includes:
- Modular User-Generated Content panels for storytelling
- Data presentation cards for statistics including space for index and percentage context
- Interactive Persona storytelling sections for increased user story immersion
- Buttons, tags, and page links.
- Page structure elements like marquees, dividers, and info callouts.
- Navigation elements like the top navigation bar and anchor link sub-navigation bars
- Page Hero elements of three variants for three different kinds of pages
Our design system had three main requirements:
Tell the story through the consumers' words
Be flexible enough to handle many different datasets
Build atomically using components, variables, and auto-layout for design flexibility
and required some non-standard elements for data presentation and storytelling:
Persona blocks with support for rich multimedia and per-persona theming. This gives multiple perspectives within the same consumer group instead of generalizing to one quote or statistic.
Stat blocks that show a graphical representation, index, and main statistic. While numbers are not what we want to focus on, they are still important context so they do need to be provided.
Drop-downs with key highlighted statistics, index, icons, and descriptions. Essential for a quick understanding of what time, space, and people consumers associate with consuming product.
A mini-map of two classifications with a third classification at their intersection. This served as the main navigational tool of the site, as the panels in each axis and the middle are links to pages.
along with the normal stuff:
Buttons and tags (based on M3)
Rich page links for internal pages
Global and Anchor navigation bars
Three levels of callout panels
Colors and gradients
Type styles for desktop, tablet, and mobile
Modular Storytelling
UGC Cards
Another big innovation I spearheaded was our UGC Card system. It's a simple way to build out designs for user-generated content sections.
These sections were essential for understanding the consumer space — these pages are half data, half story. Using a combination of quotes, audio, statistics, video, and images we're able to communicate the qualitative data in a more engaging way.
To use the cards, you first choose the top-level layout then customize each card within that layout using the Figma Component Properties panel on the right. Easily copy and paste content like images or text.
Use of component properties allows for rapid layout changes without losing any data on cards.
Card primitives for profile, quote, label, stat, image/video, and audio.
All the layout combinations and the properties of each sub-card used.
Layouts in use. Note all 6 of the modules use the same component with different properties.
data anywhere
Mobile Site
The mobile site was completed in one day due to the extensive use of auto layout, variables, and flexible components in the desktop site.
The client was very pleased with the result and most of our presentation materials used this version instead of the desktop version.
Interactive Figma Prototype
Go fullscreen and give it a scroll!
Go fullscreen and give it a scroll!
Takeaways
I had a lot of fun making the modular UGC Card system - this is the first time I'd played with nested variables and components and it turned out to be super useful!
I also enjoyed the challenge of translating the desktop design to mobile, which was made easier with the use of variables and auto layout.