Frodoh Reimagined: From Understated to Unmissable
Transforming Frodoh’s website into a high-impact platform that captures attention and builds trust.
project overview
Frodoh is a specialized Supply Side Platform for Connected TV ad buying, powering premium CTV inventory across APAC. The project focused on a complete website redesign to create a modern, clean aesthetic that clearly communicates the platform’s offerings.
My Role
Led the redesign of the Frodoh website, rethinking layouts, refining the visual language, and building a cohesive, modern interface.
tool
Figma
Timeline
2 Weeks
Audit of the Old Design
Before redesigning, I conducted a detailed review of Frodoh’s existing website from a User Interface and design perspective.
Several key issues emerged that hindered the site’s ability to communicate the brand effectively and provide a seamless user experience.
Layout and
Hierarchy
Poor spacing and inconsistent alignment made pages feel cramped and cluttered, reducing clarity, focus, and overall professionalism.
Visual
Inconsistency
The website’s inconsistent colors, typography, and UI elements weakened the brand and created a disjointed experience. A dated, limited color palette further reduced visual appeal and clarity.
Typography
Irregular use of font styles and sizes created a disjointed reading experience, while low text contrast further reduced readability.
Imagery &
Graphics
The website relied too heavily on dense text, with few meaningful visuals. Existing images lacked impact and relevance, missing chances to engage users or support the messaging.
Lack of Clear Call-to-Actions (CTAs)
The website lacked clear, prominent CTAs, leaving users unsure of next steps and leading to missed engagement and conversion opportunities.
Competitive Analysis
I saw the value of a clean and modern UI, but I wanted to take it a step further by introducing a clearer, more compelling message right up front.
It also became clear to me how important it is to explain complex offerings in a simple, approachable way. So I made sure Frodoh’s content was well-structured and spacious, steering clear of visual overload.
I recognized the risk of overwhelming users with too much content and too little organization, which is why I focused heavily on hierarchy and intuitive navigation to help users find what they need faster.
And while bold visuals can be eye-catching, I wanted to make sure Frodoh’s design never sacrificed clarity or performance for the sake of flair.
Redefining the Experience
Typography and Color
The original color palette was intentionally retained to preserve brand consistency. Instead of changing it, I focused on using the existing colors more purposefully to improve contrast, establish hierarchy, and enhance clarity across the site.
Previously, Franklin Gothic Demi was used for headings and Franklin Gothic Book Regular for body text. While functional, it lacked a modern touch and affected readability in some cases.
In the redesign, I introduced Bricolage Grotesque for headings to bring character and boldness, and Inter for body text to ensure readability and a clean, modern feel.
homepage
An unfocused first impression that failed to connect
The above-the-fold area is vital for capturing attention and communicating value. In Frodoh’s old design, the weak heading, generic background, and poor contrast made it hard to grasp the brand’s message. The call-to-action was present but lacked visibility, leading to missed engagement opportunities.
The above-the-fold experience was redesigned for clarity, energy, and purpose. A full-screen autoplay video grounds the brand in the real world, showing people watching TV and scenes from metro stations where Frodoh’s ads appear.
A bold headline and clear subtext communicate Frodoh’s focus on modern, screen-first, data-driven advertising, while a visible “Let’s Connect” CTA encourages engagement.
A compact feature strip below highlights core offerings like Connected TV, Digital Out-of-Home (DOOH), and First-Screen Targeting, each paired with intuitive icons.
The result is an above-the-fold experience that captures attention, delivers clarity, and drives action instantly.
I explored multiple directions before arriving at the final hero section. Each iteration helped refine not just the visuals, but how we communicated Frodoh’s bold personality and offerings.
Iteration 1
I started with a bright, modern layout featuring a clean white background. It looked fresh and minimal, but it didn’t quite capture the bold energy FrodoH stood for. The section felt a bit too safe, almost too quiet.
Iteration 2
To add more energy, I introduced subtle text animations and used strips of the brand color to highlight key words. It grabbed more attention, but beyond the initial visual hook, it still felt flat and didn’t carry enough weight to reflect the brand’s personality.
Iteration 3
Next, I brought in a full-screen image of people watching TV, something that directly tied into FrodoH’s connected TV solutions. While it provided some context, the overall layout felt a little like it was missing punchyness.
Iteration 4
This is where things clicked. I swapped the static background for a fullscreen video that immediately showcased Frodoh’s offerings in action. The video injected life and motion while clearly communicating the value proposition. I also introduced a horizontal strip underneath to highlight core services. This version felt bold and intentional.
An overwhelming feature section that disrupted the user journey
Right after the above-the-fold section, the old homepage dove into a dense list of technical features, disrupting the flow and overwhelming users. Without context, hierarchy, or storytelling, it failed to clearly convey what Frodoh does or why it matters.
Introducing “Why Frodoh?” to build clarity and connection
To create a smoother flow after the fold, a new “Why Frodoh?” section introduces the brand’s value through a clear headline, engaging visuals, and concise benefits. An illustrated billboard graphic reinforces the idea of big-screen advertising, while focused copy highlights key advantages like data-driven targeting and premium placements. A visible “Let’s Connect” CTA encourages users to take the next step.
Iteration 1
I started by placing the text inside a boxed shape to give it structure. But visually, it felt too floaty, disconnected and awkwardly placed without any anchoring elements. It didn’t carry the weight it needed to.
Iteration 2
Then I experimented with placing all the content inside a TV frame, a direct nod to Frodoh’s Connected TV services. While the idea was conceptually strong, the text ended up clashing with the video playing in the background. Dimming the video made the design feel flat, and leaving it as-is hurt readability.
Iteration 3
Next, I removed all containers and let the content sit freely on the background. But this backfired, the section felt small and easy to overlook. It lacked presence and blended too much into the section below. It didn’t feel important.
Iteration 4
The final version placed the headline inside a bold billboard banner, a visual metaphor that connected instantly with Frodoh’s outdoor and bold media presence. The section was spaced generously above and below, giving it breathing room and clarity. It finally felt like it had purpose, presence, and the punch it needed.
Bringing Frodoh’s core offerings to life with clarity and context
Users are first introduced to Frodoh’s core concepts: Connected TV, Digital Out-of-Home (DOOH), and First-Screen Targeting, placed right at the top above the fold.
This initial glimpse provides a clear and simple overview to spark interest. As users scroll down, they arrive at the section that truly brings these concepts to life, offering detailed explanations supported by engaging imagery and carefully crafted copy. This elaboration helps users fully understand each solution’s value, making the complex offerings approachable and compelling.
This gradual reveal helps users connect the dots without feeling overwhelmed, turning initial intrigue into a deeper understanding of Frodoh’s unique strengths.
Ending the journey with a clear and timely call to action
After guiding users through Frodoh’s core offerings, impact, and credibility, the homepage concludes with one final, well-timed nudge. Positioned as a natural next step rather than a hard sell, this closing section invites users to take action whether they’re curious, interested, or ready to dive in.
About Us
An underdeveloped About page that failed to tell Frodoh’s story
The old About Us page was brief and lacked depth, offering only a short overview of Frodoh’s mission and team. With minimal visuals and limited content, it missed the chance to build trust, engage visitors, and highlight the brand’s story and strengths.
In the redesign, the “About Us” page is completely reimagined to not just inform, but to leave an impression.
One of the most noticeable upgrades is the deliberate use of visuals, starting right from the top. A bold hero section with a full-width background image now sets the tone.
While the previous version stopped at a basic overview, the new layout goes further. A visual of a connected TV displaying the Frodoh logo reinforces the brand’s focus on smart AdTech for connected TV platforms, a subtle but intentional cue to help users associate the company with the space it operates in.
This is followed by a structured Mission, Vision, and Values section, each paired with clean iconography and relevant imagery. Instead of being just text blocks, these core brand principles are now presented with clarity and visual intent making them easier to digest and more impactful.
One of the biggest additions to the page is the Clients section which was completely missing in the earlier version. This was a missed opportunity, especially given that Frodoh has worked with several well-known brands. The new section puts those partnerships front and center. Each client logo sits within a neat block, with subtle hover interactions that enhance the overall visual experience .
To further build trust, the page ends with an Awards section, another new addition. By showcasing industry recognition and campaign accolades, this section helps position Frodoh as not just experienced, but genuinely accomplished in their field.
Products page
A cluttered layout caused by weak visual hierarchy
The previous Product page suffered from poor visual hierarchy, with inconsistent font sizes, weights, and spacing. The lack of clear typographic structure made it difficult to distinguish headings from body text, causing important information to blend together and creating a cluttered, overwhelming experience.
Enhanced Readability and Flow
In contrast to the earlier cluttered layout, the redesigned product page brings clarity and structure through thoughtful use of spacing, hierarchy, and imagery.
Each product: Connected TV, Advertise Across Devices, and Multi-Screen Advantage is clearly separated into its own section, supported by relevant imagery and concise, benefit-driven copy. The generous white space between content blocks makes the information far easier to scan, helping users process and retain key points quickly.
It's a clear example of how simple layout and design improvements can dramatically elevate both usability and perception.
Solutions Page
An unpolished layout that failed to engage users
The old Solutions page looked unpolished, with inconsistent spacing and weak text hierarchy that made content hard to scan. The flat, uninspiring design failed to capture or hold users’ attention.
Creating a structured and engaging layout through clarity and balance
The new design presents the first section in a more visually engaging way by using a bento box layout enhanced with clear numbering, adding both structure and flair. This approach helps users easily navigate and differentiate key points at a glance.
The second section mirrors the clean, spacious style seen in the About page redesign, emphasizing consistent spacing, strong hierarchy, and refined typography. Together, these design choices create a more organized, readable, and inviting experience for users.
To strengthen credibility and showcase real-world impact, the redesigned Frodoh website introduces two entirely new pages: Success Stories and Media.
Success Stories: Proof in Performance
This new section was designed to highlight Frodoh’s work with major clients and the tangible results delivered through their advertising campaigns. Instead of keeping this information buried in decks or sales pitches, we brought it front and center.
Each campaign is features a link to a more detailed case study and a downloadable PDF for offline viewing. This not only builds trust with potential clients but also positions Frodoh as a performance-driven, results-backed partner in the ad-tech space.
Media: Frodoh in the Spotlight
The Media page acts as a central hub for press coverage, showcasing articles and features from respected media outlets. It helps reinforce Frodoh’s growing presence in the industry while offering visitors a third-party lens on the company’s innovation and momentum.
Together, these additions bring a new level of transparency and depth to the site, giving visitors more reasons to believe in Frodoh’s story and capabilities.
A great experience shouldn’t stop at desktop. That’s why every element of the Frodoh redesign was thoughtfully adapted for mobile without cutting corners.
The mobile design delivers the same clarity, polish, and impact as the desktop experience. Whether users are exploring on the go or revisiting from their phone, Frodoh remains just as bold, engaging, and easy to navigate.
Conclusion
The Frodoh website redesign transforms a technically dense and visually inconsistent platform into a clear, engaging, and user-friendly experience. By prioritizing strong visual hierarchy, consistent spacing, and compelling storytelling, the new design guides visitors naturally through Frodoh’s value proposition without overwhelming them.