CARE Persona: Personalized Vitamins

Introduction

Generic multivitamins are built for the “average” person. But no two bodies are the same. Personalized vitamins are created to match your lifestyle, health goals, diet, and sometimes even DNA—ensuring every nutrient supports your specific needs.

From 2023 to 2025, I’ve worked with the biggest DNA testing company in Thailand. The brand has more than DNA testing products, one of them is personalized vitamins subscription that will tailor perfect daily vitamin packs.

The user of personalized vitamins has 2 difference types:

1. Existing users with DNA reports in the system. This type of user already are customers that want vitamins services that match their DNA and health goals, they can start using the service by purchasing a subscription and book doctor consultation in a mobile application.

2. Non-existing users without DNA reports in the system. New users that just want Personalized vitamins. They start the service with health quizzes then, purchasing the subscription to allow them to book doctor consultation.

After doctor consultation, the doctors and medical team will prepare the right vitamin supplements that suit their DNA or health goals.

In this case studies will be focusing on the marketing part, creating a visual design for the sale page and UX design for the payment on the website. And show the user experiences improvements.

Project Context

I already designed the CARE Persona landing page and it was launched in 2023 under the name of Geneus CARE, and comes with only personalized vitamins services. And I don’t really have a chance to improve it because there is an upcoming project waiting in the line.

In Q1 of year 2024 the company has released new products which is a package for the customers that want specific supplements for the specific health goals which is cheaper than the main service, for example: Bones & Joint Protector, Absolute Cellular Detox, Sleep Right, etc.

Now CARE persona offer two packages:

1. Gold: A fully personalized experience with up to 5 health goals, 1-on-1 doctor consultation, personalized adjustments, and DNA-tailored vitamins for DNA test users.

2. Silver: Solve problems based on one health goal, without doctor consultation.

Discovery pain points 

After the new product is released, me and the team are brought back some old feedback that didn’t have a chance to improve the landing page in the previous year. Unfortunately, I won’t be able to show the actual UI since it will be updated in 2024 and the design handoff file is classified.

This landing page is a one page website that describes the product details of personalized vitamins. Users will be able to interact with this website only to purchase the package, the rest of the action will continue in mobile application.

Not just my opinion, but the team has significant feedback: When I was listing the pain points of what needed to be improved in this landing page, I got some feedback from the development and business team. All of the feedback that I got from them is leading to one main objective which is to improve purchasing within the website.

The site has no other main interaction except purchasing: Because the website has no other interaction, users may have no experience of how personalized vitamins are supposed to plan from. It could cause misunderstanding or be less convincing to buy.

Too many images from stock photos make product look less real: The supplements sample image in the page look lifeless, when the first landing page was designed it starts with just using photos downloaded from stock photo platform which means the design has limitations in terms of product displays. The other limitations of resources are the packaging box that comes with a file that is made from Adobe Illustrator.

Too simple make product look less interesting: Some sections in the page have their layout look like we copy them from any website templates. I could take this opportunity to fix those parts and make it more interesting with the same contents.

And as mentioned previously, the company is now re-branding to the new name with the changes of official logo so the one that has applied in the former website in the website needs to change. There are also new upcoming packages that need to be added to sell on the website.

Define site-map

Due to the pain points and the contents that will be added in the landing page, the single page and just payment flow are now not fit with the contents that we have anymore. The page now will be adding the quiz page for the health quiz and the shopping page for the incoming packages

Solve pain points, Wireframing the main objective

Personal health quiz help user interact more with the website: The new website could apply some features from the CARE persona mobile application into the page.In the application, there was an onboarding flow that let new users experience a health quiz which will suggest the right solution of their health goals when it is done.

This health quiz starts with some personal health questions and asks about the user's health goals or preference. Moreover, at the end of the quiz, the website will provide the results and vitamins suggestions to them. This quiz will be a reminder to users to recap and easily figure out what they want to improve their health and show them that we can help with those problems.

Adding product tie-in photoshoot, improve brand credibility: Due to image resources issues, the business team started the photoshoot. I discussed it with another designer and created a wishlist of the photos that could be on the website. These photoshoots include photos of tie-in product boxes, pictures of a nice display of sample supplements and the actual person with the product box.

Unique layout boost interest: During the design process, I tried to apply some new layout to make the website look unique. Here is one example of the sections in the page that have changed the layout.

The picture demonstrates one of the layout changes, this section in the page is presented the quality of the supplements that are contained in the services. Adding an image of the vitamins sachet would make the section more outstanding and make the overall of the page look more interesting.

New vitamins package is added: The page needs a shopping page for the new package that solves problems based on one health goal. Users can pick the health goal that they want to solve and start ordering vitamins right away. These are examples of health problems that available in the package:

• Bones and Joint

• Detox

• Skin

• Immune

• Brain

• Sleep

• Stress

• Anti-aging

Developing the designs

The design developing in this landing page includes business team opinion due to the big main feature of this page. The main role of the business team in the project is to recheck the design prototype to make sure that the page is what they wanted to sell the products before handoff to the engineering team.

I developed a high fidelity design prototype and handed it to the Front-end team via Figma file to allow the engineers to inspect the design system and be able to export the HTML and CSS code.

During the software development, I worked closely with the Front-end team. We always have one session after the staging deployment called “Pixel perfect test” which is I will check that the webpage is accurate with the design prototype, this test including font-size, padding and margin of the components, spelling, etc.

Result and takeaways

In the whole CARE persona product, this landing page is just one of the ways to purchase the product. And the rest of the entry point are two mobile applications that users also can easily purchase especially when they already have the DNA report application.

During the release of the page the company also released the new package of buy DNA test kit and one month of CARE personalized vitamins in a special price which is on sale in the Geneus DNA landing page has more attention from consumers than CARE persona landing page.