Medtech mockup (login screen, in polish)
Medtech mockup (login screen, in polish)
Medtech mockup (login screen, in polish)

MedTech Website

Seamless Login and Registration with AI Chatbot Support

Seamless Login and Registration with AI Chatbot Support

Seamless Login and Registration with AI Chatbot Support

What?

MedTech Website

Why?

Recruitment task

Tools

Figma

Note to recruiters: This is my portfolio project from recent years. Due to NDA restrictions, I can't showcase recent CRM work but happy to discuss my problem-solving approach. I have redesign projects in progress though - stay tuned!

Problem

The problem to solve was young adults being not so inclined to talk with doctors on the phone during the process of registering a doctor's appointment. In response to this issue, I was searching for a non-verbal solution.


Solution

Implementing a chatbot or AI text tool for appointment scheduling made sense. The website should incorporate this feature, inform users about it, and ensure a welcoming experience.

The chatbot interacts with users through text, producing an AI-driven report for the doctor. This report comprises crucial information about the patient's illness and their preferred method of consultation.

Furthermore, I integrated images of young individuals and added playful, floating chat decorations or cartoonish illustrations. This was done to exude a youthful and approachable vibe for the site.

Medtech mockup (register screen on laptop)
Medtech mockup (register screen on laptop)
Medtech mockup (register screen on laptop)

Register

I aimed to incorporate features that would resonate with our target users. To achieve this, I added a carousel on the left with a prominent message, 'Book an appointment using our chatbot,' making it more convenient for users who prefer not to talk in person. Additionally, I included images of young people and playful, floating chat decorations to convey a youthful and approachable vibe for the site.

Medtech mockup (register screen)
Medtech mockup (register screen)
Medtech mockup (register screen)

Grid

I decided to use a standard 8-point grid, ensuring that distances between UI elements are multiples of 8.

8-point grid on mockup
8-point grid on mockup
8-point grid on mockup

Login

I crafted various versions of login screens, incorporating elements such as doctor photos to align with the brand identity. Additionally, I created a preliminary login section prototype, complete with button hover effects, diverse input field variations, and a link to the registration screen.

Login screen with doctors photo
Login screen with doctors photo
Login screen with doctors photo

Responsive design

I designed responsive versions of screens for desktop, tablet, and mobile devices. Furthermore, I created a responsive layout preview using the Breakpoint plugin. Additionally, I created a chatbot card solely for decorative purposes.

Components (mobile login, chatbot)
Components (mobile login, chatbot)
Components (mobile login, chatbot)

Future Prototype Updates Concept

The prototype could be enhanced with the Alan AI API, an AI-based voice assistant that is free for non-commercial use. This addition could enhance the user experience by enabling appointment booking through voice commands, eliminating the need to interact with a human agent.

Alternative login screen with AI Assistant (in english)
Alternative login screen with AI Assistant (in english)
Alternative login screen with AI Assistant (in english)