DigiCare - Online doctor appointment
Imagine a healthcare application developed without the involvement of a dedicated product designer—resulting in a complex, unintuitive experience where even simple tasks become frustrating for users striving to manage their health effectively.
My role in the Digicare project was to redefine this experience. I began by identifying system requirements rooted in user needs and pain points, then crafted a cohesive visual identity to establish a clear and approachable interface. From there, I designed the entire software system, focusing on the mobile platform, which offers essential features such as medical history tracking, appointment scheduling, and medication reminders.
Join me as I walk you through this journey—step by step—culminating in the creation of a seamless, intuitive, and user-centric healthcare application that truly empowers its users.
Mobile App Design
2022 | 3 months
Healthcare
User Research | UX/UI Design | Develop a Mobile Application
Role
UX/UI Design | Developre
Tools
Balsamiq | Adobe XD | Flutter (Dart)
Competitors
Before starting a project, it is crucial to evaluate the existing options available to potential users, especially the competitors of the final product. Through research across various sectors, we identified several competitors for DigiCare, with notable ones being BetterHelp and Curia, which primarily focus on facilitating communication with doctors and providing detailed information about them.
What sets DigiCare apart are its innovative features, such as medical history records and an online appointment scheduling system. These additions are designed to reduce traffic at medical facilities and save time, offering users a more efficient and convenient healthcare management experience.
Users Research
Most of our users are patients or their companions. Based on consideration we concluded that the user profile could be:
Scenario
Martin’s friend’s party is tomorrow and he is very eager to go. Today is the weekend and everywhere is closed, he has a stomach ache and his doctor is not available. Martin really needs to talk with a doctor about his problem to cure and go to tomorrow's party. He calls his daughter and describes his problem to her. His daughter helps him to install the DigiCare application and work with it. Martin searches for a doctor on DigiCare and finds a doctor who tells Martin by advising him to drink herbal tea and get painkillers.
Questionnaire
Hierarchical Task Analysis (HTA)
At this stage, we conducted a Hierarchical Task Analysis (HTA) for the application's potential tasks before any implementation began. HTA is a task description method and a variant of task analysis that serves as a foundational step for other analysis techniques, such as Critical Path Analysis (CPA).
The purpose of HTA is to create a detailed, hierarchical structure of goals, sub-goals, operations, and plans, offering an exhaustive breakdown of tasks into progressively smaller units. By doing so, it provides a comprehensive understanding of the steps required to achieve specific outcomes.
While multiple tasks can be analyzed, each with its own hierarchical task analysis, at this stage, we focused on three key task analyses for the primary features supported by the application. Below, I will present one of these analyses to provide insight into how HTA was applied.
State Transition Network (STN)
A State Transition Network (STN) is a diagrammatic representation that maps the flow of data between specific data points, known as states or nodes, in a probabilistic manner. It is developed based on a set of data and visually charts how the system transitions from one state to another.
This step represents the second stage in the design of our prototype. Below, I present several STNs created for specific tasks, illustrating the flow and logic behind key system functionalities.
Mockups
Our design process involved creating interactive mockups to visualize DigiCare’s features and interface.
Process:
Created wireframes using tools like Balsamiq for initial layouts.
Iteratively refined mockups based on user feedback and heuristic evaluations.
Ensured alignment with accessibility and aesthetic design principles.
Key Features:
Home Page: Quick access to doctors, categories, and emergency calls.
Pill Reminder: Customizable alarms with pill descriptions and schedules.
Appointment Booking: Seamless selection of doctors, dates, and insurance details.
Outcome: The mockups formed the foundation for prototyping and subsequent user evaluations.
User-Centered Evaluation
User-Centered Evaluation (UCE) is an empirical method for assessing a system by evaluating both user performance and user attitudes. It involves collecting subjective feedback from users on aspects such as effectiveness, satisfaction, quality of work, support and training costs, and even user health and well-being. UCE focuses on determining the utility and value of software for its intended end-users. While usability—the ease of use of software—is a necessary condition, it alone is not sufficient to evaluate the overall success of a system.
UCE serves three primary goals:
Supporting decisions – guiding design and development choices.
Detecting problems – identifying usability or performance issues.
Verifying product quality – ensuring the system meets user needs effectively.
These functions make User-Centered Evaluation an essential tool for developers, enabling them to justify their design efforts, improve system functionality, and make informed decisions about which version of a system to release.
Think-Aloud Testing
We engaged five participants in a think-aloud session to evaluate the user experience by performing the following task:
Selecting a doctor and initiating communication with him/her.
Findings
Through this process, we identified several design issues within our application, which have since been addressed and resolved in the latest version of the app.
Identified Problem
One of the key issues discovered was the absence of a direct calling feature to connect users with the doctor's office.
Final Product
After all this work, the final application is delivered with the report alongside with source code. Plus here are some screenshots of the final application. The technologies that have been used to develop this app were:
Programming language: Dart
Framework: Flutter
Platform: Android
Emulator: Android Studio Emulator
And some relative libraries
