Design Brief & Problem Statement
Website had high bounce rate indicating that users were leaving the site shortly after arriving. This suggested low engagement and limited interaction with the content.
Objective
Add motion and make the elements alive & interactive which will capture user’s attention and maintain engagement.
To understand the problem, we’ll start by understanding the clear picture, by breaking the brief into smaller chunks (5Ws & 1H).
Breaking down the brief.
Who? | When? | Where? |
|---|---|---|
A promotional agency with specialization in AR/VR tech. | Daily, potential client browsing webpages, during self promotion or client out-reach. | Across browser (web & mobile), used in offices, or on-the-go. |
What? | Why? | How? |
|---|---|---|
A website. | Making visitor stay longer & spend more time on the website. | Enabling motion & animated interactive 3D elements. |
Defining Core Users
The ideal users are Brand Managers from FMCG and Cosmetic brands who want to run cool, tech-driven campaigns. They want their brand to look modern and sharp—like they’re not being left behind in the digital race AR/VR.
They're usually looking for ways to stand out in a cluttered market, and they see AR or interactive experiences as a way to grab attention and make their brand feel fresh.
Identifying Problem
As a Designer what I noticed that previous version of the website had a standard layout, look and feel of traditional marketing agency website. This misaligned with agency’s desired positioning as A Tech Agency—one that pushes boundaries using innovative technologies.
Now this is a new problem along with drop-off issue, I was planning to solve this too.
To better understand why visitors are dropping off as soon as they land, I arranged a call with a target user & analyzed Hotjar reports:
User Interview: A key segment of agency’s website visitors are brand managers, they came with the expectations that MakeAR is a ‘tech agency’ but visually website was telling a different story, website didn’t looked like a creative or techy at all.
The key takeaway was that we had to improve site’s visual identity so that visitors validate agency’s credibility in the “CREATIVE TECH” space.
Behavioral Tracking with Hotjar: After implementing Hotjar to analyze user behavior. Heatmaps and session recordings revealed that users were quickly scanning pages and dropping off, indicating that the website lacked engaging elements to hold their attention or encourage deeper exploration.
These insights confirmed the need to redesign the website one that not only informs but also take users into immersive creativity that MakeAR stands for.
Issues within the Current Flow
Homepage → Portfolio Section → Views a Few Projects → Leaves
Analytics revealed that most users were dropping off early, and the average engagement time was low.
Lack of Interactivity
The site followed a traditional structure, with static text, images, and videos—nothing that grabbed attention or invited interaction.
User-specific Issues
Brand Managers (non-tech) were bouncing quickly because the website didn’t immediately communicate innovation or provide a compelling hook.
Creative Engineers (tech-savvy) came looking for something new and experimental, but the existing site didn’t offer the kind of creative inspiration they expected from a tech agency.
Metrics to be tracked
To measure how effective the new experience was, I tracked a few key metrics:
Average Engagement Time: This will help us understand how long users were staying on the site and if the new interactive elements were holding their attention better than before.
Aha/Wow Moments: Using Hotjar heatmaps, I looked for moments where users stopped scrolling, hovered over an animation, or interacted with something unexpected.
Collaboration with Developers
Collaborated with developers to troubleshoot implementation challenges and ensured the final animations aligned with my vision.
Guided developers achieving the exact motion effect which I had envisioned.
Final Outcome
The landing experience was designed to break away from the traditional approach. I focused on movement, interaction, and a futuristic feel — everything from scroll-based transitions to animated 3D elements that align with MakeAR’s tech-forward vision.
Interactive header built using WebGL. © lusion.co
WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.
Heatmap Insights
Heatmaps revealed increased interaction around the animated hero section. Users were staying longer, scrolling deeper, and exploring more about the agency and projects.
Engagement Boost
Avg. Engagement Time increased from 29 seconds to 1 minute 38 seconds
Ribbon and Floating animation gave the site a feeling of depth and motion — something that sticks in users' minds and reflects MakeAR’s bold & experimental approach.
Wrapping It Up
With a blend of creative tech and purposeful design, we turned a static experience into an interactive journey that speaks directly to both brand managers and tech enthusiasts, leaving a lasting impression.
