Role
Visual Design
UI/UX Design
Web Development
Industry
Healthcare
Duration
This is some text inside of a div block.
Date
December 2021
Designed and Developed By:
Linked inAdil Shehzad

About project

Designed and Developed By:
Adil Shehzad

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.

Brief

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.

Target

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.

Storage Scholars website on laptop and mobile
Mobile version of Diagnox Health
Following the principle of user-centered design, “Give visitors what they’re looking for,” we implement the following strategy
Redesign process

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.

User research
Understand your client first
User flow/Sitemap
Create solutions by creating user flow
Wireframe
Low-fidelity version for website
Clickable Prototype
To know how website will work
Create Style guide and components
To make design look consistent
High-fidelity design
Make them to be prettier and more attractively
Build in Webflow
Make design come true
What challenges have our designers overcome?
Show 4 main products on homepage
See solution

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.

Client created a lot of content
See solution

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.

How to show client is global brand
See solution

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.

Project Storage Scholars Pages
After redesign

Typography

DM Sans
Font Poppins

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.

Colour Pallete

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.

Illustration

Source: Freepik and Adobe Stock

Violet Ai Illustration
Icon NFT
Icon NFT
Icon NFT
Icon NFT
Icon NFT
Icon NFT
Icon NFT
Icon NFT
progress icon
Think Icon
Saying No
Two Heart
Questions
Celebration
Well Done
Helping Hands
Measuring Tape
Electronic Chip
Flash Icon
Genes
Mechanical Tools
Program Development
Radar
Genetics
What challenges have our developers faced?
CMS
See solution

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.

SOLUTION

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.

JS custom code integration
See solution

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.

SOLUTION

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.

"I couldn't ask for a better experience. The communication was great and Adil made himself available for our update requests. Perfect!10/10 recommended."

By Diagnox Health

NEXT project
Schedule a FreeConsultation Now!
We can bring your website experience to the next level.
Book Now!
Right Arrow