By building, monetizing, and distributing ad-filtering technologies, eyeo creates solutions that allow all members of the online ecosystem to prosper.
CATEGORY
Web, Branding, UI/UX
SKILLS
Art Direction, UI/UX Design, Visual System Development
TOOLS
Pen & Papers, Sketch, Adobe Illustrator, Adobe Xd, Slack, Figma
Due to professional restrictions and / or the collaborative nature of these projects, specific research artifacts (e.g., user flows and interviews, heatmaps, internal documentation) cannot be shared; illustrative artifacts will be used instead. This case study focuses on design rationale, visual direction, and my role in the creative process.
1. Project Start
Towards the end of 2021, we kicked off the second major redesign of eyeo.com—a project rooted in the need to evolve the brand’s digital presence. The previous version leaned heavily into an anthropocentric direction, with team photos and candid shots from HQ anchoring the visual identity. But times had changed, and so had the narrative we needed to tell.
The new direction called for a shift: away from faces and places, toward a more product-focused, illustration-based aesthetic. It needed to be bold, systematic, and scalable—something that could stand independently while feeling unmistakably “eyeo.” The Creative Director provided the north star. I led the visual execution.
2. Research
Our research phase spanned user interviews, stakeholder workshops, and competitive analysis. Working with UX researchers, we identified that visitors to the old Eyeo site had difficulty understanding the organizational structure. This led us to restructure the main nav and give stronger visual hierarchy to the ‘Projects’ and ‘Solutions’ sections.
We also looked beyond ad tech. From Stripe’s clean system to Mailchimp’s bold illustration work, we drew inspiration from brands that communicate complexity with clarity and character. These references helped shape both tone and form.
brand UI references
web UI navigation diagram
3. Ideation
At this stage, my favorite muscle got its workout—mockups. One direction focused on bold, engaging visuals but presented hierarchy issues for accessibility. While the other direction emphasized minimal interaction friction but lacked distinctiveness. We landed on a hybrid that balanced brand expression with clarity in user flow.
The idea was to strip the visual language down to its essentials: bold typography, meaningful icons, soft shadows, and a color palette limited to four primary hues—each chosen to convey clarity, trust, and professionalism.
style guide / ui elements
ui variations / working space
4. Concepts
We translated the entire visual system into illustrations—scrapping almost every previously-used photo or “real world” motif. From sitemap wireframes to content modules and buttons, everything was built within a consistent grid and type scale, unified through eyeo’s new iconography and color choices.
Although no formal usability testing was planned, I shadowed two product team members using the prototype build, which helped me catch and refine layout inconsistencies.
Medium to high fidelity mockups were created almost immediately. We tested different layout rhythms across desktop, tablet, and mobile—keeping accessibility and performance top-of-mind. The result was a modular design system that worked in harmony across breakpoints.
UX Thinking in Action
While the rebrand leaned heavily into visual storytelling, the UX side of the redesign was an equally essential layer. The previous Eyeo site presented a few key challenges: a dense information architecture, inconsistent visual hierarchy, and friction in navigating between the company’s products, initiatives, and ethos.
Working closely with our UX researcher and content strategist, we mapped out the core user journeys — from partners exploring collaboration opportunities to users wanting to learn more about ad filtering technology. These insights shaped the layout wireframes and ultimately led to simplifying the navigation structure, tightening the content per page, and guiding users more intuitively through the site.
Accessibility was another important focus. We built a system rooted in strong contrast, readable type, and consistent components to ensure compliance and clarity across all devices. While formal usability testing wasn’t part of the scope, we ran quick internal reviews of early mockups to validate information flow and interaction clarity — especially for CTAs and cross-linking between sections.
This approach ensured that the new Eyeo brand wasn’t just a fresh coat of paint but a more usable and thoughtful experience for a diverse set of users.
5. IMPLEMENTATION & DELIVERY
The final product was crisp, bold, and unmistakably eyeo. From the homepage hero section to deep-dive blog pages and footer navigation, every detail followed the same rhythm and rules. Our illustrations—quirky but purposeful—replaced stock photography and gave the site a unique visual fingerprint.
I built a modular design system in Adobe Xd, making it easier for developers to scale the layout across multiple pages. Buttons, cards, nav bars and input fields followed WCAG accessibility contrast guidelines.
We kept select structural elements from the old layout to maintain familiarity for returning users, while elevating the visual experience with modernized illustrations and color blocks.
The strict color palette and modular layout system were deliberate choices to future-proof the design across subpages, campaigns, and internal documentation.
Every illustration was designed not just to decorate, but to clarify messaging — helping users understand abstract concepts faster without relying on dense copy.
6. Retrospective
Looking back, this redesign was one of those rare projects that felt both creatively fulfilling and professionally formative. As the lead designer, I had the space to set the visual tone but also the responsibility to ensure that tone resonated across an entire ecosystem—web, mobile, tablet, and even internal comms.
Working with a cross-functional team—UX researchers, developers, copywriters—meant embracing both collaboration and constraint. Not everything could make it in, and that’s a good thing. We had to make tough calls, trade polish for clarity, and constantly ask ourselves what truly served the user.
The strict color palette, for example, could have felt like a limitation. Instead, it became a tool for sharpening the brand’s visual language. The removal of photography forced us to be more intentional with illustration—every curve, expression, and icon had to do real narrative work. That kind of minimalism is often harder than it looks.
From a personal standpoint, the project taught me how to balance vision with flexibility. How to lead without needing to be loud. How to defend ideas while remaining open to better ones. And how to trust a process that doesn’t always give immediate answers, but always rewards patience.
It also reminded me of why I love design in the first place: it’s not about pixels, it’s about people—what they see, feel, remember. When done right, even the smallest visual decision can shape how someone connects with a product or company. That’s powerful.
In the end, this wasn’t just a rebrand. It was a reframing. Of how eyeo presents itself to the world—and how I see my role in shaping meaningful digital experiences.
