Skip to content
Mwd scale

NutriHub

Nutrihub is a health-focused website designed to help users kickstart their wellness journey through personalized nutrition tools and curated content. The site combines WordPress-powered content management with a custom-built calorie calculator for an interactive user experience.
Project Link
UI/UX Case Study

Project Goal

Nutrihub’s mission is to empower users on their wellness journey through a tailored, interactive website. The core goal was to merge intuitive UI with custom-built functionality to offer a highly engaging, health-focused experience.

Objectives included:

  • Providing a custom calorie calculator for personalized nutrition insights.

  • Ensuring effortless content updates via WordPress CMS.

  • Enhancing user engagement through dynamic, responsive design.

  • Promoting newsletter sign-ups with valuable wellness content and incentives.

 

Product Perspective

Nutrihub is not just another health blog—it’s a hybrid solution combining the flexibility of WordPress with the power of custom code. While WordPress manages content with ease, the handcrafted calorie calculator delivers real-time, interactive value to users.

The site was designed in Figma, developed with WordPress, and enhanced using custom HTML/CSS/JS/PHP.

 

Key Features

🧮 Calorie Calculator – Built with vanilla JavaScript, PHP, and HTML/CSS to give users personalized daily calorie needs based on their input.

📱 Responsive Design – Created in Figma, developed with Elementor and ACF to ensure seamless access across devices.

📩 Newsletter Integration – Users can subscribe for health tips and receive a free eBook as an incentive.

🧾 Interactive CTAs – Prominent calls-to-action like “Join Us” and “Calculate Calories” guide users through conversion paths.

💬 Testimonial Slider – Built using WordPress plugins and enhanced with JS to showcase social proof.

🎨 Visual Consistency – Brand identity maintained from Figma mockups to final WordPress deployment.

 

User Journey Example

1️⃣ Visit the homepage and explore health resources.
2️⃣ Input details into the calorie calculator.
3️⃣ Receive personalized results instantly.
4️⃣ Subscribe to the newsletter for more wellness tips.
5️⃣ Read testimonials and join the Nutrihub community.

 

Accessibility

♿ Semantic HTML – Built with accessibility in mind for better SEO and screen reader support.
🖼️ Alt Text & Readability – Every image includes alt tags; typography and color contrast support legibility.
⌨️ Keyboard Navigation – Both WordPress elements and the custom calculator are fully keyboard-friendly.

Performance Optimization

🚀 Optimized Media – Images compressed using WordPress tools to reduce load times.
🧩 Minified Custom Code – All scripts for the calculator are streamlined for speed.
🛑 Lazy Loading – Applied to images and sliders to improve load efficiency.

SEO Strategy

🔍 Meta Tags & Schema – Handled via SEO plugins for proper indexing and structured data.
📱 Mobile Optimization – Responsive design supports SEO ranking and usability.
✍️ Content Structure – Clear headings, readable paragraphs, and keyword placement ensure indexability.

 

Website Score

Performance testing was conducted using:

  • Google PageSpeed Insights

  • Lighthouse

All webscores are above 90

 

Conclusion

Nutrihub blends the flexibility of WordPress with the power of custom-coded functionality. While the core site is built on a user-friendly CMS, the calorie calculator adds a personalized, interactive element that boosts user engagement. This hybrid approach enabled fast development, easy content management, and a compelling user experience—all aligned with the health-conscious brand identity.