Responsive Website Design
PROJECT OVERVIEW
Impactify’s official website required a complete overhaul. I was responsible for the full redesign, which went through multiple rounds of iteration from low- to high-fidelity prototypes and continued through the visual and development stages to refine both structure and aesthetics. I led the entire build in WordPress and produced all visual assets, motion graphics, and video materials for the new website.MY ROLE
UI/UX Designer, Brand Designer, Motion Designer , Prototyping → Website Launch
TOOLSFigma, Adobe Illustrator, After Effects, Wordpress.
MY DESIGN PROCESS
Research → Define → Ideate → Prototype →Test →↺
SUMMARYChallenge
- The website lacked the professionalism and data-driven authority required of a next-generation video ad tech platform when engaging with premium publishers.
- Through data analysis and user journey evaluation of the existing site, the value proposition was found to be vague, making it difficult to differentiate from traditional Ad Tech competitors.
- The website needed to simultaneously serve the diverse information needs of Publishers, Advertisers, and potential recruits.
- The site's information architecture and visual design were outdated, contradicting the image of an innovative tech company and hindering client engagement and conversion.
Solution
- Implemented a clean, modern, and responsive design language, highlighting the concepts of "Intelligence" and "Balance" to establish an image of technological leadership.
- Positioned "high eCPM yield" and "superior user experience" as the core narrative, utilizing clear charts and case studies to substantiate the platform's technological advantage.
- Based on the results of user segmentation data analysis, restructured content to ensure different visitor segments could quickly navigate to customized solution pages.
- Prominently featured platform performance metrics, third-party certifications, and client testimonials, and utilized A/B Testing to ensure the effectiveness of the conversion flow and key information, building trust.
Key Results
- Successfully repositioned the website to reflect an industry-leading Ad Tech brand, strongly supporting the sales team's high-level client negotiations.
- Validated new CTA placement and messaging through design-driven A/B testing, optimizing user conversion paths for key calls-to-action and consultation inquiries, successfully achieving higher user engagement efficiency.
- Established a unified design language that aligns with product UIs and marketing materials, ensuring overall brand professionalism.
- Designed the website to meet international performance and accessibility standards, addressing the needs for speed and performance for a global user base.
RESEARCH COMPETITOR ANALYSIS
Analysis Framework: We deconstructed each platform across nine critical dimensions:
- market positioning
- video format offerings
- publisher network quality
- core technology stack
- targeting capabilities
- measurement tools
- pricing models
- key differentiators
- typical client profiles.
- Market Polarization: The market is clearly divided between premium platforms (Teads, Unruly) commanding higher CPMs through exclusive publisher relationships, and performance-oriented platforms (Taboola) competing on scale and direct-response metrics.
- Technology Convergence: Core video serving capabilities have become largely commoditized across platforms. Differentiation now stems from specialized features—Unruly's emotional targeting, GumGum's contextual intelligence, or Teads' viewability optimization.
- Publisher Networks as Moat: Premium publisher partnerships remain the strongest competitive advantage, with Teads and Unruly's quality-over-quantity approach creating significant pricing power.
Strategic Opportunity:
Our analysis revealed a clear market gap between premium-priced solutions and mass-market platforms. While competitors invest heavily in proprietary technology or exclusive partnerships, there's an underserved segment seeking customizable, competitively-priced solutions with responsive service. This positioning would allow us to compete on agility and customer-centricity rather than technical features alone.
Stakeholder Insights:
Through intensive working sessions with Sales, IT, and Customer Success teams, I uncovered critical usage patterns that would shape our design strategy: User Behavior Reality Check: Our analytics revealed that 78% of traffic consisted of existing clients who spent less than 8 seconds on the homepage before clicking login. The remaining visitors were primarily qualified prospects already deep in the sales funnel, comparing us against competitors they'd thoroughly researched.
- Prospects typically arrived having already seen Teads' polished presentations and expected similar sophistication
- The website served as a "credibility checkpoint" rather than a primary sales tool
- Most deals were won through direct relationships and competitive pricing, not website conversions
- Sales specifically requested visual assets they could repurpose in pitch decks
Key Insight:
Unlike our competitors who use their sites for lead generation, ours functioned as a trust signal for prospects already in conversation with sales.
This meant we could focus on immediate visual impact and credibility markers rather than lengthy conversion funnels or detailed product education.
Strategic Implication:
The design needed to work hardest in the first 3 seconds creating enough premium perception to satisfy quick credibility checks while providing sales with arsenal of reusable visual assets.
DEFINE
I deconstructed competitor websites into modular components, using color coded sticky notes to categorize and compare elements (e.g., blue = contact/CTA sections). This visual mapping revealed positioning patterns and structural approaches across brands.
Findings:Major players opted for clean, minimal structures. Smaller competitors showed polarized approaches—extreme simplicity or convoluted complexity.
Unruly employed a modular reuse strategy, repeating product logic components across pages.
This approach has trade-offs: it simplifies content management and reinforces key messages through repetition, but can also compound navigational complexity as pages accumulate similar structural patterns.
THE CHALLENGE
- No proprietary video format
- Limited content assets
- Zero advertising budget
- Sales & price-driven acquisition
- HIPPO wants a complex site architecture to look more “comprehensive” & “premium”
- Two visitor types: existing users (direct login) & sales prospects (brief review)
Currently, we lack a proprietary advertising video format and rely primarily on local sales teams and competitive pricing to acquire clients. While leadership aspired to match the content richness of Teads' website, we didn't have sufficient content assets to support such an extensive presentation.
Additionally, without a media advertising budget, our website traffic consisted mainly of two groups: existing users who immediately navigate to the login portal without exploring the site, and prospective clients already engaged by our sales team who would briefly review the landing page during their evaluation process.
THE OBJECTIVEReframe the website from a feature showcase to a confidence builder: Create immediate premium perception for prospects while streamlining access for existing users. Balance leadership's desire for comprehensive content with the reality that visitors spend less than 10 seconds on site. Transform our lack of proprietary technology into a selling point about customization and service excellence.
IDEATE Our marketing team workshops involved mapping competitor websites with sticky notes, revealing common patterns and gaps. We used a dual-pathway architecture that immediately segments users into Advertiser or Publisher tracks, each with tailored solutions minimizing decision fatigue and accelerating path to relevant content.
Low - Mid Fidelity WireframesBased on the finalized content structure, I quickly created low-fidelity wireframes for both mobile and desktop versions.
The homepage serves as a neutral entry point emphasizing success stories over feature lists, while persistent login CTAs in the top right corner serve our primary users. Most critically, we placed hero video content above the fold understanding that video ad buyers judge video platforms by their video presentation quality. This video first approach instantly demonstrates our capabilities within the crucial 3 second attention window.
During iteration, we refined details like repositioning "Contact Us" from being grouped with login on the right to sitting with primary navigation, creating clearer logical separation between new user actions and existing user access.
High Fidelity Wireframes
After confirming that a developer would support the implementation, I had the freedom to explore a more expressive visual direction in Figma.
Based on our strategic analysis, we needed to capture attention within seconds, so we aimed for a significant visual shift from the legacy website.
Legacy Website
Based on our competitive analysis, I envisioned a visual direction that conveyed technological sophistication without proprietary tech. Using luminous geometry, gradients, and depth, the design projected a bold, futuristic aesthetic.
Visual cue
Inspired by the new logo I designed for the company, I derived dynamic movement from its two intersecting planes and translated that sense of motion into the page layout. Through extensive experimentation with irregular forms, I developed an organic and lively composition that clearly distinguished us from competitors’ predictable layouts.
Design iterations
Home page design process
Publishers page design process
The version I designed and we finalized at the time (v4.8) featured a variant of our logo as the background of the hero section, accompanied by a video created by another 3D designer that showcased our format. The lower structure of the logo extended downward, resembling the base of a smartphone, naturally guiding users to continue scrolling.
Lottie Animations
The assets from this phase were also designed for reuse in PPT decks and other channels.
PROTOTYPEWith the project timeline tightening and the assigned developer becoming unavailable due to a higher-priority task, I took on the implementation using a platform-based approach. After team evaluation, WordPress was chosen as the most practical solution.
Translating the Figma design to WordPress was challenging, particularly with diagonal section transitions, which I solved using angled masks. This version was not documented with screenshots, but the process involved systematizing parts of the design to ensure feasibility while preserving the core intent.
TEST The launch generated valuable feedback across departments and external partners, catalyzing our next iteration.
Strategic Pivot: We reimagined the information architecture to immediately segment audiences, ensuring advertisers and publishers would find tailored pathways from the hero page.
Our newly developed proprietary video formats became the centerpiece, demanding strategic emphasis. Visually, we transitioned from bold statements to letting our format innovations speak for themselves.
Lo-Fi Wireframes of Version 5.0
Validation Approach: Through rapid A/B testing with internal stakeholders and client representatives sourced by sales, we tested critical decisions including homepage segmentation methods, content sequencing, format prioritization, marketing angles, hero video quantities, and background treatments.
Design Evolution: The testing insights drove a swift redesign. I eliminated diagonal transitions, channeling energy into dynamic storytelling and crafting over 20 unique web animations that brought each format to life.
Web Animations
CLOSING
Strategy and Core Insight: This full website redesign began as a complete overhaul of the official website. The strategy was then driven by the insight that the site functioned as a sales "Credibility Checkpoint," not a lead generator. The main goal was to establish a premium visual perception within the user's critical 3 seconds and position the company as a flexible service provider.
Execution and Innovation: I transformed resource limitations into visual advantages by using bright shapes and unique layouts to make the brand stand out from competitors' minimalist designs. I led the prototyping and overcame WordPress challenges. I successfully implemented features like diagonal transitions using special angled layers and a two path system (Advertiser/Publisher) to help users find information faster.
Outcome and Impact: After the launch, quick A/B testing led to a strategic change that highlighted the new unique video products. The final, impactful design, featuring over 20 Lottie animations, demonstrates the use of smart design strategy and adaptable technical work to create a successful website.