What MindNet is
MindNet is a mobile app where anyone builds a personal AI companion and talks to it by voice. The app calls the companion a replica. You set it up by chatting, you watch it learn, and you speak to a glass orb that always shows what it is doing. It is my own project from 2024, designed solo in Figma. Here is how I got there.
Starting with a cold feeling
Setting up an AI companion feels like configuring software. Settings, sliders, long forms. By the time the companion says its first word, the person already feels they are using a tool, not meeting someone. [ASK ANDRII: what pushed you to start MindNet? Name 1 real product or moment that felt cold.]
So I wrote 2 rules before I drew anything. First, it has to feel warm and simple. Second, the person stays in control, always.
Those rules decided a lot later. When a screen looked clever but broke one of them, I dropped it.
The mood I wanted: a human face and soft cards, not a settings screen. The percentages are placeholder UI.
Mapping the journey
I split the experience into 3 stages: Introduction, Replica learning and Interaction. Every screen has to serve exactly one of them. If I could not say which stage a screen belonged to, I cut it or merged it into another.
Introduction shows the promise and a stack of example replicas, so people see the result before they commit. Replica learning is the wait, and I treated it as part of the product, not dead time. Interaction is the talking.
The 3 names also gave me a quick test for every later decision: does this help the person reach the next stage? On client projects, this mapping is the strategy step of the 5 steps.
3 stages, one job each. The cards around them became the first pieces of the system.
Onboarding as a conversation
The replica is set up in a chat, not a form. The app asks for the language, then the name, then the gender, then the photo. For the photo the person can upload one, generate one from text or generate one from another photo.
I kept it to one question per message, answered with a short reply. A thin progress bar sits under the replica’s name, so the person knows how far along they are. At the end the replica appears as a card with a name, a “Replica learning” label and a Chat button.
A form tells you the product is a tool. A chat tells you it is somebody, and the setup is already the first conversation.
Note: I ask for the name before the photo. A name makes it a someone. A photo alone only makes it a profile.
Setup as a chat: name, gender, photo. The result is a card you can open with Chat.
Giving the AI a face
Voice has no screen to read, so the AI needs a body. I used a glass orb. It sits in the middle of the screen and changes when the AI changes: listening, thinking, speaking. Each state has its own look and its own line of plain text above the orb. In the thinking state it says “Looking into that for you. Give me a sec!”
Under the orb is a large Stop button with a short label, “Press button to Stop”. The person can interrupt at any moment, and a close button sits in the top corner. Control was my second rule, so it had to be visible, not hidden in a menu.
Note: silence is not neutral. Every voice state needs a visible sign, or the person assumes the app broke. I took this line from Salesforce’s writing on voice trust.
Left, the start screen. Right, the thinking state: the orb, a line of text, a clear Stop.
The chat view keeps the same orb as the AI’s avatar, so voice and text feel like one character. Replies stay short and friendly, and a toggle lets the person decide about reminders.
“Say hi to MindNet”: the same orb in the chat, with a reminder toggle under it.
Making progress visible
A replica that learns in the dark feels like a black box. So I made the learning visible with 3 small widgets. The first shows overall progress. The second splits what the replica learned in the past, what it knows now and what comes next. The third turns green with a check when the replica is ready.
Each widget says one thing, with a big number and a short label. The color does the first read: blue and purple while it learns, green when it is done.
The learning widgets. The numbers are placeholders I used to test the layout, not results.
The visual system
Everything borrows from the orb: glass, soft gradients, big rounded cards and one strong photo per card. Type is large and plain. Backgrounds fade from white into a pale blue and violet wash, and that wash sits behind the main button, so the eye lands on it. A larger design system, with 80+ components, is in the Simply case study.
I used one dark card, the overall progress, as the only hard contrast. It is the number people check most, so it gets the loudest surface.
What actually changed
The conversational setup is the part I trust most. It turns a chore into a first meeting. The visible learning is the second: people can see the replica grow, so waiting stops feeling like nothing is happening.
The thing I would change first is the error and interruption states. What happens when the connection drops, when the microphone is blocked, when the person talks over the orb? The Stop button covers one case. The rest is still open.
There are trade-offs. A chat is slower than a form for someone who knows exactly what they want. Glass and gradients cost more to build and need real contrast checks: the gray “Press button to Stop” label is too light for me today.
Last, an honest limit. These are design shots, and every percentage in them is placeholder UI. I have no usage results to report. [ASK ANDRII: was MindNet built or tested with real people? If yes, add 1 real fact here.]
Working on something similar? Book a call
