AI Companion — UI/UX case study

AI Companion home screen on an iPhoneCase StudyAI Companion App
White humanoid robot

A mobile app that turns everyday conversations into clear, actionable insights using personalized AI companions.

An AI-powered mobile app that helps users capture conversations and generate personalized insights through customizable AI companions.

Project NameAI Companion App
IndustryPersonal Productivity & AI Assistants
Recordings screen on iPhone beside a recording in progress on Apple Watch

Capture conversations from your phone or watch and get instant, personalized summaries.

Research
Structure
Wireframe
UI Design
Prototyping
Problem & Solution

Identifying the ProblemDesigning the Fix

Solution

An AI-powered assistant that captures conversations for them, organizes information, and highlights what matters most.

Problem

People want to stay present in conversations but can’t keep track of everything discussed.

Solution

An intuitive AI Companion App that lets users browse or create custom AI assistants, assign them to conversations, and instantly receive structured insights, summaries, and follow-ups.

Problem

Users juggle multiple meetings, calls, and discussions but lack an easy way to capture and understand everything that was said. Important information gets lost, and manual note-taking becomes overwhelming.

Transform everyday conversations into meaningful knowledge — supported by AI that feels human, helpful, and in your control.

User Personas

Alex, the persona

Alex is a busy professional who wants an easy way to capture important details from daily conversations and get clear, helpful insights without doing extra work.

Personality
  • Detail-Oriented75%
  • Tech-Savvy80%
  • Collaborative65%
Bio Data
Age
36 Years
Location
San Francisco
Occupation
Product Manager
Pain Points
  • Action items get lost or forgotten after calls
  • Too many conversations happening daily to track manually
Goal
  • Gain quick, reliable summaries from meetings and calls
  • Automate follow-ups and action items
  • Improve decision-making with clear, multi-perspective insights

Competitive Analysis:

The landscape of conversational AI and productivity tools is rapidly evolving. While several platforms touch aspects of AI assistance, none seamlessly combine custom AI personalities plus conversation capture, analysis, and multi-perspective insights in one mobile experience.

Similar Products: Otter AI, Replika, Fireflies AI.

Companion Library screen

Brainstorming & Ideation

My Approach

I approached the challenge with an end-to-end, human-centered design process focused on simplifying a complex AI ecosystem into a trustworthy and delightful mobile experience. The strategy was built around four pillars

  • Understand the Problem Deeply
  • Prioritize Trust & Control in AI
  • Conceptualize a Scalable System
  • Design for Natural Behavior Integration
Possible Solutions

A personal AI companion ecosystem that helps users capture, understand, and take action based on their real-world conversations

Core Experience
  • Companion Library
  • Create Your Own Companion
  • Assign Companions to Conversations
  • Actionable Insights & Summaries

Tools Used

To deliver this project within a 5-day sprint, I used a combination of industry-standard design tools and AI-powered accelerators that helped speed up ideation, visualization, and documentation.

Design

Design & Prototyping

Figma

High-fidelity UI design, component systems, and clickable prototype

FigJam

Brainstorming, user flows, journey mapping, and affinity clustering

AI

AI-Assisted Creation

ChatGPT / Claude

Ideation, UX writing, summarizing research, generating insight categories

Uizard

Exploring alternative layouts using AI prompts

Visily

Quick UI variations and alternative screen layouts

Figma Make

Refining UI flows with precision

Lo-Fi Wireframes

A low-fidelity look at how users move through the app, capturing the core interactions that shape the AI companion experience.

Low-fidelity wireframes of five app screens

Style Guide

Typography

Ag
InterRegularMediumSemi BoldBold

Color palette

Glass Tones
100#ffffff
60%#ffffff
40%#ffffff
20%#ffffff
BackgroundE1E1E1
Gradients
AI Custom Grad

High-Fidelity UI

The completed interface reflecting final layout, branding, and interactions.

Home screen in Arabic and English
Recording, recordings list and recording detail screens