Designing a Static Fallback Information Page
Time
Nov - Dec 2024
Role
Lead UI/UX Designer
Contributions
Content & Layout Strategy
Design for Dual Page Versions
Responsive Design Implementation
Contact Form & Fallback Design
Developer Handoff & QA
Deliverable
Two high-fidelity fallback page designs
Responsive desktop and mobile layouts
Design specs and annotations for development
Overview
To enhance user experience during website outages, I designed a static fallback information page that provides essential information and navigation options. Hosted at the Cloudflare level to ensure reliability even during WP Engine outages, the page offers links to login, support, and key unaffected resources, while maintaining a fast, lightweight structure.
The page was designed to be simple yet functional, balancing quick load times with a clean, on-brand interface that directs users to alternative support channels and status updates. Additionally, I created two versions—one with a basic contact form and another that defaults to alternative contact information if form submission becomes unavailable.
Goals
Provide login access and support contact options during outages.
Ensure users can access key unaffected resources such as the Privacy Center and Investor Relations.
Embed the ZoomInfo Status Page to give real-time updates on site status and estimated resolution times.
Design with speed and simplicity in mind to minimize load times during connectivity issues.
Offer a fallback contact method if the lead form is unable to process information.
Process
1. Core Content & Layout Exploration
I began by defining a content structure that prioritized the most critical information — placing login links, support details, and status updates in prominent positions for easy access. I explored variations of a clean, static layout that maintained ZoomInfo’s branding while simplifying the user journey during an outage.
2. Dual-Version Design
To address potential form submission failures, I created two fallback versions:
One version with a basic contact form that captures user details (Name, Phone, Title, Email).
Another version that displays alternative contact methods such as a phone number or email when form submission is unavailable.
3. Embedding Status Updates
To keep users informed, I embedded the ZoomInfo Status Page via iframe, ensuring that real-time updates on site status and resolution timelines are easily accessible without requiring additional navigation.
4. Responsive Design
Given that users may need to access this page from various devices, I designed the page ensuring smooth and consistent functionality across desktop, tablet, and mobile breakpoints.
Final Design
The final designs balance clarity, brand alignment, and functionality. Key highlights include:
Login & Support Links: Prominent, easily accessible buttons that guide users to essential resources.
Embedded Status Updates: Seamless iframe integration of the ZoomInfo Status Page to keep users informed.
Contact Form & Fallback Contact Info: Two versions—one with a form and another with alternative contact methods when the form is unavailable.
Responsive Design
Responsive & Lightweight Layout: Optimized for speed and usability, ensuring the page loads quickly even in low-bandwidth conditions.
🚀 Developer Handoff & QA
I prepared detailed Figma specs and responsive variations for both page versions, ensuring all elements—including login links, status updates, and fallback contact info—were documented for smooth development. During QA, I collaborated closely with the development team to validate the performance, fallback behaviors, and responsive consistency across devices.
🎉 Final Outcome & Impact
The redesigned fallback page successfully addressed the need for reliable, brand-aligned communication during outages. The page provided:
Consistent User Access: Ensured users could access login and support pages, minimizing disruption.
Seamless Status Updates: Kept users informed with real-time updates on outage resolution.
Improved User Trust: Reinforced brand reliability and provided clear alternative contact options when needed.
🌟 Takeaways & Learnings
This project highlighted the importance of designing for resilience and simplicity in critical edge cases. I gained deeper insights into creating fail-safe user experiences where alternative paths and fallback behaviors are essential to maintaining trust and usability during outages. It also reinforced the value of dual-version design to account for potential technical limitations.