Designing HackDentistry, a Learning Platform for Busy Dental Students - a case study
Reducing effective study time and helping dental students retain complex information faster and more effectively.
As an Oral Pathologist (Dentist) formerly involved in Academia (dental research and teaching), I understand how overwhelming the path to mastering dentistry can be. Learning dentistry and going through years of dental training can be rigorous. I also empathize with dental students because I was once a dental student myself.
Dental students often grapple with dense textbooks, complex subject matter, making it difficult for students to remember (retention) and retrieve information. Dental subjects could demand the need for repeated learning (for retention). But subjects can be overwhelming, making it difficult for students to inculcate consistent reading/learning habits.
Defining the Problem
Dental students, need readily available access to good dental study material (content with relevant citations), that they can consume easily and retain reasonably well because they want to perform well in their university exams.
HackDentistry
This design project stems from my real-world experience as the founder of HackDentistry, a dental e-learning platform that I built (and still run) with a friend and fellow dentist. The web version’s decent profitability confirms the demand for such a platform. Analytics over the last year show that 39% of users access HackDentistry via mobile, making a dedicated mobile app a natural next step for dental students on the go.
When creating the web app I asked myself: How can I make dental education easier, more intuitive, and…well, fun (less painful)?
The Goal
The goal with the mobile app is simple - to give students the power to learn and revise whenever they had time, in a way that fit into their schedules. Whether a student needs to brush up on Oral Pathology and Medicine between classes or take a practice quiz before an exam, HackDentistry would provide the tools they needed - right in their pocket.
Getting my Hands Dirty
User-Focused Navigation
HackDentistry was to be about simplicity and focus. I wanted to especially avoid an overwhelming navigation. I focused on getting students into their courses quickly. Course selection is direct the moment users log in, allowing users to find relevant content.
This way the enrollment process is seamless, enabling users to start learning immediately after logging in. Students can dive directly into video tutorials or practice quizzes.
Key UI Decisions
Overall, I wanted a clean, minimalist design that ensured students or dentists could access information quickly and intuitively.
Course cards in the home screen in a clean list view represent individual learning modules. Each card, apart from the course title and module type (e.g., video or quiz), has a progress indicator, giving users real-time feedback, motivating them to track their learning journey and stay engaged by visually seeing their progress toward course completion.
Course Chapter and Lessons: Clean, list-based layout for chapters and lessons once a course is selected. The course content is organized into videos and well-structured notes with a clear visual hierarchy.
Notes: The article view for dental concepts adopts a clean, text-focused layout, breaking down the content into sections (e.g., Etiology, Clinical Features, Histopathology, Treatment) with bold subheadings that help students scan through information quickly.
Articles include references at the end for further reading or links to books and research papers, ensuring academic rigour.
Practice Quizzes: Quiz layout is a simple, touch-friendly design, making it easy to interact with while also providing immediate feedback to users for retention.
Dark Mode
Tenet UI, a personal project of mine, is a UI kit and Design system. I had the opportunity to use it as a Design System Library for HackDentistry. Tenet UI has a robust set of design tokens (colour, typography and numbers) which helped me easily switch between light and dark modes.
Some Design Artifacts
Information Architecture
Wireframes
Wireflows
Leveraging Tenet UI-Design System for Speed and Consistency
With Tenet UI, a design system I developed as a personal project, I was able to bring structure and consistency to HackDentistry’s UI. Apart from the need for some custom components specific for HackDentistry, the components and design tokens readily available in Tenet UI helped me drastically cut down design time and build screens rapidly.
Closing thoughts
After a few rounds of refining the UI and prototyping, I was happy with the outcome of HackDentistry. Following a modular design with the help of Tenet UI-Design system ensured designs were consistent and cohesive.
The aim was to have a minimalist design that was clean and simple with an easy navigation and readily accessible content. I didn’t want to experiment with gamification or any of that jazz. Dental subjects are fairly complex and I wanted to prioritize readability.
Less clutter, more focus.