Chronic Kidney Disease Awareness Website
Simplifying Education with Gamified Learning
• Interactive Design • Gamification
MY ROLE
Interaction Design
Visual Design
Prototyping
User Flows
DELIVERABLES
User Interviews
GIF Animation
High Fidelity Designs
TOOLS
Figma
Illustrator
After effects
Photoshop
YEAR
2024
Exploring Challenges and Setting the Plan
The project began with understanding the audience’s challenges, such as difficulty navigating complex information and a lack of engaging resources. A thorough competitive analysis identified areas for improvement in existing platforms.
From these insights, the plan emphasized:
• Designing an intuitive, user-friendly interface that simplifies navigation and enhances accessibility for a wide audience.
• Incorporating gamified features like quizzes and progress tracking to create an engaging and interactive experience.
Persona
From Brainwaves to Blueprints
The planning process focused on creating an intuitive, engaging experience:
• A modular content structure was designed to organize information into clear sections, making navigation simple for users.
• Gamified features were conceptualized to include quizzes and reward systems to motivate learning.
Bringing Pixels to Life
The design process translated the ideas into visuals and functionality:
• Wireframes: Low-fidelity wireframes outlined the layout for the resource hub, quizzes, and tools, emphasizing simplicity and usability.
• Visual Design: A calming color palette and clean typography were chosen to make the platform approachable and trustworthy.
• Interactive Prototypes: Clickable prototypes demonstrated how users could navigate the site, take quizzes, and use tools seamlessly.
Wireframe
Branding
Design
Passing the Torch to Development
The finalized design, including interactive prototypes and detailed annotations, was delivered for development.
• The design showcased a comprehensive resource hub, engaging gamified features.
• Client feedback highlighted the design’s clarity and ability to simplify complex medical concepts.
In the first phase, we built the site with a resource hub and a gamified concept. The next phase focused on the client’s idea of developing CKD risk calculators, drawing inspiration from existing websites.
Behind the Scene
When the CKD awareness project began, I aimed to design a simple, engaging experience that would make medical content easier to understand.
Early on, I worked closely with the client to align on tone, accessibility, and key learning outcomes. Understanding how users — especially patients and caregivers — would navigate the site helped shape a more empathetic and intuitive flow.
To maintain consistency, I set up a mini brand book covering colors, typography, spacing, and tone. Micro-animations were added to the quiz screens to gently guide users without distraction.
Key Takeaway: Direct client collaboration and user-first thinking helped transform a complex topic into a clear, approachable experience — where even the smallest visual and motion details made a difference.