Ceramic Canvas: Promotional Email for a Seasonal Sale
A seasonal marketing email and promotional graphic for a mug store specializing in sublimation printing, designed to drive customers toward standard and custom-printed mugs during the Spring Sale.
A mobile-first email for Spring Sale mugs
The goal was a visually engaging campaign that encourages customers to explore both standard and custom-printed mugs during the Spring Sale — with a layout built for how people actually read email: on their phones, scrolling with one thumb.
Mapping placement, hierarchy & shading
I started by wireframing the email to work out UI placement, visual hierarchy, and possible color shading before moving into hi-fidelity design.
- Email design & layout: Improved readability, hierarchy, and CTA placement and visibility for better engagement.
- Information architecture: Clean, modular layout with a clear visual hierarchy for ease of navigation.
- Mobile-first: Designed for one-thumb usage and vertical scroll.
- Hierarchical structure: Branding → messaging → engagement → content exploration → footer.
- Affordance: Clear, recognizable affordance on buttons and icons.
From wireframe to finished design
The hi-fidelity design carries the wireframe's structure through to a polished, on-brand layout, with details tuned for both clarity and conversion.
- Brand identity: The "Ceramic Canvas" logo is embedded in the hero image, establishing the brand immediately.
- Headline & subhead: A bold "Spring Sale" message paired with a supporting subheadline hooks readers right away.
- Promo code: SPRING2025 is clearly highlighted for easy copy/paste or reference.
- Product cards: Each mug includes an image, title, and price so users can decide at a glance.
- Primary CTA: "Shop Mugs" stands out with a soft gradient and clear visual hierarchy.
- Secondary CTA: "Get Started" leads into the custom-printing flow.
- Whitespace: Balanced spacing keeps the email readable and scannable on mobile.
- Brand sign-off & unsubscribe: A branded closing message builds loyalty, with a clear unsubscribe link for compliance and trust.
.png)
.png)
.png)
Interactive, preview-ready prototype
- The prototype is interactive and mimics real email scroll behavior.
- Mobile-first layout supports one-thumb usage and vertical scroll.
- Preview-ready for client and stakeholder reviews before development.
- Clear affordance is maintained on all interactive elements, including buttons and icons.
What I learned
How to structure a compelling case study using clear visual hierarchy and section headings for improved readability.
The importance of embedding interactive prototypes to enhance engagement and showcase design functionality.
Best practices in responsive, mobile-first design that hold up across devices.
Using brand-aligned visuals — color palettes, emojis, and typography — to maintain consistency and strengthen identity.
How to enhance UX storytelling with mockups, process shots, and contextual images.
Balancing minimalism with engagement through quotes, prototype buttons, and light visual flair.