Back

How We Developed Talk to Me: a Uniquely Designed Web App for Psychological Consultations

The psychological center Talk to Me asked Purrweb to develop a platform for online consultations. We went at the task with enthusiasm, especially since we already had experience in creating similar services.

The Talk to Me project had one peculiarity. The client provided a ready-made brand book with beautiful illustrations and wanted us to use them in the UI of the web app.

Here, we’ll tell you how we found a balance between a laconic UI and unique aesthetics and developed Talk to Me — a convenient platform for therapists and clients.

Reading time: 11 minutes

Talk to Me case
Table of contents

Our tasks in the project

At the beginning of 2022, we were approached by Talk to Me — a large psychological center with a team of experienced specialists and its own school for training therapists. They call themselves a corporation of kindness and strive to change the world for the better by providing psychological support to people.

Talk to Me used to work offline and then decided it was time to go online. They turned to us to develop a platform for video sessions with psychologists and coaches.

We had the following tasks:

The project tasks

We assembled a team of our designers, developers, and testers — and started working.

See also  Mental Health App Development: features, benefits & costs

Online platform with special aesthetics

The client came not just with an idea, but they brought a ready-made brand book: it had colors, illustrations, logos, and typefaces. This brand book was developed by another design agency. That’s why we didn’t have to select a color palette, typefaces, or background images.

The concept was different from what we saw in other similar services. As a rule, they use a laconic and 2D design with one or two accent colors. In the Talk to Me case, everything is different.

The designers from the agency created 3D images with floral patterns that refer to tropical jungles. The palette is based on the green foliage.

The work made by the agency is on the left, and Rousseau’s picture is on the right — as a reference

The designers were inspired by the pictures of the French artist Henri Rousseau: the result was similar but at the same time original

It was important for the client that, in the web app, we use unique illustrations associated with nature.

The design agency made the illustrations in such a way that we could use individual elements and integrate them into the UI.

It was impossible to transfer the full-fledged pictures that were originally in the brand book to the app’s UI. But we used some of them to design the authorization and landing screens — they looked natural there.

The picture that we used for the landing design

The picture that we used for the landing design

We kept the unique style and aesthetics by using the brand colors, typeface, logo, and individual illustrations from the brand book.

And, of course, we kept the general mood: the pictures with peaceful green shades and floral patterns became our references when we were working on the project’s design concept.

We developed design and UX solutions for three sides: for clients, therapists, and businesses

In the Talk to Me service, a user has three entry points: a client, therapist, or business. The visual image of the platform is different for each role, although the variants are united by a common concept. The client suggested reflecting this in the design at the authorization stage. We made screens with three different illustrations — used full-fledged pictures created by the design agency.

Platform clients see “the greenest” screen — a magical forest where people get to know themselves at the beginning of the path to awareness and harmony with the world around them. Therapists get a light picture because psychologists bring light and knowledge. Businesses have a more formal dark background with contrasting elements.

On the landing page, you can notice the main differences in the visuals. Within the platform, we made the UI for the clients and therapists almost identical. This approach allowed us to efficiently reuse components and blocks in design and development.

Look what the client’s and therapist’s home pages look like after authorization: a white background, minimalist buttons, and sparse accent illustrations.

After a user logs in, the set of features depends on the role they selected:

    • Client — to select a therapist and book an online session;
    • Therapist — to add session time to the calendar and view their schedule;
    • Business — to leave a request for psychological help for their employees and track statistics on the use of services in the business account.

Anyone can register as a client in Talk to Me. However, to become a psychologist on the platform, they need to be a specialist with a degree in psychology and certification in the method. In addition, they need to regularly attend personal therapy and supervision.

Selection criteria for the Talk to Me

All the candidates go through three important stages: primary form moderation, a personal interview with the community leader, and a demo session with a real client under the supervision of experienced specialists

Business owners have to fill out a small form, and the Talk to Me managers will contact them to discuss the cooperation details and select an individual product to meet the business needs.

A form for businesses

A form for businesses

We develop solutions for businesses with a focus on user experience, aesthetic design, and system scalability
Our portfolio includes 550+ projects in different niches — from healthcare apps to marketplaces. Contact us and get a free project estimation: we will calculate the cost of the project, estimate the timelines, and write the roadmap.
Get an estimation

Simplified the UI and removed everything unnecessary

When developing the app’s logic, we took into consideration the fact that a user may experience anxiety or depression. In this state, it’s hard to make a decision, even when help is necessary. An overloaded UI and any extra action can scare them away.

To help a user quickly understand the service and book an appointment in a single step, we simplified the UI as much as possible.

One screen = one big green button. It’s one of the main rules in the Talk to Me design. This way, a user immediately sees where they need to click to sign up for a consultation or pay for a session.

One action — one big green button

We added very few decorative elements to the UI to help users focus on the interaction

Side menu. We made a permanent navigation to the left of the main content. For example, on the “My consultations” screen, a client immediately sees the “Consultation history,” “My therapists,” and FAQ buttons. They don’t have to go to the website header or open the hamburger menu to switch to the desired section.

The side menu for easier navigation

The active section in the side menu is highlighted in green to make navigation easier

Feedback. When a user signs up for a session or cancels it, a notification appears in the bottom right corner. It indicates that the action was completed successfully. It’s important so that a user doesn’t have to check the calendar to make sure if this or that action was completed. The service immediately provides vivid visual feedback.

A notification for a user

This prompt appears when a client signs up for a session with a therapist. It immediately tells a user what page they were redirected to and why — it helps them quickly understand what’s going on.

Created a custom calendar from scratch — like Google but for therapists

On Talk to Me, a client doesn’t have to wait for a therapist to confirm the appointment — this happens automatically. A user simply selects an available slot and clicks the “Book” button. If the therapist’s situation changes, they can agree on another date with the client via chat. If a therapist has to cancel the session, the client gets a full refund.

The client’s journey in a traditional psychotherapy service and in “Talk to Me”

Many other platforms require users to follow third-party links to make video calls. On the “Talk to Me” platform, video sessions take place directly within the platform without any extra steps or switching.

For therapists to accurately see and attend all the scheduled sessions, we had to create a convenient and functional calendar.

Here are the features we added:

Color navigation. The calendar slots are highlighted with different colors, depending on whether it is a session with a client or a free slot. Thanks to this nuance, it’s easier to navigate through the UI.

Color navigation

Booking the slots. Therapists don’t have to reserve all the time slots manually. They can set a time period. For example, from 12 to 6 pm, the time will be automatically divided into 55-minute intervals. Five minutes make a standard break.

We automated the time slot reservation

We automated the time slot reservation

Schedule pattern. A user can select when to repeat the schedule for the day: “every weekday,” “every Monday,” etc. This also makes working with the calendar easier.

A user can set up work schedule repetition

A user can set up work schedule repetition

Canceling multiple sessions at once. If a therapist needs to cancel multiple sessions at once, they can do so by clicking a single button. Moreover, the rest of the schedule won’t be messed up, even though the actual consultation time is 55 minutes. The five-minute breaks will be preserved so each slot will start exactly at the given time: 1 pm, 2 pm, etc.

Cancellation of an appointment by a therapist

Cancellation of an appointment by a therapist

Are you looking for a development team for your project?
We have experience in different niches — from fitness apps to delivery services. We will dive into the context of your business and establish interaction with the in-house team. Contact us to get a free project estimation
Get an estimation

Integrated an external video chat for sessions with clients — and saved 100+ hours for our client

We suggested to the client that we develop an internal video chat — this would be a good one-time investment at the start, and later would provide independence from external services.

Besides, we had already integrated this solution into other projects and knew that the result would be solid and pay off over time. There were only two flaws — time and price. This would take at least 200 hours.

This option didn’t suit our client — they decided to launch as fast as possible. So we started looking for an alternative solution — a ready-made “out of the box” service that we would only need to connect to the platform.

After discussions and long searches, we agreed on Agora — an app for video calls. The setup took 30 hours.

At that moment, the solution proved to be cheaper for a client than developing their own video chat.
The Agora-based video chat service

This is what the Agora-based video chat looks like — it’s minimalist and simple. Users can connect from smartphones, tablets, or computers.

Perhaps, in the future, we will develop a custom platform for this task, if necessary. After all, it’s too expensive to pay a subscription fee to Agora for every call.

See also  How to Make a Video Chat App in 2024?

Set up the payment flow so that a client wouldn’t have to overpay for the commission

We had almost no problems with implementing the payment acceptance. We had already mastered the logic of another online psychotherapy service we made for the client from London.

For example, we took into consideration the fact that the user’s money shouldn’t be debited right after booking a session. Otherwise, if a user changes their mind and requests a refund, the service will have to return the money, and they will have to pay the commission fee.

Instead, we set up the flow so that the money would be debited 24 hours before the consultation — according to the “Talk to Me” rules, a client can’t request a refund at this time. So, if they cancel the session, the money will just be lost.

Due to this, there will be no need to transfer money back and forth between the payment systems, and prospectively, a client will spend less money on commissions.

Also, we made sure that the payment, made 24 hours before the session, was frozen in the escrow account. For a certain period of time, the money belongs to no one: not the client’s, not the therapist’s, or the platform’s.

After the session is over, we split the money over the following 12 hours. “Talk to me” gets its percentage, and the therapist receives the payment for the session. This allows “Talk to Me” to pay taxes only on its revenue.

Payment history in the therapist’s profile

Payment history in the therapist’s profile

All payments go through YooMoney. For a long time, we couldn’t get data to connect the service because our client and the platform needed to agree on the work conditions. They managed to do this closer to the release date when the deadlines were pressing — we had to move the launch date to implement everything and thoroughly test it.

Made landing pages for the Talk to Me partner projects

In this project, we had two additional tasks — create landing pages for the Talk to Me partner projects.

The first project was launched in collaboration with a manufacturer and retailer of products for healthy sleep. Their goal is to help people deal with anxiety and improve sleep quality. For this, Talk to Me has assembled a team of therapists specializing in sleep problems who are ready to provide professional support.

The visuals for the landing page were developed using illustrations from the brand book.

Look at the result:

The landing page for Talk to Me and Askona

To enhance the feeling of peace at night, we selected darker and more calming shades in the color palette

Only the main page is designed in dark shades. To evoke the feeling of lightness and visual comfort, we used light shades for the following sections.

The landing page for Talk to Me and the partner

Also, we created a landing page and platform design for the joint project of Talk to Me and the medical network Medsi.

In the fall of 2023, Talk to Me became Medsi’s partner in the area of online psychology in their SmartMed mobile app. Now, the patients of the clinic can participate in video sessions with the Talk to Me therapists directly through the app.

The Talk to Me and Medsi landing page

We designed the landing page in the same style as the main platform, using a peaceful color palette complemented by bright accents. This is the desktop version.

We made versions for a web app and mobile devices.

The screens of the mobile app for Talk to Me and Medsi

During this collaboration, almost 200 Medsi patients had consultations with the Talk to Me specialists. In total, about 750 sessions were held.

Result: Talk to Me keeps evolving actively

In January 2023, we launched the Talk to Me platform for video consultations with therapists — the design and development took 11 months, or 400 and 4,000 hours, respectively. The platform is simple and efficient. At the same time, it stands out from the competitors.

This is the feedback the client left about working with us.

Nigina Abaeva feedback

➡️ Do you have an offline business and want to launch a digital project? We, Purrweb, are ready to help you. We have a lot of experience in different niches, from online therapy services to dating apps and social networks. We will dive into the task and find a solution that will suit your product. Contact us — we will discuss your request, calculate the cost of the project, and estimate the timelines.

How useful was this post?

Rate this article!

0 ratings, аverage 0 out of 5.

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Share