AI to Companion: Designing for Connection

Role
UX/UI, Visual Design, UX Research

Team
Product Designer (me), Animator, Developers

Design Tools
Figma, Illustrator, Rive

Timeline
‍Sept 2024 - Dec 2024

Overview Design System Branding Marketing Key Features

Overview

Doro is a mental health startup on a mission to make emotional support more approachable and accessible for students through an AI-powered chatbot. Recognizing that traditional therapy isn't for everyone, Doro provides personalized support options tailored to individual needs, comfort levels, and life circumstances.

While Doro’s backend was built on strong clinical research, the user experience didn’t reflect the emotional intelligence it needed. Users felt overwhelmed, disconnected, and unsupported. Doro needed more than functionality, it needed warmth, trust, and clarity.

My Role Breakdown

Product Design

Building the initial prototype of Doro’s iOS application, and web app using Figma

Design System

Developed a library of 50+ reusable components for web and mobile applications using Figma.

Branding

New brand identity, character design, and visual designs

Marketing

Creating social media post layouts and ads

Design System

This scalable design system was built in Figma to bring consistency and efficiency to the product. It included shared styles, responsive components, and clear documentation. This cutting design-to-dev handoff time and making the UI easier to maintain and evolve.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Branding

When rebranding Doro, a key requirement was to create a space-themed, dark mode aesthetic that felt both calming and emotionally grounding. Using gradients, subtle star animations, and layered visuals, I brought the space theme to life, creating a distinct and memorable brand experience that reflects Doro’s mission to ground users back to their centre of gravity.

To personify the AI and add warmth, approachability, and memorability, I introduced a character named Doro.

LogoThe logo was designed to embody the character, Doro, represented through the eyes, which appears in both the primary logo and the app icon.

Character Design
The character Doro was originally inspired by orbital planes, a visual metaphor for balance, movement, and returning to stability

Rather than designing a human-like figure, I chose to represent Doro as a radiating, abstract energy form. This visual approach also reinforces that Doro should not be confused with human support, but a supportive AI presence—helping users maintain emotional clarity and reducing the risk of confusion. This design choice emphasizes transparency, calm, and gentle guidance.

Visual Design
To complement the space inspired theme, I incorporated constellations into the visual design. They convey a sense of calm while maintaining a tone that still feels serious.

Doro Gradient

#FCC8EA

Space Gradient

#FEF8C3

Deep Violet

#481B75

Lavendar

#E0A4EF

Skywave Blue

#7199FF

Mint Horizon

#5CC1BA

Dark Plum

#190D23

Dusty Lilac

#C6BFCC

Colours
Row 1: Primary Colours

Row 2: Secondary Colours

Row 3: Gradients

Marketing

App Preview Pages

Advertisements

Instagram Posts

Key Features

Something about making a bunch of new design changes for web app visually and to improve the user experience.

Test Web App Prototype

Previous Design

Redesign

Chatbot Redesign Decisions
The chatbot was redesigned to create a calmer, more accessible experience. The timer is now smaller to reduce stress, information is broken down to prevent overload, and the layout is more user-friendly. We also moved the “End Session” button away from “Send” to avoid accidental taps.

New accessibility options have been added in the settings, including the ability to adjust Doro’s tone, speech and speed settings, as well as toggle between light and dark mode.

Old Design

Redesign

Pre-login vs post-login interfaceAs part of the redesign, I also introduced clearer distinctions between the pre- and post-login interfaces to improve user clarity and flow. Previously, the lack of visual or functional change after logging in led to confusion and uncertainty about whether the login was successful. The updated design highlights new capabilities available post-login and tailors the experience to user intent—focusing on conversion and trust pre-login, and productivity and support post-login.

Web to MobileTransforming a web app into a mobile experience isn’t just about fitting content onto a smaller screen—it’s about rethinking how people interact, navigate, and engage on the go. This project focused on distilling the core functionality of the web version into a mobile-native flow, reworking the UX to prioritize speed, clarity, and touch-based interactions, while refining the UI to feel intuitive, responsive, and purpose-built for smaller devices.

Takeaways