Purple Phone

DesenvolvimentoDesign EngineeringUI/UX Design

O Purple Phone é o app iOS nativo do ecossistema Chatterly, uma plataforma de monetização para criadores de conteúdo com chamadas de vídeo 1:1 pagas por crédito. O app dá ao criador uma linha própria no iPhone: a chamada toca na tela de bloqueio, conecta em segundos e mostra em tempo real a duração e os créditos acumulados.

O desafio
Na web, uma chamada só existia enquanto a aba estivesse aberta. Celular bloqueado ou app em segundo plano significavam uma chamada perdida. O objetivo era levar a experiência para o iPhone com a confiabilidade de uma ligação comum.

A ideia
Parecer o telefone, não um app. Em vez de inventar uma interface nova, o Purple Phone usa o vocabulário que todo usuário de iPhone já domina: o teclado e os Recentes do app Telefone, o vídeo em tela cheia com miniatura do FaceTime e a tela nativa de chamada do iOS via CallKit. A única camada nova é a que importa para o criador: tempo e créditos visíveis durante toda a chamada.

Marca e sistema visual
A marca herda o roxo do ecossistema Chatterly e o traduz para o iOS. O ícone é um monofone branco e sólido sobre o degradê da marca (#6A57DA → #483191), construído a partir de dois arcos com centro no eixo diagonal. A paleta tem três tons de roxo para marca e navegação; verde e vermelho aparecem só para atender e encerrar. A tipografia é o SF Pro Rounded nos títulos, o SF Pro no corpo e o SF Mono no teclado. Ícones da biblioteca SF Symbols, medidas da HIG e cantos contínuos fazem o app parecer parte do sistema.

Interface
São três abas: Recentes, Discar e Perfil. A chamada recebida usa a interface do próprio iOS, na tela de bloqueio ou desbloqueada. Durante a chamada, a tela é quase só vídeo, e um overlay discreto mostra com quem, há quanto tempo e quantos créditos já rendeu. Ao desligar, uma sheet resume a duração e os ganhos.

Processo: vibecoding
Design e código foram co-criados com IA, em ciclos curtos que sempre terminavam em algo testável no aparelho:

Ideação e fluxos com ChatGPT e Antigravity.
Primeiras telas geradas com IA no Figma e refinadas à mão.
Protótipo em React Native rodando no iPhone via Expo Go.
Build nativo em SwiftUI no Xcode com Claude e ChatGPT, com CallKit, PushKit, LiveKit e Supabase.
Testes com criadores via TestFlight, e o retorno de cada rodada virava a próxima iteração.

A IA acelerou cada etapa, mas a direção, o critério visual e a revisão continuaram humanos. As cores e os componentes nasceram direto no código: o design system é a própria fonte do app.

Meu papel
Product design, marca, UI/UX, prototipação e desenvolvimento do app via vibecoding, do conceito ao TestFlight.

Ferramentas
Figma AI · Expo Go · Xcode · TestFlight · Claude · ChatGPT · Antigravity