Mimicking real-world in UX Design: Skeuomorphism

9 min readMay 14, 2022

Have you noticed the recycle bin icon on your Operating system and wondered why it mimics a real dustbin. well, the answer is obvious, it’s more relatable than anything else, easy to understand for anyone who has used a dustbin, which is also an example of good UX, and this concept is called Skeuomorphism. I used this concept in one of my recent works as a product designer and I’ll be sharing the journey from start to end in this article.

Skeuomorphism?

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files which has also been mentioned above. Skeuomorphism makes interface objects familiar to users by using concepts they recognize. Read more.

and it’s getting better, just like us.

So, I hope that the concept of Skeuomorphism is clear now. So, now I am gonna present How I used this concept in one of my recent works.

How does it start?

Recently, I got a task from one of my Product Managers that is stated below:

On manmatters.com mobile web, The number of users completing the Doctor Appointment funnel is far less than the users coming into it.

So, we need to revamp the appointment funnel in such a way that leads to increasing the completion rate. We need to prepare a new experience with the existing flow and as a motivational reward, we are offering a 10% off offer on prescribed products by doctors on the first purchase. The task is to revamp the funnel and include the offer in it. This update should reflect a better engagement and completion rate in the funnel.

let me start with an overview of the product for which I am solving this problem.

I am working as a Product designer in 2019 founded Mumbai-based startup Mosaic wellness, which owns two brands manmatters.com (Digital Health Clinic for men) and Bebodywise.com (Digital Health Clinic for women). The company solves issues related to hair, skin, sexual health, etc on both of their platforms, gender-wise, and helps people to live more confidently. Both the brands are having a doctor assessment module where users can get a free appointment with specialists doctors just by answering some simple questions related to their existing health state and lifestyle. The current appointment journey looks like this.

Users taps on the Doctor appointment card on the home page and land in this funnel where they need to choose a category for which they seek help and have to answer some simple questions related to their health history and lifestyle, After this, they’ll choose a time slot for the appointment and type of appointment. At last, they’ll receive an appointment confirmation along with the information of the scheduled appointment. This is the whole funnel.

User Interface revamp of the funnel

We improved the overall existing user interface like icons, Checkbox style, Typography, etc.

The new User Interface seems well according to the feedback of team members. After that, we worked on incorporating the 10% offer in the revamped funnel.

Adding the Offer

We started by collecting some references and inspiration from different sources and worked on some iterations which ended with an interface mentioned below

We wanted to keep the offer very upfront which should be easily visible and self-explanatory, hence we kept it on the right side in the header vacant space. We included a Gift icon and text that says “Free Surprise” which makes it much more obvious and also designed a banner along with it, which includes a catchy surprise theme and text that says “Get a Health Surprise on Booking an Appointment”. So the idea was clear that users will get a surprise gift if they book an appointment.

There are two states in this

Close state: This would be the default state where only the Gift icon is visible along with the text.

Open State: In this state, a full banner is visible along with the information on it.

We also add an interaction for the opening and closing state of the offer banner, So when the user will tap on the gift icon it would slide to the left smoothly and the full banner would be visible and it gets close automatically after 1500ms in the same animation style but opposite direction.

The revamp along with the offered update completed and now we conducted a user acceptance test with some team members and real users.

User acceptance test

The new revamped funnel got accepted at first sight only and collected some great feedback, on the other hand, offer interaction was not able to convince users and didn’t perform very well. We collected the feedback about offering interaction

Feedback over offer interaction banner

No indication for tapping on it, Although idea was to increase the user’s curiosity so they were urged to tap and discover nonetheless it didn't work well.
Whenever the banner opens, it makes the user think that they have to do something like tapping on the banner, etc to get the reward unless they read the information on it
Users also tap on the banner to close it. There should be some cross icon or something to close it because users don't know about the 1500ms auto-close feature.

So overall, This method of showing offers was not working as per expectations.

New path

After collecting the feedback and learnings, I started to work on offer visualisation from scratch. This time I started with some key points

Not adding any extra element (just like the extra Gift icon and offer banner in the previous iteration) because it’s increasing the cognitive load, How? We already have 5 categories and a CTA on the first interface and it continues with some questions on upcoming screens, So we don’t want our users to be distracted from the real task.
It’s a gift by us to the user so they should feel gifted with the same emotions of happiness, excitement, and curiosity.

What to do and how to create such an experience?

Let’s start with the real-world scenario.

What happens inside the brain when we receive a gift?

All humans share three chemically driven responses to gift receiving in common.

When it comes to receiving a gift we like, three chemical responses are triggered in the brain. This release of chemicals is responsible for how we feel about ourselves; in most cases, it facilitates bonding and a deeper emotional commitment.

Dopamine: It is stimulated any time we are excited about receiving something, and it is experienced as a short-lived thrill of anticipation.
Oxytocin: This chemical is responsible for creating bonds and solidifying relationships, as it allows us to trust and feel good about others. High levels of oxytocin are released when we receive a gift we love because the gift symbolizes a person caring about and understanding us.
Serotonin: The third chemical that comes into play with gift receiving is serotonin. This neurotransmitter is a stress reducer and status driver, as it delivers feelings of accomplishment and pride.

These emotions are dependent on many external factors so can be very a lot but the one thing that is followed by everybody after receiving the gift is the process of opening it. Let me explain.

What do we do after receiving the gift? The process

The process of opening a gift in the real world is done in several steps like

Opening the Ribbon
Unwrapping the gift paper
Unwrapping the packaging (by this step, we know what’s in the package)
Finally!! Gets the real treat.

On a psychological level, the curiosity remains at its high while performing the first 3 steps mentioned above.

Let’s start mimicking the Emotion

We are starting with giving the feel of receiving a gift and that would be fulfilled by showing a gift to the user up front. We need to inform users about the delight and maintain their curiosity at the same time just like real-world before opening any received gift.

To achieve this, the positioning of the indication should be prominent and steady and the decision of keeping the icon in the header was good for this because even though we get negative feedback in 1st iteration but the idea works well in terms of easy visibility and communication. To give a sense of journey I decided to use the progress bar, So it would be 1–2–3 & Surprise.

I prepared some ideas to get some feedback

Option 1: Showing a continued dotted line after level 3 to maintain the curiosity and urges of finding the hidden quest.

Option 2: Directly show the gift at level 3 instead of the number, which is fulfilling the concept of a received gift but not opened yet.

According to some quick feedback, Option 2 makes more sense to the idea, Hence we decide to move forward with option 2.

Making it more interesting. Elements on the interface are flat design, So Giving a small perspective to the gift icon can make it stand out from the rest interface.

Now, Adding interactivity to make better communication and also give a feel of following the real-world scenario

Opening the Ribbon
Unwrapping the gift paper
Unwrapping the packaging (by this step, we know what’s in the package)
Finally!! Gets the real treat.

Whenever a user lands on this page, this animation will be played one time and will play again and again as the user goes forward in the funnel.

In end it would be something like this, Where Users have reached the scheduled appointment stage, a Gift has popped out, and an offer has been displayed.

Again we went for feedback from different teams and users.

Conclusion of Feedback

Gives a curious hunch, is Very much relatable, easy to get the whole idea.
Motivates to complete the journey.
Makes the funnel more exciting.

Also, fixed some bits of the user interface like making the CTA sticky at the bottom to increase its prominence and get more motivation to tap.

Finally!! We went live with this new communication.

We went live on 14th Feb 2022 with a Total DA view rate was 4,044 (100%) and a total DA Submit rate was 1,241 (30.69%). Generally, it takes approx. one week to see the results of any update in the system but we saw a good spike on 21st Feb 2022 with a total DA view rate was 9,454 (100%) and a total DA Submit rate of 4,631 (48.98%). View rate was spiked because of a campaign but our new update gave great support, it ended up with a good conversion rate and continued with the same.