Designing AI companion and V-Tubing experience for Hyper Online during early stages

Designing AI companion and V-Tubing experience for Hyper Online during early stages

Designing AI companion and V-Tubing experience for Hyper Online during early stages

Designing AI companion and V-Tubing experience for Hyper Online during early stages

Context

Product Design Intern
Summer 2023


My Role

Product Designer
Web Designer


Product Focus: VTubing Tool + AI Companion

Hyper is a San Francisco startup focuses on VTubing, which is creating content using a virtual avatar, often animated in real time to represent the creator.

In summer 2023, Hyper integrated AI text to speech with their exiting 3D Vtubing avatars, creating an AI companion experience.

My Works: Web + App Design

During the 3 months internships period, I mainly worked on app and website design, covering both initial product design and existing product redesign.

Case Study 1: App Design

Case Study 2: Web Design

case study 1: App

AI Companion Redesign - Overview

In May, the Hyper App has 2 focus, VTubing and AI companion, however, new users can not find the entrance to AI chat. To revamped the architecture and balance users on both ends, we decide to redesign the app’s layout and prioritization.

case study 1: App

AI Home Page

The new AI home tab is designed to have a clear hierarchy, repositioning less utilized features to emphasize on the main feature — AI chat.

The AI home tab is designed to have a clear hierarchy, repositioning less utilized features to emphasize on the main feature — AI chat.

Before

Before

Before

Before

Improved

Improved

Improved

Improved

Onboarding

We want to guide first-time users towards the most engaging experience upon their app entry, In the new AI home onboarding design, we prioritize discovery to ensure users can begin chatting immediately.

Before

Before

Before

Before

Improved

Improved

Improved

Improved

AI Chat Redesign

To mimic feeling of directly, face-to-face conversation with the characters, we're reducing interaction friction by adding voice dictation and caption-style chat bubbles, bringing magical experiences to users.

Before

Before

Before

Before

Improved

Improved

Improved

Improved

Voice Dictation

case study 2: web

Web Design - Initial Launch

Hyper web is introduced as a video-sharing platform tailored for Vtubing users with no access to iOS applications, main features include videos and lives preview. Envisioned to be a evolving platform, the web design is simple and modular, ready for future updates.

Desktop Design

Mobile Design

Web Design - Hyper Home Page

Moving on, with the new integrated AI companion features, hyper web transitioned into a comprehensive discovery platform for all users. Continuing with the modular design approach, the focuses is now on discovery and feature promotion, a eye-catching visual design is needed to capture user’s attention.

Popup Components

AI Upsell Popup

Other bits

Design System

While establishing a new design languages for Hyper, we updated the design system for a consistent style, easier access for further designs, and smoother implementation.

Marketing Videos

Helped with some marketing assets including videos and posters.

Hyper Rock :D

Hyper Rock :D

Hyper Rock :D