Redesigning the Lens Package Selection Screen for Single Vision Lenses: a UI/UX case study

Project Overview

What is Lenskart

Lenskart is a leading online retailer for eyewear, offering a vast selection of frames and lenses tailored to each customer’s unique needs. This project specifically focused on redesigning the Lens Package selection screen for Single Vision Lenses to improve the user experience and streamline the lens selection process.

Duration

4 days

Market

Lenskart primarily operates in the Indian market, but has expanded to international markets as well. The redesigned lens package selection screen was targeted towards all Lenskart’s users, who have a diverse age range and are looking for Single Vision Lenses.

Platform

Mobile application

Problem Statement

The problem at hand is to redesign Lenskart’s lens selection screen and optimise the user flow to enhance user experience, streamline the selection process, and align better with the users’ needs and business offerings.

Goals

1. Improve User Experience: Enhance the overall design of the lens selection screen to make it more intuitive, user-friendly, and engaging. This includes elements like visual cues, clarity of information, and ease of navigation.
2. Optimise User Flow: Review and restructure the order of lens selection and prescription input process to ensure a seamless flow that aligns with the user’s natural decision-making process.
3. Align with User Needs and Decision-Making Points: Design a lens selection screen that takes into account users’ key decision-making factors, such as lens features, cost, and their unique vision requirements.
4. Highlight Business Offerings: Effectively showcase Lenskart’s wide range of lens options and unique offerings, making it easier for users to understand and choose between different types of lenses

📹 The Prototype

In conclusion, this redesign project focused on improving the Lens Package screen of Lenskart’s app. The developed prototype illustrates the ‘Submit Power Later’ use case, prioritising the lens selection process over the power submission.

🔎 User Research

This phase aims to uncover user pain points, needs, and the overall landscape of the lens selection system.

1. User interviews

Over a span of three days, I interviewed 7 individuals who regularly use glasses. This diverse pool of interviewees allowed me to gain valuable insights into different users’ perspectives. These participants represented a diverse cross-section of our target audience, falling within the age range of 16 to 50.

During these interviews, I explored various topics, including their current experiences with lens selection processes, their preferred sequence , their understanding and valuation of different lens features, and their overall shopping experience on Lenskart or similar platforms.

Questions :

1. How often do you purchase glasses online?
2. Have you used Lenskart or a similar platform before? If so, can you describe your experience?
3. What do you like or dislike about the current lens selection process?
4. When shopping for glasses, what are your key decision-making factors?
5. How well do you understand different lens features such as anti-glare, UV protection, etc? Would additional information or explanations be helpful during your selection process?
6. Did you face any challenges or confusion during the lens selection process? If yes, what were they?
7. What improvements would you suggest for a more streamlined and user-friendly lens selection process?
8. How does the lens selection process impact your overall shopping experience and your decision to purchase?

2. Key findings from User Interviews

1. Need for Simplified Information: Users often find the lens selection process complex due to the array of options and terminology. They need information about lens types and features to be presented in a simplified and understandable way.
2. User Flow Preferences: The sequence of steps (lens selection vs entering prescription) may affect the user experience significantly. Some users might prefer entering prescription details first to get more personalised lens recommendations.
3. Visual Aid Requirement: Visual representations, such as images or AR features, can greatly enhance the user’s understanding of how a particular lens would look or perform.
4. Highlighting Decision Factors: Factors such as cost, and additional features are critical in decision making. These elements should be clearly highlighted during the lens selection process.

3. Competitor analysis

I conducted a detailed examination of Lenskart’s rivals in the eyewear market, specifically focusing on Titan Eye Plus and Fastrack Eyewear. I evaluated each of these platforms based on several critical aspects, such as the variety of lens types offered, the user interface of the lens selection process, the use of AR/VR try-on features, the transparency of pricing, the depth of information provided about each lens.

🧑‍💻 Ideate

The ideation phase was all about taking the insights I gathered during the research phase and converting them into actionable solutions. During the ideation phase, a significant focus was put on redesigning Lenskart’s user flow. I took into consideration the user feedback received during the interview phase along with the insights from your competitor analysis. The result was an idea to optimise Lenskart’s user flow to make it more logical and intuitive for the users.

1. User flow

As part of your ideation phase, a crucial aspect was deciding the order of operations in the user flow — whether users should input their prescription (power) details first or select their lenses first. Given the insights from your user interviews, I decided to conduct a comparison between these two options to determine which would offer the most user-friendly experience.

On comparing, I found that asking for prescription details first had several advantages. It would streamline the lens selection process by eliminating lenses that are not compatible with the user’s prescription, thus reducing the decision-making burden on the user.

On the other hand, selecting lenses first, as is the current practice, could lead to users browsing through lenses that may not be suitable for their prescription, leading to a frustrating experience. However, it might provide users with a broader view of all the lens options available before they narrow down their choices.

After careful consideration, I decided that asking for prescription details first would be more beneficial. It aligns better with user needs, simplifies their decision-making process, and offers a more efficient, personalised user journey, thus enhancing the overall user experience on Lenskart.

The new flow :

3. Lets talk design

In the design phase , I leverage the insights gathered from my research phase and the structure laid down during the ideation and sketching phases to craft a visually engaging and easy-to-use app interface. This phase is where I worked on the high-fidelity design of the app and turn my ideas into a concrete, tangible design that users can interact with.

Lens Package screen ( First Iteration )

The redesigned lens package screen emphasise strategic upselling through highlighting lens features, prompting users to consider higher value purchases. It bolsters pricing transparency by displaying individual lens cost, enhancing perceived value. Furthermore, the introduction of discounts adds to the attractiveness of the offerings, likely boosting conversion rates. Overall, the redesign balances a user-centric approach with Lenskart’s business objectives.

First version of the Lens Package screen

Testing

Upon testing the redesigned lens package screen, a mix of responses emerged. Users appreciated the highlighting of lens features, prompting them to explore more expensive options.

However, the direct pricing approach deterred some, indicating that the current total cost presentation (inclusive of the lens) was more palatable.

Additionally, users expressed a desire for visual representation of lenses, emphasising the importance of visual cues in their decision-making process.

Therefore, balancing cost presentation and incorporating visual elements emerged as crucial design improvements.

Testing out the competitors

Upon comparing features offered by Fastrack and Titan Eye Plus, user feedback showed mixed results. Fastrack’s AR feature, while highly intuitive for some, proved challenging for older users to understand and use efficiently. It indicated a steep learning curve for certain demographics.

Titan Eye Plus, meanwhile, was perceived as overcrowded and potentially misleading by several users. These insights reinforced the need for a balance between innovative features and straightforward usability in lens selection design.

Comparing the Lens selection screen of the competitors

Lens Package screen (Final)

Following an insightful round of user feedback and a comprehensive competitor analysis, further refinements were made to the lens package screen design. A significant change incorporated was the inclusion of imagery on the lens selection cards. This was in direct response to users’ expressed desire for visual cues during their decision-making process. These images not only made the selection process more engaging and informative but also allowed users to have a better grasp of what they were choosing, leading to increased satisfaction.

Another key alteration was the modification of the pricing presentation. The feedback received indicated a clear preference for the total cost approach, inclusive of the lens price. This method was found to be more palatable to users, deterring fewer people from proceeding with their purchase.

Other change

1. Design Consistency: The app was redefined to ensure consistent use of buttons across different screens. This promotes a more seamless user experience and simplifies the learning curve for new users.
2. Colour Palette: The colour palette of the app was standardised. A consistent colour scheme not only strengthens brand identity but also enhances the visual appeal and the overall user experience.
3. User Flow Adjustment: A significant change was implemented in the user flow. Whether it was deciding on the lens power before the lens type or vice versa, the modification was made after careful analysis of user feedback and business objectives, providing a more intuitive and logical path for the users.

A fundamental shift in the user flow was implemented — switching the lens power or prescription step before the lens selection.

This simple alteration not only improved the user experience but also eliminated the need for users to backtrack and reselect a different lens type. It personalised the shopping experience, made lens selection more efficient, and led to overall positive feedback from the users. It reinforced the fact that sometimes small changes in the flow can significantly impact the user’s journey and their satisfaction with the service.

Attention Heatmap testing

To validate the effectiveness of the redesigned lens selection cards/modals, I employed the “Attention Insight” plugin to run an attention heatmap test. This test was performed on both the existing design and the new design

1. The test revealed significant improvements in user attention towards lens features in the redesigned cards/modals, indicating a successful shift in visual hierarchy.
2. The new design not only improved the optimal clarity rate from 74% to 85%, but also encouraged users to scroll down through the options.
3. The intentional design change successfully nudged users to explore and potentially select higher variant lenses.

Conclusion

Although my focus was solely on the Lens Package screen and not on the prescription input page, the decision to alter the user flow demonstrated the potential for a more personalised and efficient lens selection experience.

The iterations

Also a point to be noted was the images used on the lens packaging screen could have been better. Images that showed the difference between the normal lens and the chosen lens would be apt.

With further user testing across diverse demographics, we can gain more insights to fine-tune the design, aligning it more accurately with users’ needs and decision-making processes, all the while meeting the business goals.