The latest challenge of modern healthcare is making it contactless and accessible in unreachable regions. Telehealth removes the need for an actual meeting between a patient and a doctor, and makes medical services available via digital means.
The client addressed Cieden to re-work a legacy system and create wireframes for a platform that allows multiple clinics to set up both virtual and physical consultations with patients.
Design Director, Business Analyst, UX/UI Designer
Discovery phase and UX/UI Design for the MVP of a web app
Clickable wireframes and several UI Concepts to be presented to investors
The application should enable multiple clinics to schedule virtual (video, text, audio) and physical consultations between doctor and patient. The application should host multiple clinic profiles that can be customized (branded) based on the clinic requirements. Users need the ability to set up and receive a consultation via web and mobile devices.
The scope of work included the features with the highest priority for the first phase. There are five user roles: guest (not registered user), patient, doctor, clinic admin, and site admin.
The platform should have strict end-to-end encryption for GDPR & HIPAA compliance and support multiple languages based on user location.
- collaborative stakeholders (business, internal BAs and developers) ensured that the final deliverables fully meet the customer’s requirements;
- a Business Analyst involved during the full design cycle ensures that the app is human-centered and reveals around the end-users wants, needs, and limitations are taken into account, and their needs are met;
- tight collaboration with the development team helped to validate the tech feasibility of design decisions from the earliest stages of project development;
- reusing some design system elements from another product we created for this client allowed to lower the costs.
- the application was based on a legacy system without comprehensive documentation;
- the platform had complex data dependencies with other products within the ecosystem;
- the application had to meet WCAG compliance requirements;
- the project had to support multiple languages;
- the client had tight deadlines.
We designed an app that allows patients to skip the waiting room and start a virtual visit via any digital device. It provides medical services tailored to your needs and schedule. Wherever you are, doctors’ help is near.
Text or Phone Consultation
The challanges that we faced designing text & phone consultations were the following:
how do we provide a GP with all the critical info about the patient to be at hand during the visit;
at which point would they check intake form with symptoms, measurements of a current blood pressure, sugar level & temperature, and the medication that the patient is taking;
should we redirect a GP to patient profile to see Medical Info, Medical History and Notes (that are visible for doctors only) or place them here in separate tabs;
what’s the duration of each visit and should we show the timedown in real time.
Triage - GP view
Triage is the process of evaluation and prioritization of the urgency of the patient's condition. Key factors that we had to keep in mind while designing the triage flow for GP view are:
for respiratory illnesses & Covid-19 related illnesses (if more than 2) we added a red label;
GP (or a nurse) reviews each case daily and marks their priority (P*, P1, P2, P3);
since only a limited number of spots of high-priority visits (P*) were available, this priority option was automatically disabled when the queue was full. However, emergency spots were available at all times;
a GP can assign a Visit Type (text or phone visit) along with the priority;
we needed to prioritize features that should be added to the system in the future. E.g. prescriptions after the visit are out of scope for MVP as it’s not easy to integrate with pharmacies right away.
Triage - Admin view
We have defined the following Jobs-to-be-done (JTBD) for Admin role:
an admin should be able to see a list of processed triages by provider and filter these by Visit Type and GP;
be able to book consultations for each patient based on priority and patients’ preferred time slots. We decided not to allow auto assign or ask patients to pick time (phase 2). We played with a drag&drop into a calendar concept but it didn’t seem straightforward;
be able to generate a link for consultation (in the backend) and send a patient an email confirmation with consultation details;
should be able to archieve the triages that do not require any action and see them in past triage section;
be able to reassign the patient to another GP, etc.
Triage - Patient view
The urgency of each case is evaluated by an intake form that each patient fills out. The patients who toggle the “urgent” mark, automatically join the waiting room and get on a call with a healthcare provider right away. Otherwise, a clinician will review each case and mark its priority that would be used to schedule an appointment. Patients can state their preferred time of the virtual visit which makes healthcare truly built around their life.
The main challenge in healthcare app design is making it safe and comfortable for users in different medical conditions while also meeting strict security standards. It's no small task, but we know exactly how to handle it. Did we just hear a sigh of relief?
Discovery is a process of collecting and analysis of information aimed at framing the problem to be solved, business opportunities to be captured, gathering information about users, competitors in order to make data-driven design decisions.
The Discovery phase is particularly valuable for healthcare projects, since it's all about designing a digital front door that offers patients a single point of access to all of the necessary healthcare professionals and services.
The Discovery phase is helpful to:
better identify project scope and goals resulting in a more accurate estimate;
create a better understanding of business and user needs, gain domain knowledge and context of the solution;
create a user-oriented experience;
avoid the need for making costly changes during advanced stages of the development process;
gain understanding of constraints and limitations that impact the solution: legal, technical, environmental;
creat shared undertanding and document high-level product requirements.
The Wireframing stage is a way to generate ideas and validate them fast. We experimented with concepts and layouts of product pages and created a clickable prototype to test the app and receive early feedback from the target audience. This feedback provided a foundation for adjustments and improvements to the application.
The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.
Documentation and dev support
Along with design source files, the Cieden team prepared supporting documentation. Its key deliverables included: a general system overview; user cases and user stories; roles/permissions matrix; acceptance criteria; BPMN process diagrams; end-to-end user flows.
start your project with us.
is easy .