ANJ Website Revamp: The NEXT WAVE Experience
Redefining the digital legacy of an industry giant. For over 40 years, ANJ has defined physical workspaces in India. However, their digital presence remained stuck in the past. As the Lead UX Designer, I steered the end-to-end redesign of their platform to align with their new "NEXT WAVE" brand identity. The result was a responsive, accessible, and data-driven experience that didn't just look modern—it delivered a 40% increase in user engagement and solidified their position as a tech-forward leader.
Timeline
May 2020 – Dec 2021
Team
Role
Lead UX Designer Research, Ideation, Prototyping, Delivery
The Problem Context
ANJ, a 40-year veteran in the Design & Build industry, was launching its new brand identity: NEXT WAVE. However, their existing digital presence contradicted this new vision of innovation.
The Challenges
Fragmented Identity: The site failed to communicate the modern, forward-thinking ethos of the "NEXT WAVE" concept.
Accessibility Barriers: Non-responsive layouts alienated mobile users, and the site lacked basic accessibility compliance.
High Cognitive Load: Poor navigation and cluttered layouts frustrated users, leading to weak engagement and task failure.
The Strategic Objectives
The goal was not just a visual refresh, but a total experience overhaul to position ANJ as an industry leader.
Brand Integration: Seamlessly weave the "NEXT WAVE" philosophy (Innovation, Technology, Sustainability) into the UI.
Optimize Usability: Streamline Information Architecture (IA) to reduce friction.
Ensure Inclusivity: Achieve WCAG 2.1 AA compliance and full device responsiveness.
The Process
We adopted a phased, user-centric approach to ensure design decisions were data-backed rather than just aesthetic.
Phase 1: Discovery & Validation
Conducted surveys with employees, clients, and stakeholders to map expectations.
Assessed the viability of the "NEXT WAVE" concept through concept validation sessions.
Phase 2: Sizing & Prioritization
Identified critical pain points (Navigation, Mobile Responsiveness) and allocated resources to high-impact areas.
Phase 3: Iterative Design
Executed wireframing and prototyping cycles, validating decisions through usability testing before moving to high-fidelity.
The Solution: Design & Execution
The new design utilized a minimalist, technology-focused framework that let the content—and the brand—breathe.
A. Core Experience Upgrades
Responsive Framework: Built a fully fluid layout optimized for desktop, tablet, and mobile, capturing the previously lost mobile audience.
Accessibility First: Implemented adjustable text sizes, keyboard navigation, and high-contrast modes to meet WCAG 2.1 AA standards.
Micro-Interactions: Added dynamic hover effects and transitions to guide users and make the interface feel "alive."
Fixing Images and Text
Images: Don't set images to a fixed width (e.g., 500px). Set them to Fill so they resize with the column. To stop them from getting too tall, lock their Aspect Ratio (the lock icon next to dimensions).
Text: If your text breaks awkwardly on different screens, avoid manual line breaks. Use the "Fit" setting for headings if you want them to scale down massively, but usually, a standard text box set to Fill width is safer.
The Impact (Results Matrix)
Engagement Low interaction40% increase in click-throughs via interactive elements.
Accessibility Non-compliant 80% enhancement; fully WCAG 2.1 AA compliant.
Navigation Weak / Unclear 55% boost in engagement due to intuitive IA.
Mobile Experience Non-optimized100% Responsive across all devices.
Brand Perception OutdatedStrong leadership positioning as an innovator.
Personal Takeaway
Balancing Act: Learned to balance aggressive brand expression (NEXT WAVE) with fundamental usability principles.
Technical Proficiency: Deepened expertise in responsive grid systems and accessibility standards (WCAG).
Research-Led Design: Validated that investing time in early user surveys and prioritization matrices significantly reduces friction during the design phase.