Augmented Reality App



Olay is an augmented reality app helping users in the store easily know which product is match their needs, compare between products, and personalize the products by filtering or sorting options.

Project Duration




App Screens


Olay Beuaty Brand


Singapore, Malaysia


Research, Analysis, Ideation, Wireframe, Prototype and Usability testing


Understanding the Project

Who is the user?

The Mothers, Ladies, and Girls

Problem space
  • We have thousands of products and not easy for the user to find the product that looking for.
  • The user at the shop asking about the difference between some products, we don’t have something to compare between products easily.
Solution space
  • Creating an App help users easily find the product they looking for. and easily compare between products.
  • Publish the campaigns with no delay.

Design Process

As UX Designer for this project, I was responsible for strategies and visual design.


User interviews

User journey

Pain points




Empathy map

Impact & Effort



New User Journey




User Flow



Usability testing


In discover step:

I went to the biggest Olay section in “Watson” shop Kuala Lumpur, kept watching the users how to find the products that looking for, pick some users to have a problem finding a product or know what is the difference between the products and ask them for a quick interview and give them a gift card.

User Interview:

Meet Nur Irfan

Civil Engineer

  • Working every day in the construction area and wants to care more about her skin.
  • Interested to try more products but not easy to compare products
  • Usually, ask for help in the shop to find a product
  • She felt hard to find a product that she looking for and make sure this fit to her skin
  • Hope to easily buy a product without asking the staff
User Journey
Pain Points
  • Must go to the shop to get a quick help from the staff than online.
  • Hard to make sure this product is good for me or not.
  • Hard to find a product I'm looking for.
  • Not easy to compare between products without asking the stuff.
  • A lot of products in the shop make me hard to take a decision
  • Informations is not enough
  • After finish In-depth interview (15 mins) with 6 persons face to face, All females between 20-40 years old.
  • Goal 1: Find a solution help users compare products.
  • Goal 2: Find a solution help users faster find a product
  • Goal 3: Reduce the headache of asking for staff help.


In define step, I’m trying to:

Analyze the persona, then create the Empathy map, define with stakeholders the main pain points, and prioritize based on the impact and effort to know which features we gonna build first using WSJF method (Worked Shortest Job First).


Nur Irfan

Civil Engineer


    37 years old

    Born in Malaysia

    Mother of 3 kids

  • Reading books
  • Working outdoors in the constructions area
  • Face dust and different weather daily
  • Spend free time with family at home.
Needs and Goals
  • Easy way to know the difference between products
  • A solution to filter the products with helpful options
  • Cheapest products is preferred
Empathy Map
  • How many Olay’s products do you usually use?
  • How can you know this product is good for you?
  • Do you walk to the shop to buy? or order it online? and why?
  • How many times did you try new products?
  • What are the problems and pain points?
  • Tell me one thing need to improve

Impact and Effort

Use Augmented Reality technology experience to easily recognize the products and filter them based on benefit, Skin type, Form, New, and best seller.


Use Augmented reality technology to sort the products based on Price and Rating.


Snap and compare, The user can easily take a photo of a group of products, we recognize each item, the user adds it to can compare between a maximum of 3 products in the same time.


Using Augmented reality technology will help us to improve the user experience by easily catching the group of products and the user easily filter them based on his personalizations and needs such as “Benefits, Skin type, Form, New, Bestseller, and also sorting the products by Price and Rating, We also need to allow the user Snap and compare between maximum 3 products to know the different.


In develop step, I’m trying to:

Develop sketches and high fidelity wireframe for the ideas helps me to solve the users problems.

New User Journey
Self demo wireframe


In develop step, I’m trying to:

Create a high fidelity prototype with interaction to helps me test the usability with a real users.

User Flow

Create a high fidelity prototype with interaction to helps me test the usability with a real users.

Self demo prototype

UT Sessions

Usability Testing

After the visual design was complete, I tested the prototype with 3 representative users to see how user friendly the application is and the problems are solved or not.

The test was conducted over zoom video calls.


The participants were given the following tasks:

  • Try to compare between products

  • Explore the products using AR Experience
  • Filter and sort by the products


The participants were able to navigate through the app fairly, and they gave the following feedback:

  • UI is poor, should be better
  • Not easy to use “Snad & Compare” feature, will be great if we have a tutorial video “How to use”