Product Design for AI Coach Platform

Welcome to take a closer look at the landing page. In the above-the-fold area of the page, the main focus is on the visual content presenting the service. The title makes it clear where the user got to, and which coaches are available to him. Additionally, the title creates an emotional and catchy contrast through animation.

The page has turned out light and airy. Smooth web animation adds originality and makes interaction with the website dynamic and lively.

Next, we developed it on Framer.

When we kicked off the design of the application, our first step was to develop a mindmap diagram. This became the cornerstone of our entire process. Our goal was to craft a clear and logical map that captured all the essential elements of the application, their interconnections, and the primary functionalities.

Next, we began creating user interface prototypes. This was an essential step because it allowed us to visualize how the application would look and how users would interact with it. At this stage, together with a client, the team can play out and test most user scenarios, prioritize content presentation and performance, and see what kinds and amount of media content will fit those needs and support the text and interactions successfully.

We focused heavily on usability and user-friendliness, designing interfaces that are intuitively understandable. This way, users can easily navigate and find the functions they need, interacting with the app effortlessly.

The log in page uses the simple structure of a split screen with a slider of the main product features on one half and an interactive zone for easy logging in on another.

Once users are logged in for the first time, they'll be guided to set up their first coach right away. It's a simple process: first, pick a profile and name for their coach, and then they move on to adding a personal touch to it.

Once the initial setup is complete, users are introduced to a chat interface with their virtual coach. The coach greets the user with a welcoming message, initiating the beginning of their virtual coaching journey.

Within this chat environment, users have the opportunity to communicate with their coach, ask questions, and seek guidance. The interaction can range from text-based messaging to more interactive features like voice call, allowing for a diverse and personalized coaching experience.

Voice calls offer users a dynamic and personalized coaching experience. This feature allows users to have real-time conversations with their coaches using audio.

Besides the main features, we have designed various states and elements within the Perspecta interface.

For instance, paywall. Perspecta is free to use, but if you want access to unlimited AI power, you will need to subscribe. The subscription process is powered by Stripe, which handles all billing. However, we still needed to create some screens to indicate which plan a user clearly is on and provide instructions for upgrading, downgrading, or cancelling a subscription.

All pages are adapted to the efficient mobile experience to make the design work to its fullest and let the product communicate successfully on any device.

MVP for the project that provides personalized AI-coaches and various ways to communicate with them: chat, email, audio calls, and messengers;

Utilizing chatGPT API. The tech stack is: Node.js with microservices architecture on the backend and React on the frontend.

The biggest challenge was to make audio calls work fast enough to create a fealing of real conversation. We've built a robust system to live-stream data: speech-to-text => GPT API => text-to-speech to achieve required performance.

We developed from scratch a visual style, chose grid, fonts, colors and icons.

Prepared UI kit and documentation for developers.

Our collaboration with the Perspecta team didn’t stop after the website was developed: it successfully turned into a long-term and partnership, and now we are happy to be working on the next set of creative tasks for the platform.