.webp)
CSS Design Award - Site of the day
Awwwards - Honorable Mention
Behance - Featured UI
Diagnox was founded with one simple aim – All people, regardless of status and buying power, should have access to quality healthcare. They aim to provide access to all individuals with quality and affordable healthcare products that seamlessly integrate with our daily lives to “improve quality of life”. It’s our pleasure to help Diagnox build their website to showcase and sell their amazing products.
Diagnox is a personal healthcare and wellness products and technologies company. They design, develop innovative, and smart healthcare products and technologies that are easy to use for at-home and clinical diagnostic/wellness and monitoring purposes.
Their biggest market is USA; however, they aim to become a global brand.
Provides a modern and contemporary look with very high-quality graphics that connect “people” with the brand and healthcare.
Incorporate more life style images and videos all over the website.
Make the website look more professional with a modern and clean look.
We used mind-mapping to envision the website’s information architecture, prioritize the hierarchy of pieces, and create a fully functional website. To enhance the overall UX, we must anticipate their needs and present relevant information at each step. As a result, the site structure is influenced bt various user types. It was able to simplify user flows between sites based on this by deleting unneeded pages, combining existing ones, and creating new ones as needed.
To show prominently 4 main products on the homepage, we used the circle in the Diagnox Health’s logo and the color of the product packaging as the circle color to increase brand awareness.
If we show all of the content, users will get bored. So instead of showing all the information of products, we created buttons, hints, etc. for users to click to read more detail.
The most effective way to let user know client is global brand is the world map. We used the world map in the footer, use simple animation to mark the countries and continents where Diagnox Health’s product appeared.
DM Sans is a low-contrast geometric sans serif design, intended for use at smaller text sizes. This font is modern, easy to read and make we feel friendly. DM Sans supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages. It was designed by Colophon Foundry (UK), that started from the Latin portion of ITF Poppins, by Jonny Pinhorn.
Main colors were used for text and background. Gold and other shades of grey were used for illustrations. The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion. I used package’s color of Diagnox’s main products for main product detail page. It will help Diagnox increase brand awareness.
Source: Freepik and Adobe Stock
.webp)
.webp)
.webp)
Webflow only allows one product page in one project, but the client wanted to add four types of products with four different types of layouts which were nearly impossible to achieve. Normally webflow developers make static pages, because of that the products are not linked with cms and content no longer remains dynamic. The issue with it is that the client has to add products on separate static pages and also if he wants to update or change any information, the client has to make changes on all static pages.
Whereas we used specific filters and some custom code to create product template pages so that the client can easily manage all product pages from one cms collection list,
As always we even used cms filters for documentation, testimonials, user video reviews, and faqs of each product so that the client can add documents, testimonials, user video reviews, and faqs with the respective product, by doing this client and his team members were able to change and update the content easily.
The client wanted the webflow native tab component to work as tabs on the desktop and as a slider on mobile, so it was not possible to use only webflow. Usually, webflow developers make separate sections for desktop and mobile which makes the site heavy and when the client wants to make any change they have to change from the desktop as well as the mobile which is a painful process.
As webnem is always focused on creating the best user experience and client satisfaction,
We created a custom slider by using JS library (jQuery) to make it responsive on all screens, but keeping in mind client satisfaction and UX standards we developed the section using a slick slider developed by using custom code this issue was resolved and we overcame the webflow limitations by using custom code.
By Diagnox Health
