Social media banners often suffer from "contextual breakage"—where critical information or brand imagery is obscured by profile pictures, UI buttons, or varying screen dimensions.

• Fragmentation: Different platforms require unique safe zones and aspect ratios.
• Inconsistency: Previous assets didn't account for how desktop vs. mobile layouts shift, leading to cropped text or hidden logos.
• Redundancy: Creating assets from scratch for every platform was time-inefficient for the design team.

‍

I approached this as a structural problem rather than just a visual one:

• Framework Development: Sourced and refined responsive social media guidelines from the Figma community to establish "Safe Zone" overlays for every major platform and at key device sizes.
• Asset Auditing: I updated these guides to account for recent UI changes (e.g., Facebook’s shifting profile picture alignment and X’s dimension updates).
• Contextual Variation: Designed two distinct visual directions:
  • Corporate Identity: Using an "empty office" motif with a prominent logo for personal professional profiles.
  • Active Engagement: Using "facilitator-led classroom" imagery for the company page to emphasize the human element of HR consulting.
• Stakeholder Alignment: Utilized high-fidelity mockups within Figma to demonstrate to stakeholders exactly how the banners would appear "in the wild" before export.

‍

I delivered a "Responsive Banner Kit" that prioritized both aesthetics and accessibility:

• Dynamic Layouts: Created slight layout variations that used the "shape" of the design to lead the eye toward the platform’s profile picture, integrating the UI into the design rather than fighting it.
• Standardized Figma Library: Organized the project with clear naming conventions and reusable components, making the templates easily accessible for future team use.
• Strategic Visual Hierarchy: Ensured that the primary value proposition remained centered and legible, regardless of how a platform might crop the edges on mobile devices.

‍

The project provided immediate value and long-term utility for the Omni brand:

• Process Optimization: The second phase of this project (8 months later) was completed significantly faster due to the robust template system established in phase one.
• Brand Expansion: The stakeholders were so impressed with the visual direction that they requested the "banner DNA" be applied to other corporate assets, including letterheads and email signatures.
• Team Enablement: The Figma guides remain a live resource for the wider design team, reducing the margin for error on all banner designs for future social media campaigns.

‍

• The "Evergreen" Challenge: This project taught me that digital guidelines are never static. I learned the importance of verifying platform specifications regularly, as even a 10px shift in a profile picture's position can ruin a layout.
• Efficiency vs. Perfection: I realized that front-loading the "boring" work (setting up guides and grids) saves hours of revision time during the feedback loop.
• Design as a System: This was a pivotal moment in my workflow where I stopped viewing designs as "single files" and started viewing them as part of a scalable brand ecosystem.

‍