A development diary about bringing healthcare and gaming together
The project
Website: Visit the website
Game: Play the game
The story behind the project
A dental practice wanted to improve its online presence. The initial request was simple: modernise the existing website. But we saw an opportunity to do more – much more.
We distinguish between completing a task and solving the underlying problem. Updating a website is useful, of course. But what does “useful” mean here? What larger goal does the improvement serve? We wanted to solve a real problem rather than simply tick a box. We therefore stepped back and examined the practice’s fundamental needs, considering the entire patient journey and user experience, both online and on site.
Ultimately, what matters to patients and practitioners is what they actually experience and do.
Finding the underlying problem
Analysis
The practice did not lack patients, but it needed to communicate its modern treatment options more effectively. A bigger challenge was attracting young, motivated staff.
Although patients consistently gave positive feedback in person, Google reviews painted a different picture – a classic case of negative self-selection in online reviews.
Dental practices are often presented as clean, polished spaces full of shining chrome, but the human touch is missing. Initial user tests supported this observation: a treatment chair does not inspire joy, however modern it may be.
The challenge
- Reducing familiar fears of the dentist
- Modern technology in a conservative setting
- Building trust before the first visit
- Standing out among dental practices
Concept and design
Early in the concept phase, we decided to emphasise the human side. This meant showing the team’s faces and the practice’s warm, welcoming atmosphere, while keeping typical sources of anxiety, such as medical instruments, discreetly in the background.
We redesigned the entire website with these considerations in mind, focusing on a warm and welcoming atmosphere that could build trust and reduce anxiety.
Exploring the visual direction
To improve online reviews, we developed a considered approach: an elegantly designed business card with a QR code and a clear call to action made it easy for satisfied regular patients to share their positive experiences.
Review card
In detailed conversations with the team, one quality stood out: the practice had an exceptionally warm and welcoming atmosphere that conventional digital media struggled to convey. This inspired a special idea. Instead of a conventional 360-degree tour, we chose a virtual tour in the form of a charming pixel-art game. It would offer a modern point of distinction while conveying the practice’s friendly and positive atmosphere.
The game’s start screen
Design decisions
- We chose pixel art because it is:
- Warm and welcoming
- Less clinical in appearance
- Both nostalgic and modern
- Efficient to implement technically
Technical implementation
WordPress integration
A custom WordPress plugin embeds the virtual tour seamlessly into the website:
-
Simple integration through WordPress shortcodes:
-
Modular code using ES6+ standards
-
Responsive design for all screen sizes
-
Intelligent asset management for performance
-
Flexible configuration options
Game architecture
- Engine development:
- Canvas-based rendering
- Modular JavaScript structure
- Asset preloading system
- State management
Performance optimisation
- Efficient asset loading
- Mobile-first approach
- Optimised memory use
- Progressive loading strategies
Creating the virtual practice
Asset development
Ben and Pati transformed every corner of the practice into carefully crafted pixel art:
- Faithful recreation of the interior
- Animation of characters and objects
- Development of a consistent visual style
- Integration of interactive elements
Reference photographs of the practice
Pixel-art assets
Technical features
- Interactive elements:
- Clickable objects with information
- Character dialogue
- Dental-health mini-games
- Simple animations
- Easter eggs as surprises
User experience
- Intuitive navigation
- Accessible entry
- Responsive design
- Progressive web app functionality
Team and collaboration
Roles
- Jonas: Software development
- Jamie: UI/UX design
- Joel: Game design
- Ben: Art planning and pixel art
- Pati Pixel art and assets
Development process
- Agile methodology
- Weekly iterations
- Close collaboration with the practice
- Continuous feedback
Technical detail
WordPress plugin architecture
- Modular structure
- Efficient asset management
- Responsive integration
- Performance optimisation
Game engine
- Canvas rendering
- State management
- Event system
- Collision detection
Post-mortem
Lessons learned
- Balancing entertainment and information
- Technical optimisation for different devices
- The importance of user experience in a medical setting
- Simple gamification, such as achievements, can be remarkably effective
What would we do differently next time?
- Plan the asset pipeline thoroughly, including naming conventions, file formats and templates
- Introduce more simple gamification much earlier
- Prevent content creep by clearly defining during concept development how much detail is enough
Outlook and future
Our project shows that innovative digital solutions are possible even in traditional fields such as dentistry. Combining technical expertise and creative design produced more than a website: it created a digital experience intended to help patients reduce anxiety and build trust.
Developed by PlayInsight Studios. Visit the website and experience the virtual tour for yourself!