Role: UX/UI Designer, Developer
Tools: Figma, HTML/CSS
Scope: Design + Development
Outcome: Responsive email system
What I Did (My Role & Responsibilities)
- Designed email layout templates (newsletter, transactional, promo, notification) with clear hierarchy and visual structure.
- Ensured responsive behavior: HTML + CSS email development tailored for multiple screen sizes.
- Defined a modular design system for emails — components, typography, spacing, and layout rules to ensure consistency.
- Implemented accessible design practices (readable fonts, contrast, semantic structure) to improve readability across devices.
- Integrated calls-to-action with emphasis on clarity and user flow.
- Tested across major email clients and devices to ensure rendering consistency.
Design Process
1. Audit & Analysis
- Reviewed existing email templates to identify inconsistencies, layout issues, and responsiveness problems.
- Analyzed open-rate, click-through, and engagement metrics (where available) to identify weaker emails.
- Mapped pain points: readability issues, broken layouts on mobile, inconsistent visual hierarchy, and unclear CTAs.
2. Wireframing & Layout Planning
- Sketched low-fidelity wireframes outlining layout, hierarchy, spacing, and content blocks for each template type.
- Defined common components (header, footer, hero section, content block, CTA button, footer links) for reuse.
3. Visual Design & Prototyping
- Created high-fidelity mockups for desktop and mobile views, aligning with brand guidelines (colors, typography, spacing, imagery).
- Designed visually appealing hero and content sections, readable typography, clear buttons, and consistent styling across templates.
4. Development & Responsive Implementation
- Built email HTML/CSS templates, ensuring responsive design and fallback for clients with limited CSS support.
- Used fluid layouts, inline styles, and tested across popular clients (Gmail, Outlook, iOS Mail, etc.) to ensure compatibility.
5. QA & Testing
- Conducted cross-client, cross-device testing.
- Validated readability, layout integrity, image loading, link actions, and CTA visibility.
- Iterated on templates to correct rendering issues and improve accessibility.
What I Learned:
- Designing emails is a balance of aesthetics and
technical constraints.
- Testing is essential across clients.
- Systems thinking increases long-term efficiency.
