cyborg inquiry into skincare routine

The act of maintaining and grooming requires tender care and consistency. Good things take time, and self-care is so much more than the act itself — it soothes and revivifies. Taking the routine explored in Madison’s blog, I designed an interface that encapsulates what it means to do skincare beyond the superficial: it refreshes and blooms.

The first step in creating an interface idea is to pick out the key gesture that summarizes the main idea of a skincare routine. To do so, I went to the journey map shown in the blog.

In her routine, her energy peaks first when she washes her face. Then, she moves on to applying different skincare products. When she is done, she is relaxed and ready, whether she is ready to start her day (morning routine) or to get ready to retire for the day (night routine).

I also looked at Chloe’s blog in order to get a sense of what the overall motion is like. Taking the general process of their routines, I simplified it down to a few key gestures: wash face → applying skincare products → relaxed and ready.

To simplify this even further, we can say: rinsing/washing → massaging → reviving/blooming.

Using the gestures of rinsing, massaging, and blooming, I came up with a concept for caring.

From the rinsing/washing → massaging → reviving/blooming gesture, I started brainstorming what verbs are associated and linked with them. My mind instantly thought to some sort of flower or plant, and some similar motions → actions I came up with were:

I initially focused on refreshing as the main concept. I felt that the skincare routine rejuvenates and helps one relax. The image of water came into my mind, which also correlates to the rinsing and washing motion of the routine.

I came up with a manifestation of skincare with a refreshing undertone. The idea is to upkeep a pond and garden of some sort, the nature concept providing a calm and serene atmosphere fitting of the routine. The user essentially taps the screen and drags elements around to grow the pond.

The entire message of a skincare routine reflects the consistency and gentle care into maintaining good skin. Even though the blogs had noted that it takes a lot of time, and they are not always ecstatic to do their skincare routine, it is important to still go through with it for the sake of their skin.

There is this dedication involved in this routine that inspired me to create a garden pond interface that requests users to take care of it. In Madison’s blog, she had created a nudge to induce stress in order for her to finish her skincare routine faster. However, in the end, she noted that it was counterproductive because the entire point of the routine is to help her relax. She learns that the goal is not to finish it fast — that it is not possible to finish it fast — because skincare is something that requires time. After all, growth does not happen overnight, and it requires consistent energy and effort for an ecosystem to thrive.

After introducing Cat to my concept, she pointed out that it would be good for me to link the affordances and user actions to the routine, such as water droplets for rinsing and dragging for massaging. This is a clearer and more apparent metaphor compared to simply taking care of a garden pond.

So, what does this exactly mean, and what will it look like? I those aforementioned ideas and mapped out the specific interactions and interfaces to fully embody refreshing. Below is the first draft of the journey map.

The journey map includes the goals, which are some key verbs I felt like encapsulated the overall process and end result. It also includes the gestures, or -ings, which are rinsing/washing → massaging → reviving/blooming. Then, there are the affordances, which is how, exactly, the user will interact with the interface.

To represent the rinsing phase, I imagined ripples and drops of water falling into the pond through tapping. The tapping mimics the water drops and create this expansion effect across the screen, which links to the washing and “first peak” noted in Madison’s blog. With more taps, more lily pads and fish will appear.

Moving on to the next phase, the user will drag the fish around the pond to replicate the rubbing and massaging motion of applying skincare products. It also creates a sense of caring and caressing the ecosystem, much like one cares for their skin. Lotuses will begin to appear, illustrating growth and progress as energy is being charged.

Finally, the interface responds with another koi fish appearing and the lotuses fully blooming is the fruit of hard work and dedication in maintaining the wellness of the pond, similar to clear skin resulting from keeping up with skincare.

In class, we presented our ideation and process up until the journey map, and we introduced our concept to everyone. I received a lot of valuable feedback that helped me move forward in this process.

Specifically, Allie mentioned that another verb I can use is “tending” instead of massaging. I feel that it encapsulates the motion a lot better, for in the interface the user essentially interacts with the garden more and more to “care” for it. That leads to another change I decided to make: instead of refreshing, I decided to change the gesture to caring. Yes, refreshing is a part of the process, but it is mainly the end result. The overall routine of doing skincare and fostering the garden aligns more with the term caring.

Aparna also suggested that it would be more interactive to make the tapping in phase one cause a ripple directly on the water. Given the restraints of Figma, I may not be able to make that interaction smooth, but it definitely is more interesting than a drop of water falling into the pond upon tap.

Taking the revisions into consideration, I edited my journey map to better align with my concept.

To create this interface, I needed to use Figma for the interactions and frames. However, the graphics were drawn digitally and animated with other software that were then imported to Figma.

I began with a rough outline of my micro-interaction based off the screens from my journey map. I created still frames in Figma.

In order to fully polish and make this work, I plan on adding more interactions so the transition from screen to screen is timed well.

My goal for testing is to see if any issues arise when people use it and if it accurately conveys the emotions and feelings I intended for it to. If I offer no explanation or instruction and simply present it to others, will my interface be intuitive enough for them to use, or will I have to make revisions? Will I get my point across, or will it confuse people?

With the feedback I receieved, I was able to see the next steps in revising my prototype if it were to be a more refined and polished interface. My peers appreciated the calming atmosphere and the visuals. However, they wished for slightly more control over the interface, such as dragging the koi fish around a bit more, and knowing when to click. I could revise some of the transitions between the frames and the interactions.

In brief, this project taught me a lot about capturing the essence of an activity and creating a metaphoric interface from it. It required me to think critically about the different themes, visuals, and actions that can represent certain parts of the routine and how to translate gestures from skincare to caring for a garden pond.

I wonder the possibilities that further refining and coding could bring me, and how I can unlock much of the hidden potential in this interface. There were many effects and interactions outside of Figma’s abilities, so I am very curious how far I can push the boundaries to better capture the feeling of skincare.

Related posts:

There are several tools and software that can make your life easier when working with a virtual assistant. Today, we’re going to cover some tools that you can use with your virtual assistant to make…

Aku melihat mereka di rumah pesakitan itu, aku kenal salah seorangnya. Namanya nafsu. Aku mengenalnya baik, karna aku punya jimat yang diletakkannya padaku. Nafsu dikerangkeng karna dia lepas kendali…