Smart Telehealth is a web-based platform that allows patients to interact with their doctors to a greater extent. The re-design process of this platform enhanced it with better visuals, much easier and clearer user interaction, and a wider variety of features than its predecessor.
Daniel David (UX/UI Designer)
The medical team was overwhelmed by the number of people who required medical attention throughout the pandemic. Because most practitioners in the private sector were unable to handle the volume of patient appointments, the solution was to create a system that will allow everyone to reach a doctor as quick as possible.
Smart Telehealth was an excellent method for connecting all private practitioners with their patients via an online platform so that they could receive online sessions, treatments and even prescriptions.
The previous platform was both antiquated and unclear. The user experience was unpleasant, with fading colours and poor font pairings, and the navigating procedure may take minutes.
Patients may be redirected to alternative platforms with better aesthetics and an easier navigation system if the user experience is poor. It shouldn’t take more than a minute to schedule an appointment with a certain practitioner in a given department.
defining the process
We chose to divide the project into four main phases, each separated into many sections, while working with another freelancer. With a three-week deadline, we had to work quickly using an agile development methodology that allowed us to identify quick and effective solutions.
The project was also broken down into weekly sprints, with daily feedback from the team and the client.
discovery & analysis
To start the discovery process, I held a series of Zoom sessions with the product owner for a series of workshops to learn about their present workflow, identify project goals, define the project roadmap, and sketch live concepts during the meetings. Then I got the opportunity to speak with one of the practitioners, to whom I posed a number of questions in order to identify the final concept’s impending aspects.
I proceeded to synthesise common themes using the thoughts and responses I had received. Thanks to the practitioner, I was able to establish a persona profile, and then I developed journey maps in Miro to understand better the relationships between the platform’s various user categories.
sprints & task management
I met with the other UX designer after each week-long sprint to reflect on the previous sprint’s accomplishments and highlight areas for improvement. We created and divided our tasks using Monday.com, and each task was prioritised based on how quickly we needed to complete that component of the project.
low fidelity wireframes
To rapidly identify which concepts worked best, I drew each iteration and incorporated the pieces and screens that were required to achieve the users’ goals. The majority of these versions were created with a pencil, a ruler, and a printed web layout during Zoom sessions.
Those iterations play an important part in the process since they allow for fast modifications and allow both the designer and the client to convey their views.
Later, I used Adobe XD to transform the drawings into a high-fidelity design.
high fidelity Wireframes
I was able to turn the “old school” versions into a high resolution digital format using an Adobe wireframe toolkit. I had the drawings side by side with the digital sheet in Adobe XD, and as soon as those were completed, I was given the green light for the high-end design concept.
The conversion for the final design began once the high-fidelity wireframes were done. The final output was completed two days before the final deadline, using a broad range of photographs, colours, shadows, and other graphical components.
The client contacted me on the last day with a bonus request from the development team. They also want a dashboard that was as quick and easy to use as possible. Both the patient and the practitioner may use the dashboard, which gives them access to the platform’s most important features.
A design system has to be built in order to establish a link with the brand. I began the branding process by experimenting with several logo variations, colour palettes, and typeface combinations.
RGB (15, 216, 239)
RGB (47, 38, 96)
RGB (255, 255, 255)
RGB (155, 93, 229)
RGB (55, 50, 77)
RGB (137, 248, 171)