Case Study - Mokhtaber
Lab Test Booking Application
Mokhtaber is a medical test booking platform that connects users with nearby diagnostic labs for both home sample collection and lab visits. Designed for convenience and transparency, it features seamless lab registration, test ordering, and admin-level management for streamlined healthcare access.
Mokhtaber, Dubai
- Challenges
The client faced difficulties managing multiple user types—patients, labs, and super admins—within one cohesive platform. Lab onboarding was fragmented, test listings were inconsistent, and users lacked clarity in booking processes. There was also a need for real-time status tracking and easy access to test reports.
Additionally, the existing UI lacked medical professionalism and user trust. Navigating between lab options, booking flows, and admin tasks wasn’t intuitive, especially on mobile devices. This created friction across the platform and reduced user satisfaction.
- Solutions
We designed a clean, responsive interface that clearly separates user roles while maintaining consistency across workflows. Labs can register and manage test offerings, patients can book appointments easily, and the super admin has full visibility and control over platform operations.
With a modern UI, structured navigation, and medical-grade design elements, the platform now supports smooth test bookings, clear status updates, and secure report delivery. The result is a trusted and user-friendly healthcare experience for both patients and providers.
Our Process
We follow a user-centric approach—starting with research and wireframes, progressing through high-fidelity designs, and ending with interactive prototypes. Every step is focused on creating intuitive, impactful digital experiences.
01
User Flow Planning
Mapped buyer and seller journeys to ensure smooth navigation for product search, comparison, and inventory management.
02
Wireframes
Created low-fidelity wireframes to define the layout for dashboards, product listings, and comparison modules
03
High-Fidelity
Designed clean, intuitive interfaces focused on usability for both buyer-facing and supplier-facing web screens.
04
Prototype
Developed clickable prototypes to test flows like product search, comparison, and seller product uploads before development.
Low-Fidelity
Quick, sketch-style layouts focused on structure and user flow. These wireframes help visualize content placement and screen hierarchy during the early design phase.
Style Guide
Mokhtaber uses a trusted and professional palette with Navy Blue (#01294C) for reliability, Teal Green (#00AD8B) for freshness, and Cyan (#21808B) for clarity. The combination reflects the platform’s focus on healthcare accuracy and user trust.
#01294C
#254400
#4A4459
#5D5D5D
#F6F6F6
#F6F6F6
DM Sans
We chose the DM Sans typeface for its geometric simplicity, contemporary aesthetic, and excellent legibility. Designed for digital interfaces, it delivers a clean and friendly appearance that enhances readability across devices. Its balanced letterforms and open spacing make it ideal for user interfaces that require both clarity and elegance—ensuring a seamless experience throughout the platform.
Heading 1 - 48px
Heading 2 - 36px
Heading 3 - 24px
Body - 16px
Hi-Fidelity
Polished, fully designed screens with colors, typography, and interactions. These mockups represent the final look and feel of the product, ready for prototyping or development.
