Q3 2022

ReyFit : Improving Gamification Experience of Step Counter and Water Intake Reminder

UX DESIGN

REDESIGN

RESEARCH

FULL TIME WORK

Project Summary

I was the main designer and initiator of the redesign project in Q3 2022. I collaborated with the product manager, UX illustrator, UX writer, engineers, and was supervised and assisted by the lead product designer.

ReyFit's redesign aims to align with updated brand guidelines across consumer-facing platforms. With upcoming marketing campaigns aimed at increasing ReyFit's exposure, our objective is to enhance user experience, boost engagement, and explore innovative opportunities. This redesign introduces new functionalities, including adaptable support for a range of smartwatches, extending beyond the previous exclusive compatibility with Google Fit.

What is ReyFit?

ReyFit is the wellness program within the Rey.id mobile app, which aligns with Rey's mission to 'take care of you when you're healthy, tend to you when you're sick, and protect you anytime.' ReyFit provides rewards for users who engage in healthy habits.

At the time, ReyFit offers features such as step tracker (ReyFit Step) and water intake reminders (ReyFit Hydration). These features are accessible to both members and non-members of Rey.id, extending their reach to the broader public and acting as a gateway to introduce Rey to potential members.

Problem

In the previous design, there were significant issues related to clarity and efficient use of space. This created challenges for users in understanding how to play, tracking their progress, and earning rewards. Moreover, the reward system was not adequately explained, which could potentially reduce user motivation to engage with these features.

ReyFit Hydration's Problems

ReyFit Step's Problems

Goals

Design Goals

In this redesign project, our primary focus is on enhancing clarity, optimizing space utilization, and delivering clear instructions for gameplay, progress tracking, and rewards. This approach aims to boost user motivation and engagement.

Business Goals

We aim to align the UI with updated brand guidelines. With a refreshed visual identity and an improved user experience, our goals are to not only attract new users but also retain existing ones, ultimately encouraging users to become paid members of Rey Health Membership as they become more familiar with the app.

New Experience - 1st Iteration

As we dived into the first iteration, our aim was simple: make everything crystal clear, enjoyable, keep users engaged.

ReyFit Hydration's 1st Iteration

ReyFit Step's 1st Iteration

Usability Testing

We conducted unmoderated usability testing using the UseBerry platform. Our primary objective was to gather valuable insights from users regarding the new design. In addition, we need to discover the next healthy habit trackers users desire for ReyFit's future expansion.

Potential expansion

The most exciting wellness program for respondents is calorie and nutrition tracking, as it promotes healthier eating habits and weight goal achievement. We're prioritizing its development next.

Design Revision

1

We've resolved potential confusion by renaming the 'Today' tab to the current date while preserving access to history.

2

Since the daily steps goal is open-ended, using a progress bar can be awkward. So we've changed it to a regular counter, along with the current ReyCoins earned.

3

To simplify the progress page and enhance clarity, we've integrated the rewards table into the 'How to Play' section, similar to the setup in ReyFit Hydration.

4

To make it more convenient for users to access the 2nd glass and beyond, we've introduced an adaptive card that adjusts based on the current status and we've consolidated the schedules into a single modal to streamline the user experience.

ReyFit Hydration's Final Iteration

ReyFit Step's Final Iteration

What I would do differently

This is our first time using a user research platform like UseBerry for a large-scale prototype. We faced issues with respondents dropping out because their devices couldn't load the prototype properly. Consequently, only a handful of respondents patiently completed the scenarios without dropping out.

Upon contacting their team, we discovered that loading times depend on the user's device and internet connection. Essentially, the more complex the prototype, the more power and speed needed to load it properly. We realized that our relatively complex prototype, combining two features at once, required more processing power than many users currently have, at least in Indonesia.

This experience taught us a valuable lesson. In the future, for complex and in-depth prototypes, we will opt for moderated usability testing. This may involve fewer respondents, but it provides deeper insights. For simpler and shorter prototypes, UseBerry or other similar tools remain very helpful for reaching a broader audience in a short amount of time.

ReyFit Complete Iteration (So Far..)

In this project, ReyFit went through several iterations, both before and after testing. Here's an overview of the major changes.

ReyFit Hydration

ReyFit Step

Impacts

Empowering Rey's Campaigns

After being launched on the Rey App, Reyfit has been used by many people. ReyFit has been utilized for numerous events and challenges, all of which have been executed successfully. Here are some some of them,

(taken from Rey’s Instagram account and blog)

Converting ReyFit Users into Rey's Paid Members

We are also grateful that ReyFit has significantly improved the lives and health of our users, making a lasting impression on them. This positive experience has led approximately 14% of users to become paid Rey members, unlocking even greater benefits and features with Rey.

"I really like this app. It has a step counter and a water reminder. I can keep track of my daily steps and water intake without switching between apps. Also, the prices for medical visits are very affordable, especially for a college student like me.”

Rani Tiara

posted on 23/5/23

"At first, I only used it to remind myself to drink water because I've always had trouble drinking water regularly. Then, I started tracking my steps, and now I'm a paid member of Rey. The app is super comprehensive, and ReyCare is really helpful too.”

Rendy DP

posted on 24/6/23

"I think the Rey app is quite comprehensive, and the interface is user-friendly. I initially only know about step tracker, but eventually, I became a member. Living a healthy lifestyle through Rey also comes with rewards because of ReyCoin.”

Sasmito Sinar Ibrahim

posted on 24/6/23

"I love Rey so much. I've lost 2 kgs in about 2 weeks because I've been diligently checking my steps in Rey. I've also been able to help my family with consulting to doctors, buying medicine, and even making healthcare claims. Thanks a lot to Rey!"

Matahatti Sasmito

posted on 28/5/23

"For those looking to start a healthy lifestyle, I highly recommend the Rey app. I'm currently trying to maintain a calorie deficit for my diet, and I've been helped a lot by the step tracking feature. There are many other features too, like when I was trying to claim my insurance benefit, Rey was there to assist.”

Ferry Irvian

posted on 28/5/23

"In the past, I used to go jogging without any specific plan. But now, it's more organized. Since I installed the Rey Health app, it records my steps every time I go jogging. This makes it easier for me to reach my step and diet goals.

Anny Nuraini

posted on 25/8/23

(taken from Rey's Google Play Store reviews)

Introducing ReyFit Nutri

Finally, almost a year later, we introduced ReyFit Nutri, a feature that includes nutrition consultation, monitoring, and meal planning within ReyFit. We prioritized this feature based on the user insights we gained during this project. As of now, ReyFit Nutri is still in beta.

(taken from Rey’s Instagram account and blog)

Special Shoutout!

By now, you might find yourself captivated by the adorable illustrations sprinkled throughout this case study. This project would be as bland as unseasoned tofu without the creative touch of our talented illustrators, Zee and Alisa. Their work is simply amazing. Kudos to both of them!

Thank you for reading this far, kudos to you! Let’s together take a deep breath 🍃—and maybe a sip of water 🧊. But hold on, did you say you want more? Lucky you, there's another one below. See you on the next page!

Other Projects

Q3 2022

ReyFit : Improving Gamification Experience of Step Counter and Water Intake Reminder

UX DESIGN

REDESIGN

RESEARCH

FULL TIME WORK

Project Summary

I was the main designer and initiator of the redesign project in Q3 2022. I collaborated with the product manager, UX illustrator, UX writer, engineers, and was supervised and assisted by the lead product designer.

ReyFit's redesign aims to align with updated brand guidelines across consumer-facing platforms. With upcoming marketing campaigns aimed at increasing ReyFit's exposure, our objective is to enhance user experience, boost engagement, and explore innovative opportunities. This redesign introduces new functionalities, including adaptable support for a range of smartwatches, extending beyond the previous exclusive compatibility with Google Fit.

What is ReyFit?

ReyFit is the wellness program within the Rey.id mobile app, which aligns with Rey's mission to 'take care of you when you're healthy, tend to you when you're sick, and protect you anytime.' ReyFit provides rewards for users who engage in healthy habits.

At the time, ReyFit offers features such as step tracker (ReyFit Step) and water intake reminders (ReyFit Hydration). These features are accessible to both members and non-members of Rey.id, extending their reach to the broader public and acting as a gateway to introduce Rey to potential members.

Problem

In the previous design, there were significant issues related to clarity and efficient use of space. This created challenges for users in understanding how to play, tracking their progress, and earning rewards. Moreover, the reward system was not adequately explained, which could potentially reduce user motivation to engage with these features.

ReyFit Hydration's Problems

ReyFit Step's Problems

Goals

Design Goals

In this redesign project, our primary focus is on enhancing clarity, optimizing space utilization, and delivering clear instructions for gameplay, progress tracking, and rewards. This approach aims to boost user motivation and engagement.

Business Goals

We aim to align the UI with updated brand guidelines. With a refreshed visual identity and an improved user experience, our goals are to not only attract new users but also retain existing ones, ultimately encouraging users to become paid members of Rey Health Membership as they become more familiar with the app.

New Experience - 1st Iteration

As we dived into the first iteration, our aim was simple: make everything crystal clear, enjoyable, keep users engaged.

ReyFit Hydration's 1st Iteration

ReyFit Step's 1st Iteration

Usability Testing

We conducted unmoderated usability testing using the UseBerry platform. Our primary objective was to gather valuable insights from users regarding the new design. In addition, we need to discover the next healthy habit trackers users desire for ReyFit's future expansion.

Potential expansion

The most exciting wellness program for respondents is calorie and nutrition tracking, as it promotes healthier eating habits and weight goal achievement. We're prioritizing its development next.

Design Revision

1

We've resolved potential confusion by renaming the 'Today' tab to the current date while preserving access to history.

2

Since the daily steps goal is open-ended, using a progress bar can be awkward. So we've changed it to a regular counter, along with the current ReyCoins earned.

3

To simplify the progress page and enhance clarity, we've integrated the rewards table into the 'How to Play' section, similar to the setup in ReyFit Hydration.

4

To make it more convenient for users to access the 2nd glass and beyond, we've introduced an adaptive card that adjusts based on the current status and we've consolidated the schedules into a single modal to streamline the user experience.

ReyFit Hydration's Final Iteration

ReyFit Step's Final Iteration

What I would do differently

This is our first time using a user research platform like UseBerry for a large-scale prototype. We faced issues with respondents dropping out because their devices couldn't load the prototype properly. Consequently, only a handful of respondents patiently completed the scenarios without dropping out.

Upon contacting their team, we discovered that loading times depend on the user's device and internet connection. Essentially, the more complex the prototype, the more power and speed needed to load it properly. We realized that our relatively complex prototype, combining two features at once, required more processing power than many users currently have, at least in Indonesia.

This experience taught us a valuable lesson. In the future, for complex and in-depth prototypes, we will opt for moderated usability testing. This may involve fewer respondents, but it provides deeper insights. For simpler and shorter prototypes, UseBerry or other similar tools remain very helpful for reaching a broader audience in a short amount of time.

ReyFit Complete Iteration (So Far..)

In this project, ReyFit went through several iterations, both before and after testing. Here's an overview of the major changes.

ReyFit Hydration

ReyFit Step

Impacts

Empowering Rey's Campaigns

After being launched on the Rey App, Reyfit has been used by many people. ReyFit has been utilized for numerous events and challenges, all of which have been executed successfully. Here are some some of them,

(taken from Rey’s Instagram account and blog)

Converting ReyFit Users into Rey's Paid Members

We are also grateful that ReyFit has significantly improved the lives and health of our users, making a lasting impression on them. This positive experience has led approximately 14% of users to become paid Rey members, unlocking even greater benefits and features with Rey.

"I really like this app. It has a step counter and a water reminder. I can keep track of my daily steps and water intake without switching between apps. Also, the prices for medical visits are very affordable, especially for a college student like me.”

Rani Tiara

posted on 23/5/23

"At first, I only used it to remind myself to drink water because I've always had trouble drinking water regularly. Then, I started tracking my steps, and now I'm a paid member of Rey. The app is super comprehensive, and ReyCare is really helpful too.”

Rendy DP

posted on 24/6/23

"I think the Rey app is quite comprehensive, and the interface is user-friendly. I initially only know about step tracker, but eventually, I became a member. Living a healthy lifestyle through Rey also comes with rewards because of ReyCoin.”

Sasmito Sinar Ibrahim

posted on 24/6/23

"I love Rey so much. I've lost 2 kgs in about 2 weeks because I've been diligently checking my steps in Rey. I've also been able to help my family with consulting to doctors, buying medicine, and even making healthcare claims. Thanks a lot to Rey!"

Matahatti Sasmito

posted on 28/5/23

"For those looking to start a healthy lifestyle, I highly recommend the Rey app. I'm currently trying to maintain a calorie deficit for my diet, and I've been helped a lot by the step tracking feature. There are many other features too, like when I was trying to claim my insurance benefit, Rey was there to assist.”

Ferry Irvian

posted on 28/5/23

"In the past, I used to go jogging without any specific plan. But now, it's more organized. Since I installed the Rey Health app, it records my steps every time I go jogging. This makes it easier for me to reach my step and diet goals.

Anny Nuraini

posted on 25/8/23

(taken from Rey's Google Play Store reviews)

Introducing ReyFit Nutri

Finally, almost a year later, we introduced ReyFit Nutri, a feature that includes nutrition consultation, monitoring, and meal planning within ReyFit. We prioritized this feature based on the user insights we gained during this project. As of now, ReyFit Nutri is still in beta.

(taken from Rey’s Instagram account and blog)

Special Shoutout!

By now, you might find yourself captivated by the adorable illustrations sprinkled throughout this case study. This project would be as bland as unseasoned tofu without the creative touch of our talented illustrators, Zee and Alisa. Their work is simply amazing. Kudos to both of them!

Thank you for reading this far, kudos to you! Let’s together take a deep breath 🍃—and maybe a sip of water 🧊. But hold on, did you say you want more? Lucky you, there's another one below. See you on the next page!

Q3 2022

ReyFit : Improving Gamification Experience of Step Counter and Water Intake Reminder

UX DESIGN

REDESIGN

RESEARCH

FULL TIME WORK

Project Summary

I was the main designer and initiator of the redesign project in Q3 2022. I collaborated with the product manager, UX illustrator, UX writer, engineers, and was supervised and assisted by the lead product designer.

ReyFit's redesign aims to align with updated brand guidelines across consumer-facing platforms. With upcoming marketing campaigns aimed at increasing ReyFit's exposure, our objective is to enhance user experience, boost engagement, and explore innovative opportunities. This redesign introduces new functionalities, including adaptable support for a range of smartwatches, extending beyond the previous exclusive compatibility with Google Fit.

What is ReyFit?

ReyFit is the wellness program within the Rey.id mobile app, which aligns with Rey's mission to 'take care of you when you're healthy, tend to you when you're sick, and protect you anytime.' ReyFit provides rewards for users who engage in healthy habits.

At the time, ReyFit offers features such as step tracker (ReyFit Step) and water intake reminders (ReyFit Hydration). These features are accessible to both members and non-members of Rey.id, extending their reach to the broader public and acting as a gateway to introduce Rey to potential members.

Problem

In the previous design, there were significant issues related to clarity and efficient use of space. This created challenges for users in understanding how to play, tracking their progress, and earning rewards. Moreover, the reward system was not adequately explained, which could potentially reduce user motivation to engage with these features.

ReyFit Hydration's Problems

ReyFit Step's Problems

Goals

Design Goals

In this redesign project, our primary focus is on enhancing clarity, optimizing space utilization, and delivering clear instructions for gameplay, progress tracking, and rewards. This approach aims to boost user motivation and engagement.

Business Goals

We aim to align the UI with updated brand guidelines. With a refreshed visual identity and an improved user experience, our goals are to not only attract new users but also retain existing ones, ultimately encouraging users to become paid members of Rey Health Membership as they become more familiar with the app.

New Experience - 1st Iteration

As we dived into the first iteration, our aim was simple: make everything crystal clear, enjoyable, keep users engaged.

ReyFit Hydration's 1st Iteration

ReyFit Step's 1st Iteration

Usability Testing

We conducted unmoderated usability testing using the UseBerry platform. Our primary objective was to gather valuable insights from users regarding the new design. In addition, we need to discover the next healthy habit trackers users desire for ReyFit's future expansion.

Potential expansion

The most exciting wellness program for respondents is calorie and nutrition tracking, as it promotes healthier eating habits and weight goal achievement. We're prioritizing its development next.

Design Revision

1

We've resolved potential confusion by renaming the 'Today' tab to the current date while preserving access to history.

2

Since the daily steps goal is open-ended, using a progress bar can be awkward. So we've changed it to a regular counter, along with the current ReyCoins earned.

3

To simplify the progress page and enhance clarity, we've integrated the rewards table into the 'How to Play' section, similar to the setup in ReyFit Hydration.

4

To make it more convenient for users to access the 2nd glass and beyond, we've introduced an adaptive card that adjusts based on the current status and we've consolidated the schedules into a single modal to streamline the user experience.

ReyFit Hydration's Final Iteration

ReyFit Step's Final Iteration

What I would do differently

This is our first time using a user research platform like UseBerry for a large-scale prototype. We faced issues with respondents dropping out because their devices couldn't load the prototype properly. Consequently, only a handful of respondents patiently completed the scenarios without dropping out.

Upon contacting their team, we discovered that loading times depend on the user's device and internet connection. Essentially, the more complex the prototype, the more power and speed needed to load it properly. We realized that our relatively complex prototype, combining two features at once, required more processing power than many users currently have, at least in Indonesia.

This experience taught us a valuable lesson. In the future, for complex and in-depth prototypes, we will opt for moderated usability testing. This may involve fewer respondents, but it provides deeper insights. For simpler and shorter prototypes, UseBerry or other similar tools remain very helpful for reaching a broader audience in a short amount of time.

ReyFit Complete Iteration (So Far..)

In this project, ReyFit went through several iterations, both before and after testing. Here's an overview of the major changes.

ReyFit Hydration

ReyFit Step

Impacts

Empowering Rey's Campaigns

After being launched on the Rey App, Reyfit has been used by many people. ReyFit has been utilized for numerous events and challenges, all of which have been executed successfully. Here are some some of them,

(taken from Rey’s Instagram account and blog)

Converting ReyFit Users into Rey's Paid Members

We are also grateful that ReyFit has significantly improved the lives and health of our users, making a lasting impression on them. This positive experience has led approximately 14% of users to become paid Rey members, unlocking even greater benefits and features with Rey.

"I really like this app. It has a step counter and a water reminder. I can keep track of my daily steps and water intake without switching between apps. Also, the prices for medical visits are very affordable, especially for a college student like me.”

Rani Tiara

posted on 23/5/23

"At first, I only used it to remind myself to drink water because I've always had trouble drinking water regularly. Then, I started tracking my steps, and now I'm a paid member of Rey. The app is super comprehensive, and ReyCare is really helpful too.”

Rendy DP

posted on 24/6/23

"I think the Rey app is quite comprehensive, and the interface is user-friendly. I initially only know about step tracker, but eventually, I became a member. Living a healthy lifestyle through Rey also comes with rewards because of ReyCoin.”

Sasmito Sinar Ibrahim

posted on 24/6/23

"I love Rey so much. I've lost 2 kgs in about 2 weeks because I've been diligently checking my steps in Rey. I've also been able to help my family with consulting to doctors, buying medicine, and even making healthcare claims. Thanks a lot to Rey!"

Matahatti Sasmito

posted on 28/5/23

"For those looking to start a healthy lifestyle, I highly recommend the Rey app. I'm currently trying to maintain a calorie deficit for my diet, and I've been helped a lot by the step tracking feature. There are many other features too, like when I was trying to claim my insurance benefit, Rey was there to assist.”

Ferry Irvian

posted on 28/5/23

"In the past, I used to go jogging without any specific plan. But now, it's more organized. Since I installed the Rey Health app, it records my steps every time I go jogging. This makes it easier for me to reach my step and diet goals.

Anny Nuraini

posted on 25/8/23

(taken from Rey's Google Play Store reviews)

Introducing ReyFit Nutri

Finally, almost a year later, we introduced ReyFit Nutri, a feature that includes nutrition consultation, monitoring, and meal planning within ReyFit. We prioritized this feature based on the user insights we gained during this project. As of now, ReyFit Nutri is still in beta.

(taken from Rey’s Instagram account and blog)

Special Shoutout!

By now, you might find yourself captivated by the adorable illustrations sprinkled throughout this case study. This project would be as bland as unseasoned tofu without the creative touch of our talented illustrators, Zee and Alisa. Their work is simply amazing. Kudos to both of them!

Thank you for reading this far, kudos to you! Let’s together take a deep breath 🍃—and maybe a sip of water 🧊. But hold on, did you say you want more? Lucky you, there's another one below. See you on the next page!

Other Projects