Perspecta | Cases

Product Design for AI Coach Platform

Case Study with a Deep Dive into Crafting a Sophisticated Platform for Expert-Level Coaching in Business, Leadership and more.

Visit WebsitePreview in Figma
Perspecta | Cases

About

Perspecta is a revolutionary platform dedicated to unlocking your full potential with expert-level coaching in business, leadership, and career development, all powered by cutting-edge AI technologies.

Our mission was to create an MVP product includes landing page, and its development in Framer, and a user-friendly app that makes you feel like you're communicating with a real person, not just an AI bot.

Expertise

UX/UI

Web/App Design

Development

GPT

Space

AI

Coaching

Platform

Deliverables

Landing Design

App Design

Framer Dev

React Web App

Timeline

2 months

Landing Page Design

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.

Landing Page Design

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.

Landing Page Design
Landing Page Design

App Design

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.

App Design

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.

App Design

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.

Login

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.

Login

Immediate User Engagement

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.

Immediate User Engagement

Chat with a Сoach

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.

Chat with a Сoach
Chat with a Сoach

Call with a Сoach

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

Working Out Various States

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.

Working Out Various States
Working Out Various States
Working Out Various States

Perfect Mobile Experience

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.

Perfect Mobile Experience

Development

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.

Expertise

React

Node.js

Google Cloud

Technologies

GPT API

Speech-to-Text

Text-to-Speech

Development

UI Kit

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

UI Kit

Prepared UI kit and documentation for developers.

UI Kit

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.

Say hello
Talk to Humandone

or

X (Twitter)LinkedInhello@humandone.com

©2024. humandone.com