HealthZone+
Mock Informational Website
A mock educational website built in WordPress with light custom CSS, designed to organize health, diet, and fitness content for users across different age groups. The project focused on structured content design, information hierarchy, and practical CMS usage rather than visual flair, a deliberate shift from my more design-heavy work.
Duration
July 2024
Role
Designer, Developer
Tools
- Gutenberg
- WordPress
- Figma
- Development
- Design
- Student Work
The Problem & Goal
Problem
Most health information online is either too dense or too generic. This project explored how content structure, clear navigation, and audience segmentation could make the same information feel accessible to different types of users.
Goal
Gain hands-on experience using WordPress and Gutenberg as a design and publishing tool, with a focus on information hierarchy, usability, and blog-style content architecture.
The Process
01 — Stylescape
Explored tone, color psychology, and readability for a health-focused audience. Cool blues, greens, and neutral tones were chosen to establish trust and professionalism while keeping the overall feel approachable and modern.
02 — Wireframe
Mapped content flow and navigation across health, diet, and fitness sections, focusing on how users would move between guides, video libraries, and featured posts within each topic area.
03 — Prototype
Tested layout spacing, image treatment, and typography before moving into WordPress, with accessibility and readability as the primary benchmarks rather than aesthetics.
04 — Development
Built in WordPress using Gutenberg and custom CSS. Each section, Health, Diet, and Fitness, was templated with consistent structure featuring resources, embedded videos, and audience-specific guides.
Screenshots
The live site is no longer hosted, but screenshots of the build are available below.
Outcome
