Interface Prototypes

We have aligned the information architecture, element hierarchy, and their mutual positioning in the prototypes, taking into account business priorities and similar successful solutions.

Design Concept

The goal of the service is to provide a safe online practice for both novice and experienced psychologists. For this purpose, a separate page with detailed information about the service has been designed for specialists.

Starting Page

In the personal account interface, we have created a clean visual with color accents on target actions. In the design, we aimed not to overload it and make the interface convenient for regular use.

Specialist Schedule

The specialist's page immediately shows the available options for booking. We display the session's cost and duration, indicate the time zone when choosing a time, and provide the possibility to select the nearest available time of the specialist in one click.

Booking and Payment

When booking a session, we display a summary of information for verification. For group sessions, there is a field for 'invite via email'.

Online Sessions

An online meeting is created within the platform on the scheduled date and time. The next step is to implement group sessions involving multiple clients.

Profile Settings

In addition to managing information, we have added a specialist level in the profile settings, which is based on the number of conducted sessions and affects the service's commission rate.

Account Balance

A balance is provided in the personal account: the client uses the balance to pay for online sessions, while the specialist receives funds from successfully conducted sessions to the balance.

Reviews

We have added a reviews section to the specialist's page in the catalog to make it easier for the client to find their specialist, compare, and make a choice.

Screen States

In the design, we consider all screen states, including submitting a review, moderation status, review rejection, and publication on the specialist's page.

Admin Panel and Statistics

We have created a section with statistics on sessions, finances, and users for administrators in the personal account. It is planned to further scale this section.

Session Control

The admin panel includes extended management of key entities: users, sessions, financial operations, and reviews.

Schedule Settings

We have implemented a convenient schedule in the specialist's personal account, where they can mark slots available for booking by clients. We have provided options to go on vacation, duplicate the schedule for the next month, and copy slots to another day.

Figma Layouts in 5 Sizes

We have created layouts in 5 resolutions for all pages of all roles. Layouts are provided for states: before the start of the session, during, and after completion.

Email Templates

We have prepared texts for errors, notifications, and tips. We have compiled a list of system events and email notification templates for each role.

UX Testing on Users

After aligning the prototype, we assembled a focus group of psychologists as respondents, prepared tasks based on the prototype, and conducted UX testing to identify interface problems and understand what is inconvenient or missing. As a result, we improved the interface based on the specialists' wishes.

UI kit

We have implemented necessary UI components and their primary states to ensure that developers have no questions about how the interface should behave in various cases.

Typography

We have established rules for the typography of the project, the behavior of fonts depending on the screen resolution, style, and page semantics.

Dimensions and Responsiveness

We have defined breakpoints for development for popular devices and screen resolutions to ensure that the design looks consistent regardless of usage context.

Color Palette

We have developed color rules considering the contrast principle and drafted rules for building element shadows. We have defined the primary shades and accent colors.

ACL

We have implemented rules for access restriction to sections and functionality for all user roles. Later, developers will use ACL when designing the application's architecture.

Readiness for Development

Thus, all necessary pre-project work has been completed within 3 months, the interface design project and UI kit of necessary components with primary states, color and typography rules of the project have been implemented. The interface has been tested on real users, the main business hypotheses have been verified, design weaknesses have been identified and improved before development.