Vi
En
VI only
Cleverin
Vai trò
Cleverin là một nhãn hàng sản phẩm khử trùng đến từ Nhật Bản với 5 dòng sản phẩm chính hỗ trợ khử khuẩn trong không gian hoặc trên bề mặt vật thể. Đợt gần đầy Cleverin đang dần tiếp cận thị trường Việt Nam và đang trong quá trình phân phối chính thức, cho nên một website chính thức tại Việt Nam là không thể thiếu rồi.
Và tớ may mắn được làm web này, ngay giữa mùa dịch hêhê!
Cleverin is a Japanese brand that offers sanitation products. They have 5 main products giving you the ability of virus disinfection on both objects and space. Cleverin is recently approaching the Vietnam market, that’s why they need an official website in Vietnam.
Then we’re lucky to be trusted on this project, in between of the covid pandemic heheeh!!!
1. Yêu cầu
1. Requirements
Với tên miền cleverin.vn, đây sẽ là website chính thức của nhãn hàng tại việt nam; cho nên yêu cầu về nội dung cũng tương đối cơ bản:
- Giới thiệu đầy đủ 5 dòng sản phẩm của Cleverin
- Thông tin cơ bản về sản phẩm, cách sử dụng, các lưu ý khi sử dụng…
- Giải thích sơ lược về cách thức khử khuẩn của sản phẩm
- Thông tin về nhà sản xuất, thông tin liên hệ…
Under the domain cleverin.vn, this will be the brand’s official website in Vietnam, then the requirement is quite simple:
- Introduction of 5 primary products
- Basic information of each product, using guides, precautions…
- Explanation of how their products work
- Manufacturer details, contact information…
Về web, Cleverin đã có sẵn website chính thức bằng tiếng nhật. Nhưng việc tiếp cận thị trường Việt Nam với sản phẩm nhập khẩu cùng bao bì toàn bộ bằng tiếng Nhật sẽ gây khó khăn cho người dùng khi tiếp cận thông tin sản phẩm. Vậy nên website Việt Nam cần đáp ứng một vài tiêu chí
- Song ngữ Anh/Việt, với ngôn ngữ mặc định là tiếng Việt
- Xây dựng website phù hợp với thị hiếu & thị trường Việt Nam
- Đẹp sang xịn mịn, hiển thị tốt trên các thiết bị thông dụng
- Tương đồng với website Nhật
For the website, Cleverin already has one in Japanese. However, joining the Vietnam market with imported products with their native language on packaging causes some difficulties for users when reading product information. Then the Vietnamese website need some point below:
- Dual-lanquage: Vietnamese/English, and ofcourse Vietnamese is the default one
- The website need to be friendly and familiar to Vietnamese people
- Good looking and display well on popular devices
- Stay close to the original website in Japanese
Tóm gọn lại là như này, phát triển website gốc tiếng Nhật thành một bản ngon nghẻ hơn bằng tiếng Việt 😤😤😤
To wrap it up, our job is to upgrade their Japanese to a better version in Vietnamese
2. Thiết kế
2. Design
Không cần bàn cãi nhiều, Cleverin có thiết kế sản phẩm rất đẹp, sang và tối giản. Website gốc tiếng nhật cũng ổn, tớ không tìm lấy lỗi nào nghiêm trọng về giao diện ngoại trừ việc thông tin bị trùng lắp khá nhiều trên trang.
Vậy nên thiết kế lại cũng không khó lắm, giao diện desktop tớ làm mới tương đồng đến 60-70%, sự thay đổi phần nhiều nằm ở kích thước và khoảng cách do khác biệt giữa hệ chữ tượng hình và latin.
As you can see, Cleverin has the good design on their products, give us the feeling of luxury and minimalism. Their website is good, too; we cannot find any serious mistake except one thing – some information are duplicated on many pages.
So the redesign didn’t take us too much time, the desktop layout stays similar to the original up to 70%. The major changes are mostly size and distance, they come from the difference between japanese and latin alphabet characters.
Web Nhật vs web Việt
Japanese version vs Vietnamese version
Trên mobile thì thay đổi rõ ràng hơn. Website gốc có một số phần được dùng hình ảnh tĩnh và không có phương án responsive cho mobile. Việc của tớ là không lặp lại điều đó trên web mới này.
On mobile devices, the difference is clearlier. They used static images on the original website and didn’t have a responsive solution on mobile. And our job is to make sure this will not happen again!
Web nhật đây nhé
Japanese version
Và tớ làm lại như này
And our remaked version
Bộ icon cũng được tớ vẽ lại cho đồng nhất. Website nhật dùng png size nhỏ nên không xài lại được, ở đây tớ dùng luôn svg cho nhẹ, về sau các bạn marketing tha hồ lấy về dùng mà không lo bể
The icons/illustrations are redrawn for consistency. Japanese website uses small png images and they aren’t reusable. We decided to use light weight svg images, this allows others to download and reuse for any later marketing purpose.
3. Làm web
3. Web develop
Với những web đơn giản không dính líu đến backend thì tớ cân luôn vai trò dev, như vậy sẽ không mất thời gian qua lại giữa design và code, và thời gian đó sẽ được dành để o bế những chi tiết nhỏ.
With a simple website like this, we can play the role of developer; that helps us save the communication time between design and coding and spend it on taking care of small details.
Lướt nhanh web trên desktop như này. Ngoài những animation cơ bản như fade, motion, tớ dùng cả lottie animation. Toàn bộ illustration và animation trên website tớ đều dùng line cho đồng bộ, và line animation chỉ ngốn đâu đó 200KB thay vì một video nén nặng đến cả chục MB.
Phần sản phẩm là trung tâm của website, đầu tư một ít animation cho đúng với vị thế của nó nào:
Have a quick view on desktop layout. We applied not only the basic animation like fading or motion but also the lottie animation. We used simple lineart for both illustration and animation, the line animation just takes around 200kb of storage and it helps the site load faster than retrieving a megabytes video.
Product section is the spotlight area, it deserves more animation than others:
Trên mobile cũng vậy, nhìn cũng na ná nhưng nó là một bước nâng cấp đầy hãnh diện của tớ so với bản tiếng Nhật
Same on mobile devices, they looks similar but that is actually our proudly upgrade compared to Japanese version
Web Nhật
Japansese’s
Web tự hào Việt Nam
Vietnamese’s
Về song ngữ, tớ tích hợp cả hai thứ tiếng trong html attribute và dùng js để thay đổi qua lại. Điều này nghe có vẻ tối kiến nhưng tớ cho đó là cách nhanh gọn đơn giản để giải quyết vấn đề, thay cho việc làm 2 trang ngôn ngữ riêng và phải load lại mỗi lần thay đổi. It is not stupid if it works 😂😂😂
To solve the dual-language issue, we put them two into html attribute and use js to switch around. This sound stupid but for us, this is the easiest and fastest way to do the job, instead of making 2 separated pages for each language and reloading when switching. It is not stupid if it works 😂😂😂
Nhìn lại một số mobile screen tiêu biểu nổi bật nhé:
Let’s walk through some highlight screens:
Và… hết rồi! Một dự án không lớn cũng không nhỏ nhưng vui đối với tớ vì được làm những gì mình thích: design, coding và animation. Cảm ơn bạn đã ghé xem, nếu muốn biết thêm về sản phẩm khử trùng của Cleverin, ghé website nhaaaaa
. . .
Client: Cleverin
Agency: Promotec Vietnam
12.2020
And that’s all! A project that is not so big and not so small, but it is fun for us; we can do what we love in a commercial project, not a side one. It is fun, isn’t it!? A big thanks to you for reading this showcase till the end, and if you’re interested in Cleverin’s products, visit their new website:
. . .
Client: Cleverin
Agency: Promotec Vietnam
12.2020
