Creating Better Eyewear Buying Experience
Lenskart is an Indian optical prescription eyewear retail chain through offline and online stores.
One of the main Retail Eyewear Industry brands that have invested in AR technology is to help customers make better and more informed product decisions.
A highly functional example of AR for retail by giving customers a visual representation of how a product will look in real life, the technology can theoretically reduce returns and boost customer satisfaction.
All information in this case study does not necessarily reflect the views of Lenskart.com.
Goals & Understanding the challenges
Recreating the complete flow, right from product listing to shopping cart. Go in every detail element available on current app and explain it better to the user.
Finding out current pain-points in the flow and suggesting solutions to it. Presenting final UI designs with complete flow with simple prototype.
Details
Methods - Survery & Market Research, Interviews, Personas, Usability Testing, Information Architecture, Wireframing, Prototyping, UI Design
Timeline - 4 Days
Tools - Figma, Microsoft Forms
Prototype Solution
Phase 1 - User Research
Survery
To gather a lot of statistical data quickly. I created a Microsoft Form that was complete by 180+ eyewear buyers. These results pointed me towards to basic direction of the problem.
I had used a very sarcastic and engaging survey. I thought of creating a form in Hindi because I personally can feel, how people get bored with a long survey. Funny lines can help to get more insights into users. Form crafting took me about 3 hours because I wanted to keep things open and transparent, wanted to ask neutral and simple questions into the form. That helped me to get better and real insights in a fun way. I got more than 175+ responses. Here are some quotes:
Data āØ Information āØ Insights
69%
of people wear Power Glasses as compared to Sunglasses & Contact Lenses
71%
of people suffer eye issues due to longer working on Laptops & Mobile Phones
80%
of people prefer to buy eyewear from nearby shops as compared to online shopping
84%
of people prefer to buy online eyewear from Lenskart.com as compared to other websites
68%
of people have/prefer online subscriptions
49%
people purchase by checking the features of the eyewear as compared to research on google and reading reviews
Quotes Directly from Users
One-on-one interview/Telphonic interview
To understand what the user thinks and observe during eyewear shopping.
Once I had a general idea about the brand and pain points from the survey, I wanted to gather deeper insight into the problem.
I interviewed 2 people for this project. 1 of them wears Power Glasses & does a lot of online shopping and another really loves to buy Sunglasses very frequently and prefer to buy from nearby Lenskart Stores.
User Personas
A specific instance of the archetype with additional constraints, interest and personality trait.
The results of my survey stated that there were several types of users with different needs. The collection of the different insights and general patterns that came from the usersā answers helped me create three personas which are the manifestation of that data in a character.
These of the personas presented point cases since they were based on certain needs of some of the participants. Therefore, eventually, I centred on the more common persona.
Phase 2 - Define
Journey map
To get a holistic view for a particular user in a specific scenario so that different teams can look into and improve various parts of the journey.
Next, I scripted a typical Shopping for new eyewear for my persona. This process helped me decide how the appās user experience might be designed to fit in with a Shopping for new eyewear.
Competitive Analysis
To identify what solution is working and what competitors are not doing.
To understand solutions already on the market in order to understand the existing market and the gaps in the industry, I decided to establish competitive research and found that Lenskart is the number one solution on the market but even they had some issues related to values and design.
Comparison among Lenskart, Coolwinks, TITAN eyeplus and other companies about features/category
- Adding value
- Using innovative designs that set them apart
- Comparing visual, language styles and usability
- Persona or Feature Driven
- Structure and Problem Driven
Userās Flowchart / Sitemap / Architecture
Science of organizing the data on each page according to the userās expectations. I combined sitemap and information architecture into a single diagram.
Up until now I had a vague idea of how the app will function. Mapping the basic flow of the app forced me to figure each step on the path the users will take throughout the solution. I first sketched it on paper and then digitally rendered it.
Phase 3 - Ideation
Ideation + Validation
After establishing the problem, think of innovative ideas to solve them.
- Users are unable to find eyewear which their role model wears
- Users need to verify the weight of the eyewear
- Users need category according to the occasion like professional, fashion, every day, sports, safety
- More categories will lead to more options for users.
- Users want to know the newly launched fashion of in eyewear.
- Users need category according to age and gender i.e. Male, Female, Kids, Old, Youth
- The user journey from opening the application to buying the eyewear should be minimum as possible.
- Application look should be minimal and easy to access
Sketches
This was the first step to help me outline the app and visually imagine the application design.
I came up with several potential solutions to each of the pain points and made some rough interface sketches.
I did some preliminary validation on the sketches and used the feedback to refine my sketches and narrow down my solutions for the next step of wireframing.
Wireframes
This visual guide represents the skeletal framework of the app.
It helped me arrange the interface elements while I focused on the functionality rather than what it looks like. Moreover, the simplicity of wireframes allows me to quickly test ideas without diving into the details.
Phase 4 - Design
visual Research
Inspiration - Before getting started with the visual design I found inspiration. The purpose was to learn about the visual world and gathering inspiration from other apps.
Iteration - Next I explored different design possibilities: From each repetition of the design I learn something that I can use for the next iteration.
Color Palette - The colors symbolize nature, life, health, youth, spring, hope, renewal, growth, rest, and relaxation. Hence, a color palette is fitting for an app that promotes and natural. Additionally, I used grey for the text and included a great deal of white to give a calm and clean appearance.
Typography - Open Sans is a free Google font designed by Steve Matteson. It is a well-balanced sans serif typeface superfamily that seems to complement the interface. Simplicity was the leading mantra; therefore, I decided to go with just one font family.
Icons - The icons are an important part of the design. They communicate ideas and concepts that should not and sometimes cannot be communicated with words. Furthermore, they allow consistency of the visual aesthetics that help build the users’ trust and produce moments of delight. I used icons from Feather Icons.
Design Principles
I come up with a set of design principles to admit while designing. I need to maintain a direct relationship between the research result and UI design.
- Seamless integration - Each user has a unique choice and selections. The experience needs to be seamlessly integrated into their buying experience without any complicated steps.
- Simple - The process of this app should be simple to use. The users need not learn a new pattern.
- Polite - The design should be beneficial and accessible to the user. There should be no insignificant disturbances.
Design System
Design Solution
Optimized Navigation
I arranged the navigation items according to the priority. Previously, the wallet tab was into the header navigation which was not convenient for users.
Adding relevant and more genuine icons helped to convey better communication with users.
Celebrity Choice
Users can select the eyewear collection according to their role model, brand, and style.
Also, I added top picked and featured a collection of eyewear so users will aware of the latest trend and most picked peopleās choice.
Applying Fittsā Law
Creating minimal details in product listing helps to minimize visual hierarchy.
Fitts's Law provides a model of human movement, which can accurately predict the amount of time taken to move to and select a target
Giving Choices to Users
Adding āYou may also likeā helps users to find a similar product and itās a way to help users to select additional pairs or better choices.
Having a specific rating on Quality, Size, Color, and other parameters help users to understand more insights about the product.
Making Description More Usable
Adding feature of selection of choice like colors, brands and similar product helps users to explore more into the selection choices
Helping Users during the Process
After selection of the right eyewear, user may like to have Home Eye Test to check and confirm the power of the glasses
Right Selection of Package
Creating recommended packages at first priority with better features and quality can help businesses to promote prioritize the right package selection.
Cart with Purchase Assurance
Add purchase assurance about the product helps to bulid brand trust with the users.
Adding more product choice may help users and business to select one more pair of eyewear and explore more products.
Final Interface Design
Learnings
- Lots of challenges to complete each step of research and deliveries in minimum days of time
- Talking with more people with more people gives a lot of new ideas.
- Managing multiple things at a time
AVAILABLE FOR FREELANCE PROJECTS