Scotch Whisky Storyboard – Visual Design Exploration
This mockup demonstrates how I explore visual directions for a learning experience before building full screens or modules. It compares light and dark UI treatments for the same storyboard content and documents how visual, layout, and accessibility decisions evolve together.
In this concept, I treated the Scotch whisky production process as a museum-style explainer for adult learners. The three paired mockups demonstrate how I translate instructional goals into a coherent visual system: first at the hero level, then through recurring motifs, and finally in an interactive “From Barley to Cask” process overview. The focus is on structure, readability, and how a design system can support learning, not on pixel-perfect final UI.
Scotch Whisky Process – Visual storyboard mockups
- Mockup 1: Compares light and dark hero treatments for the same learning objective, focusing on first-impression clarity, tone, and layout.
- Mockup 2 – Motif variant: Extends the system with a cask-inspired motif and shows how decorative elements can reinforce content without competing with it.
- Mockup 3 – Process overview: Turns the same content into a clickable four-stage map, demonstrating how visual hierarchy and microcopy can guide learners through a complex process step by step.
Storyboard concept
How Scotch Whisky Is Made
Light, print-inspired layout that presents the Scotch whisky-making journey in a museum-style frame with pale surfaces, quiet typography, and dark text.
Storyboard concept
How Scotch Whisky Is Made
Light variation with a cask-inspired motif that can be used on bright backgrounds or print-style layouts.
Process overview
From Barley to Cask
Explore the four main stages that turn barley, water, and yeast into mature Scotch whisky. Select a stage below to focus on that part of the process.
Choose a stage to learn more
Use the buttons above to jump into each part of the Scotch whisky-making journey. On the full course, selecting a stage would reveal diagrams, photographs, and short explanations tailored to that specific step.
This mock-up illustrates the intended layout and interaction pattern for a clickable “From Barley to Cask” overview section.
Process overview
From Barley to Cask
Light-theme treatment for the same four-stage Scotch whisky process, with pale surfaces and dark type.
Choose a stage to learn more
On the light version, the same four stages are presented on pale, parchment-inspired cards with dark text.
Intended as a high-key variant for use on bright backgrounds or print-style layouts.
Accessibility and design considerations
This storyboard explores how light and dark visual treatments affect the readability, tone, and structure of an explainer-style learning experience, before committing to a full UI build.
Key decisions include checking text/background pairs against WCAG contrast guidance, keeping hierarchy consistent across light and dark variants, and translating the same content into both static hero layouts and a step-by-step, keyboard-friendly process map.
The thought process
- Contrast and legibility: Text and UI elements are checked against WCAG 2.2 AA contrast guidelines, with dark text on light cards for print-style variants and high-contrast light text on deep backgrounds for dark variants.
- Typography for reading comfort: Headings, labels, and body copy are resized on this page to match their “sample layout” role, while still maintaining consistent hierarchy and sufficient size for on-screen readability.
- Light/dark parity: Each light mockup has a dark counterpart using the same structure, so learners can move between themes without re-learning layout or interaction patterns.
- Interaction pattern clarity: The process overview uses clearly labeled, focusable buttons with “Stage 1–4” labels and live-updating descriptions, supporting both mouse and keyboard users and aligning with WCAG guidance on operable interfaces.
- Content-first framing: Copy is written in plain language, with jargon minimized and processes broken into four clear stages to support adults who may be new to the domain.