top of page
portfoliobrand-logo-pink.png

YOGI Interactive Facial Massage App

Custom Size – 81.png

Project Type

Final Year Project

Mobile App Prototyping

Duration

12 Weeks (March-May 2024)

My Role

Project Lead UI/UX Designer

Software Tools

Figma, Adobe Illustrator & Photoshop

Overview

In collaboration with P&G and NYP - we developed a interactive face massage app that encourages consistent & correct usage of products & techniques, helping Junior Office Ladies achieve physical & mental benefits.

Problem

Many junior office ladies struggle to maintain a consistent skincare routine, often unsure about the correct dosage of skincare products to use and lack knowledge of proper facial massage techniques.

User Personas

We developed two user personas and empathy maps for our target audience, who were Junior Office Ladies and existing customers & mature adults in the Chinese market.

yogiUser Persona 1.png
Empathy Map 1 (Hana).png
yogi User Persona 2.png
Empathy Map 2 (Jessica).png

User Journey & Ecosystem Map

We created a user journey map to visualize the path users take to access the YOGI App. After getting to know our users better, we crafted out an EcoSystem Map that brought together who and how our users would interact with when they are getting to know more about skincare and facial massages.

Screenshot 2024-11-04 at 7.46.56 PM 1.png
Eco system mapping (Final) 1.png

User Flow

We created a user flow to visualise the flow of the YOGI app flow when users start using the app, according to our client's requirements.

Screenshot 2024-11-04 at 8.28.39 PM 1.png

Wireframes

We developed initial wireframes for our YOGI facial massage app. There were many parts of our app that we broke it up into several parts.

Screenshot 2025-02-18 at 6.12.28 PM.png

Branding & Stylescape

I extensively explored various colour themes and vibes to align with the keywords provided by our clients: elegant, calm, refreshing and light. We developed a style guide.

Group 1.png
UI Toolkit 1.png

Floral Concept

Given the resemblance of our UI toolkit colours to those in nature, specifically flowers, we have chosen to shift our theme to a floral-inspired design, focusing on tulips, roses, gardenias and lotus. These flowers carry themes of beauty, purity and transformation, making them powerful symbols for aspects of life such as personal growth and love.

Updated Idea 1.png

User Testing

In total, we conducted user testing with five office ladies to identify areas for improvement in our app and enhance user experience. Overall, their feedback was positive when they tried our app.

Screenshot 2025-02-18 at 6.33.59 PM.png
Screenshot 2025-02-18 at 6.33.59 PM.png
Screenshot 2025-02-18 at 6.33.59 PM.png
Screenshot 2025-02-18 at 6.33.59 PM.png

Final Prototype

We were finally able to complete the final prototype on Figma. It is split into different sections and features of the app.

shot 74 1.png
acupointsmassageFINAL 1.png
fyp key visual before after 1.png
fyp key visual dosage draft 2 realistic 1.png

Back to top

Group 54.png
behance network media social be.png
logo-text.png

© 2025 Jolyn Lu

bottom of page