Sep 2021 - Mar 2022
I collaborated closely with the client and the development team to create a responsive web app for virtual consultations between doctors and patients. Through multiple iterations, we incorporated insights gained from the market and target audience to ensure the final design effectively meet the project's main goal. The design is currently being developed to bring the vision to life.
Elevar Salud is a platform that facilitates virtual appointments between users seeking medical advice/consultations with licensed Mexican Health Care Professionals. This case study focuses on the doctor side of the product, providing a comprehensive platform that empower health professionals to set up their schedule, manage appointments and customer information, conduct live consultations and track earnings.
• Validation the concept’s viability
• Test and gather feedback on key features with a MVP
• Ensure the platform is intuitive for busy professionals and suitable for Mexican market
As the sole UX/UI designer for the project, I worked closely with the client and got the developers involved in the process early on. I was responsible for:
• Research and ideate
• Wireframes
• Hi-fidelity UI design
• Prototyping
• Design system
• Design handoff
The web app project has reached the development phase, with the platform currently being built and fine-tuned for launch.
The dashboard enables health professionals to access upcoming appointments, resume live consultations, and track earnings effortlessly. It provides a centralized hub for streamlined practice management and enhances productivity.
The platform enables doctors to easily schedule their availability through a simple click-and-drag operation. They have the flexibility to fine-tune their schedule using various controls. Additionally, the platform provides doctors with an overall view, allowing them to see how all appointments fit into their available time slots.
The appointment management module displays doctors' appointments categorised by status and offers a detailed view of each appointment. They can preview medical history or reschedule the appointment if necessary.
The feature empowers doctors to seamlessly monitor and manage their earnings from virtual consultations. With a comprehensive earnings chart displaying historical data and payout status, doctors can easily track their income and gain valuable insights into their financial performance.
Additional features will be presented in this case study when the product is officially launched.
I’d like to walk you through how I approached this web app project with a specific focus on the Scheduling feature.
STEP 01
Upon receiving the project brief, I embarked on the discovery phase by engaging in rounds of calls and online communication with the stakeholders. This allowed me to understand the problem space, technical requirements, and target users. With the business goal and user needs in mind, we defined the project's scope, setting the stage for the subsequent stages of the design process.
STEP 02
During the research phase, I conducted a thorough analysis of competitors, explored similar products in the market, and delved into UX best practices. This research allowed me to gain valuable insights into the competitive landscape, understand user expectations, and identify opportunities for differentiation.
STEP 03
I consulted closely with the development team to understand their preferred tech stack, libraries and frameworks. Together, we evaluated different options based on project requirements, scalability, customization capabilities and performance, ensuring a robust foundation.
STEP 04
Building upon the established foundation, I transitioned to sketching solutions and translating them into digital wireframes. This pivotal wireframing stage involved defining user flows and information architecture and refining the interactions and user experience through collaborative discussions, internal reviews, and iterative refinements.
STEP 05
With an approved set of wireframes, we started exploring the art direction for the product and we agreed on a modern set of colour palette and typography that resonated with the theme of the product. Having setting the overall style with the help of the dashboard page, I transformed the complete set of wireframes into high-fidelity responsive UI design. Minor changes were make to the flows during this process with the insights from ongoing research.
STEP 06
We focused on adapting the design to ensure optimal user experience across different devices. Through this step, we successfully addressed the increasing trend of mobile usage and ensured that our design remained accessible and user-friendly to a wide range of users, regardless of the device they were using.
STEP 07
While working on the UI design, I built all reusable components into a componenet library in Figma. When the UI design has been approved, I dedicated some time to organise the file and put together a scalable design system customised for this product. Handoff annotations were prepared for screens and designs that required further explanation.
I was available to support the dev team during the development phase, ensuring a smooth and successful handoff.
I'm excited to discover how I can help. Send me a message now and let's get started!
