Ashish Sharma Portfolio

About

A guided tool allowing users to measure their glasses by placing them on their phone screen & measuring half the frame, users can accurately determine their frame size (XS, S, M, L, XL) in millimetres. This approach empowers users to trust the results, as they measure their glasses themselves

Company:

Full time with LENSKART

My Role:

Senior Product Designer

Year:

2024

Time period:

3 weeks

Video

Impact

User-driven measurement improved confidence in sizing on app

> Users who utilised Magic Scale showed an 2x jump in conversion from PLP to Cart than user didn't use any sizing tool

> It has 25% higher conversion compared to AR sizing which has been our flagship sizing tool

> Completion rate of using ruler is 55% which shows success of ruler

PLP to cart coversion:

1.9% more ❤️

Return % reduced:

15% less return❤️

Completion %:

55% ❤️

48% user have sizing in system, out of these

> 52% uses AR sizing tool to get their frame size

> 9% uses Ruler for sizing to get their frame size

> 44% uses Past purchase for determining frame size

> 2.5% uses direct selection

Why did we introduce a new sizing tool?

There are 3 methods overall to select/measure size - AR tool, from past purchase, manual selection of size.

> Manual doesn’t give any confidence so it is least affective method

> Past purchase is useful to a repeat customer whose might not have changed but for new user it is not an options

> AR can be good option if you have iOs device as AR uses lidar technology which only few phones have, so its accuracy suffers.

Returns due to
sizing:

6% 🫤

AR sizing accuracy:

~60% 🫤

👉 Most common size is Medium (M)

Primary research

Through 12 user interviews, we understood three main themes

> Why users were returning glasses - 33% for sizing, 50% did not like the frame, rest only want one out of two

> How they currently determine frame size - 45% from AR and other from past purchase

> Pain points with the AR sizing tool

We ran observational sessions where we watched users attempt to use the AR tool in real conditions.

How lighting issues, face alignment errors, and the LiDAR-only limitation on Android caused frustration and abandonment

Important points

👉 Wrong sizing is an actual issue

👉 In 30% cases, user are getting different sizes at different tries from AR

👉 AR errors felt like the app's failure, which is hurting app experience

Physical research

We started by looking at the initial inspiration of the ring sizing tool on the phone. With same philosophy we tried to way a way how to measure a big specs while phone screen.

Brainstorming session

We tested various positions and orientations of folded glasses on the phone screen to determine the most stable and intuitive placement for accurate measurements.

While measuring, it was interesting to note that

> In a few cases, full frame cannot be overlapped with the phone screen, and thus can not be measured.

> Frames need to be placed on the phone screen for better stability & in certain orientation

👉 Through hands-on research, we found that placing the folded glasses upside down provided better stability on the screen and created a clear, consistent reference point for measurement.

Ruler iterations

We did multiple iterations for intro video, user education for how to measure & final experience of measuring frame.

Finalised structure

Important considerations

Referred from the research

> Only half of the frame needs to be measured to get the size

> A introductory video to introduce the scale and what to expect from it

> Onboarding screens with nudges to help user to place glasses appropriately and accurately measure to get good results

Ruler flow

Important decision

Onboarding screens

We had a 3-step onboarding with manual-close nudges, but saw a 40% drop after step 3. We simplified it to 2 steps and switched to auto-hide nudges—resulting in lower drop-off and higher completion rates

Giving feedback with slider

Sizing Change Feedback – This gives users a strong sense of control and confidence in the accuracy of their measurements.

Dynamic Glasses Silhouette – The silhouette adjusts with the slider position, subtly guiding users to align the center correctly, making the process intuitive and seamless.

Together, these elements create a more engaging and user-friendly experience!

Maintaining sizing value (132mm) on the PLP cards from ruler

This approach keeps the context of the ruler intact while ensuring precise sizing, allowing users to see an exact match of glasses on the product listing page (PLP). This not only enhances exploration but also improves confidence in finding the right fit effortlessly

Futher scope of improvement

In the current experience, the ruler isn't personalized—there's no way to associate the 132mm measurement with a user's name, specific glasses, or an image. Adding this layer of personalization could enhance recall, making it easier for users to find and compare glasses that match their exact size

Thanks for reading 😊

About

Company:

Full time with LENSKART

My Role:

Senior Product Designer

Year:

2024

Time period:

3 weeks

How it started

That was the entire brief. No scope. No spec. No guarantee it was even physically possible.

My job was to find out — and make it real.

❓ Can we do something like this for glasses?

Our CEO pointed to a ring sizing tool and asked one question:

Sizing related returns:

36% out of 20% overall

The result?

Understanding the problem

We had 3 sizing methods to help users get this right

> Manual selection : no guidance, no confidence. Users were guessing

> Past purchase : only useful for repeat buyers. Useless for first-timers

> AR tool: Our flagship. But it needed LiDAR, excluding most Android users. Even on supported devices, accuracy was only ~60%

Glasses at Lenskart come in sizes — just like a t-shirt. XS, S, M, L, XL. Get it wrong and the frame sits too wide, too tight, or simply looks off.

My role

> Research — both validating the problem and testing physical feasibility

> Ideation and iterations — from first sketch to final flow

> Working with engineering to spec and ship it

Three weeks. One designer. Zero existing playbook for this.

I owned this project end to end.

The solution

Impact

We expected the ruler to perform around AR. It outperformed it.

Ruler conversion:

4.9% ❤️

Compare with AR sizing:

25% higher❤️

Completion rate:

55% ❤️

Sizing-related returns dropped from 6% to 4.8% after launch.

Returns

Users who measured themselves converted higher than AR — even though AR is technically more sophisticated. Self-measurement built confidence no algorithm could replicate.

👉 We spoke to users who measured and purchased. The reason was consistent — "Because I measured it myself, I trusted the result."

The surprise insight

48% user have sizing in system, out of these

> 52% uses AR sizing tool to get their frame size

> 9% uses Ruler for sizing to get their frame size

> 44% uses Past purchase for determining frame size

> 2.5% uses direct selection

Building it

Shipping Magic Ruler wasn't just a design handoff. Three technical challenges required us to get into the details.

Pixel density calibration

For the ruler to be accurate, every phone screen needed to be mapped to real-world centimetres. The logic: get the screen size in pixels → convert to cm → draw the ruler accordingly.

iOS was straightforward — only a handful of devices to account for.

Android was a different story. Thousands of device variants, no standard. We identified the 70 Android phone models that covered 95% of our users, manually built a database of their screen dimensions, and created an API that detects the device and pulls the correct dimensions automatically. Every measurement on every phone is now accurate.

Drag slider equation

The slider wasn't a native Android component - it was a completely new system. Every element needed to scale correctly across different phone sizes. The ruler had to stay centred, the silhouette had to adjust proportionally, the gradient had to map accurately.

I sat with the developer and we iterated together — writing and testing equations until the system was scalable across all phone sizes.

iOS loop video

The onboarding video needed to loop seamlessly on iOS. Native looping wasn't working reliably.

Our fix - loop a single video 5 times in sequence. Clean, stable, no interruption.

Finding the direction

Through 12 user interviews, we understood three main themes

> Why users were returning glasses - 33% for sizing, 50% did not like the frame, rest only want one out of two

> How they currently determine frame size - 45% from AR and other from past purchase

> In 30% cases, user are getting different sizes at different tries from AR

Also watched users attempt the AR tool in real conditions. Lighting issues, face alignment errors, and Android limitations caused visible frustration and abandonment.

I asked several users directly If you could measure your current glasses yourself, would you?

And 70% users said Yes.

Interesting thing revealed in a interview

👉 I'm already comfortable with my current glasses, why can't I just use that size?

One important scope this revealed:

👉 This tool works for users who only need glasses for distance — their close-up vision is fine so they can still see the screen clearly while measuring. Or users who have a backup pair to wear while measuring their primary glasses.

Core challenge

Earlier reserach validated the problem. Now we needed to find out if the solution was even physically possible.

The core question:

👉 Can we measure a pair of glasses using a phone screen?

Through hands-on testing we found the answer:

👉 Placing the glasses upside down gave the best stability and a clear reference point

👉 Measure only half the frame — half gives you the full size

How users discover the ruler

We didn't hide the ruler in settings. We brought it to where users already were.

> Home- proactive nudge for new users or anyone wanting to redo their size

> Profile- where all saved sizes live, for users returning intentionally

> PLP- we trigger sizing when a new user lands on the product listing page. Users who complete sizing convert 1.5x higher — so surfacing it here was a no-brainer

Three constraints hit immediately:

> Frames are wider than most phone screens — full frame measurement wasn't possible

> Glasses need a stable position

> Without a clear reference point, measurement is inconsistent

key decision

Onboarding screens

Initially, we didn't want onboarding at all — every extra step is a drop-off risk. But the tool was too novel to skip education entirely.

> For 1st iteration - No onboarding Everything explained on the ruler itself. Users had to read instructions while placing glasses simultaneously, too much cognitive load. It failed.

> For 2nd, Explainer video + direct to ruler We added a real-person explainer video before the ruler. But users forgot the instructions by the time they reached the measurement screen. It failed.

> For 3rd, Video + 3 onboarding steps + manual nudges Users finally understood the tool. This shipped as V1. But live data showed drop-off across all 3 steps and manual nudges were being ignored.

> On release of V1 (Iteration 3), Video + 2 steps + auto-dismissible nudges Reduced steps removed friction. Auto nudges appeared contextually — users couldn't ignore them. Drop-off reduced, completion improved.

Slider mechanics

Before designing any interaction, we needed to figure out how to divide the ruler screen. We started by testing existing ruler apps.

One thing was immediately clear — rulers placed at the edge of the screen were hard to use. The glasses would overlap the scale, making it impossible to read the measurement accurately.

So we made two foundational decisions that shaped every screen that followed:

> Move the ruler to the middle - Always visible, never overlapped by the glasses above or the interaction below

> Divide the screen into two clear zones - Top for glasses placement, bottom for interaction

We applied this same logic from the very first onboarding screen — top shows the glasses placement visually, bottom has the Next button. By the time users reached the ruler, the layout already felt familiar.

👉 Consistency from onboarding → ruler meant zero relearning at the most critical moment

Keeping szie context alive

Measuring is only half the job. The real question was - what happens after the user gets their size?

Once measured, we carried the full context forward into the shopping experience:

The measurement doesn't disappear after the tool closes. It follows the user through their shopping journey

👉 132mm + size label shown together on every PLP card — not just the letter M, not just the number. Both together gave users complete confidence they were looking at the right fit

👉 "Perfect fit for you — As per Magic Scale" banner attributes the recommendation directly to the ruler — maintaining the trust chain from measurement all the way to purchase

Slider feedback

Once the slider interaction was defined, we needed users to feel confident about their measurement in real time. We built three feedback mechanisms that work simultaneously:

>Green gradient fills left to right as the user drags — showing exactly how much of the frame has been measured

>Glasses silhouette at the bottom adjusts with the slider — giving visual confirmation that alignment is correct

>Dynamic pill shows the exact measurement updating in real time — always centred in the half silhouette, moves with the slider

Together these three removed the need for any instructional text during measurement. Users could see, feel and read the measurement happening simultaneously — building confidence at every moment of the interaction.

Slider mechanics

While figuring out the measurement process, we tested with existing ruler apps — general purpose rulers where both ends of the slider are movable.

In workshops, we immediately saw confusion. Users didn't know which end to move first, or how to anchor the measurement. For a general ruler that makes sense — but for us the process was already unique. Users were learning something completely new.

👉 Understanding - the interaction had to be immediately obvious

👉 Accuracy - fewer decisions meant fewer chances for error

👉 Simplicity - Minimum action, not too many

We had three priorities:

We simplified to one decision:

Fix the left end at zero → user aligns glasses to zero, drags only the right slider to the centre of the frame

Two things we rejected:

>Both ends movable → confusion, two actions, more chances for error

>Dark mode → better focus but hurt visibility of glasses on screen

👉 One anchor. One action. Easier to understand, easier to get right.