MY ROLE
UI/UX Designer
AGENCY
the.partners
CLIENT
DHG Pharma
TIMELINE & STATUS
Description
A mobile and web redesign for a pharma product with ingredients extracted from Japanese nattokinase (fermented soybeans).
OVERVIEW
I collaborated with the.partners agency on the website audit and web/mobile design for NattoEnzym, a line of health supplements that support stroke prevention.
Live Website
After conducting a website audit and considering the brand guidelines provided by our client, there were three primary goals. These goals aimed to solved the current issues while meeting our client's expectations. They were as follows:
The way information is distributed isn't efficient and leaves a lot of unused space.
Web interactions need improvements.
For instance, horizontal scrolling in many places are unnecessary.
The current design lacks uniqueness.
With the new design, elements from the existing key visual must be used, such as the blossoms.
My Approach
Information distribution is the first thing I prioritized. Important content would be placed on the home page and unimportant or redundant parts will be removed. After that, I improved the interaction to suit each type of section content. This involved using a consistent red colors and incorporating key visual elements that aligned with the Japanese style, as per the client’s request.
I will go into more detail explaining where I improved and why.
There were lots of things for the homepage so I’m going to break it down section by section. I will start with the navigation bar.
navigation bar
Hero Section
In the banner area, the arrow buttons were hard to click because they were small and blurry. Additionally, users had difficulty knowing if there were any other banners, which made it hard to revisit a specific one. To prevent this, I added a number progress bar.
The Risk of stroke test section had been relocated (with introduction content) to replace the position of a video, which was outdated and had many problems such as:
Unclear purpose - what purpose did it serve?
Because it is a promotional music video and has no subtitles, if the user didn’t turn on the video sound, it was almost impossible to know what the content was.
And the video could only be paused or played, not rewinded or fasted forward.
The test was also improved for better experience such as:
User would take the test first and then fill in their information (only required name and phone number) to get the result instead of having the information form (too many input fields) separate from the test
Had a progress bar to know how many questions were left
Easier to click with bigger buttons and less prominent Quit action
Our Products Section
I added “Benefits of NattoEnzym” section which only appeared on the Products page in the old design.
I simplified the icon style and aligned its colors with the entire page. Also, I customized the icon to better match the content conveyed below.
Graphic elements were added to align the goal of using existing key visuals and ensuring consistency throughout the entire design theme.
News Section
The interaction here was a mess.
The arrow buttons were disable, but I could drag horizontally. Then the arrow buttons were suddenly clickable, but when I clicked the forward button, I was bounced back to the first 3 articles instead of moving forward.
When I clicked “See more” button, more post showed vertically and to my surprise, I could still drag back and forth the top row.
Also, I discovered that NattoEnzym had its own area with abundant content on Tuoi Tre Online newspaper, which was linked to through the banner ad on the News page.
I decided to remove all interaction in this News section to keep it simple. If users want to, “Read more” button will take them to the News page, where all the content is there.
Of course, I utilized that banner ad and positioned it where it belonged.
Introduction Section
Goodbye wall of text.
The reason I removed most of the text is because it was outdated.
The first two paragraphs repeated the benefits of the two products (one was missing) - which were mentioned in the "Benefits of NattoEnzym" section that I have placed on the Homepage.
I only kept the paragraph introducing the company and showed all related images instead of having to swipe to see.
Product Lines Section
At this section, I moved the general benefits below to have room for product information.
I changed the swipe interaction to option selector to make it clearer this is a different packaging of the same product, not a different product.
Information boxes about ingredients, target users, and dosage were grouped into tabs, so that users could receive information piece by piece instead of too much things at once.
The “Buy now” button was removed because:
Previously, when clicked, it would show a pop-up that had the cloud logo of pharmacies and that’s it. The only action user could do was to close that pop-up.
This product is sold on many different E-commerce platforms, having just a single "Buy Now" button = limited the brand's capacity to sell the product on other platforms and less choices for users, too.
That’s why I moved the cloud logo section from the bottom to the products section and inserted links to the brand's sales page on each platform to match the logo. Now, not only important information was placed in a more visible position, but users could also shop right where they wanted.
Main page
For users who were adults and the elderly, the current layout was difficult for them to read as the font size and the thumbnail were small and there was very little free space among articles.
So I went with a vertical layout with pagination since it's a familiar format commonly seen on newspaper websites, ensuring users didn't have to spend extra time learning or figuring it out.
The font size and the thumbnail were bigger, and it’s easier to track back a certain article with pagination.
I also made the banner ad a fixed scroll, ensuring it stayed within the user's view at all times.
Article
I had two main goals for this page: make it easier to read and boost SEO effectiveness.
The new design, as shown below, fixed the issues in the old design, such as:
It didn’t organize content using HTML header tags (H1, H2, H3, ...). This not only harmed SEO but also made the article lack a clear information structure.
It didn’t have Breadcrumb navigation - Having this not only improve user experience, but also provide clear site structure to search engines.
It didn’t support sharing articles on social networks - Social media integration can indirectly impact SEO, as it drives more traffics to the site.
And bigger font size, more spacing, removed the right-hand side column... were to improve readability.
Video Gallery
For this section, the very first thing I did was checking which videos were no longer available to remove or replace.
The very second thing I did was removing horizontal drag interaction.
While auditing the old design, as I swapped roles between being a user and a brand's employee, I thought to myself: “That's a lot. Where should I look? Is there a video that might have more useful content than the others? Which specific videos would I want the user to watch instead of the rest? How can I make it feel easy to watch?”...
So I came up with the new layouts to highlight the three most important videos.
Besides, I included the video duration so that users could easily see which videos required only 30 seconds to watch and which ones might contain more in-depth information because they are a few minutes long. They would
* One option that was eliminated involved categorizing videos and tagging them to provide users with a clear overview of the video's main content. It might sound reasonable, but it’s not necessary. They don’t have many videos, and most of them are TVCs, which are very short.
Audio Gallery
Removing horizontal drag interaction, of course, because we had many spaces. Just showing them all right in front.
Then the audio had 2 problems:
I didn't know what the content was or how long it would take
And I couldn't fast forward or rewind
That’s why the new audio would have (1) a summary, (2) fast forward or rewind function and (3) duration, as below:
Typography
Although I could absolutely use popular options like Inter or Roboto, I still wanted to choose a newer typeface for the website.
And Barlow has met what I need: Easy to read, friendly, and has Vietnamese language support.
Because it has wide range of weights and styles, I used Regular and Bold weights for Body text and Title/Headline, so I didn’t have to use an additional typeface for the Title. This approach simplified the site's construction and management, too.
Colors & Elements
The color palette was created using the red color of the focus product, and I took the brand color, Dark Blue, from the existing Brand Guideline to use it for the News Article title.
As the product was related to Japan, I used Japanese-inspired patterns and symbols like cherry blossom for the bullet points. The icons are in line style to keep the simplicity, which has always been associated with the Japanese lifestyle.
NattoEnzym was the second project I collaborated with DHG Pharma, but was the first time I worked as a freelancer through an agency.
Thanks to the Account for her excellent work in managing the project, facilitating smooth communication between designers and developers, and ensuring everything stayed on track and met deadlines.
I'm happy to be part of a project that she "feel proud of".
Thank you
Other works:
