Chatunes

Role ↙

Graphic Designer

UI / UX Designer

Brand Identity
Digital Interface

User Research

Wireframes

Prototypes

User Testing

2021

Chatunes, a Music & Video Chat App.

Listen together. Talk forever.

As part of a collaborative team project, we were tasked with designing a user-friendly mobile application that seamlessly integrates music streaming with video chatting. The goal was to enhance social interaction by allowing users to connect with friends in real time, enabling them to chat, listen to music, and share videos together in one smooth experience.

Group Members

Jenny Chen. Vicky Garcia.

Aristides Milan. Jeniffer Satz.

Typography

Dosis. Open Sans.

Deliverables

Logo. Affinity maps. Personas. UI. Wireframes. Prototypes. Testing Report.

Goal

Focused on creating an intuitive, engaging interface that would appeal to a broad demographic.

Challenge

Balance multiple features without overwhelming the user, prioritizing ease of navigation, visual hierarchy, and real-time responsiveness.

Key Features

↘ Music Streaming

Genre, artist, album, and mood-based browsing
Personalized playlists and recommendations

↘ Video Chat Integration

Real-time video or voice chat with friends while listening or watching
Picture-in-picture mode to watch together without interrupting the conversation
Group sessions or private 1:1 rooms

↘ Live Listening Rooms

Invite friends to listen/watch together in real time
Hosts can control the playlist, or it can be collaborative
Room chat and reactions (emoji, GIFs, quick comments)

Research

Conducted observational studies and user interviews to identify pain points in existing apps and uncover user needs and mental models that informed the app's purpose and design.

Affinity Maps

Personas

Help to visualize the users.

Information Architecture

Simplified navigation into three core actions, Main Menu, Music, and Chatting, to reduce cognitive load and create clarity.

Wireframes & Prototypes

Created low- to high-fidelity wireframes in Figma, followed by interactive prototypes for user testing.

Wireframe Sketches

Low Fidelity

To map out the basic structure and functionality of the app.

Medium Fidelity

More detail and interactivity.

High Fidelity

Closely mimics the final product's look.

Challenges & Solutions

#1 Challenge

Integrating Music & Video.

Balancing the functionality of both music streaming and video chatting without overshadowing.

#2 Challenge

Usability for Diverse Audiences.

Given the broad demographic, we made the app accessible to users with varying levels of tech experience.

#1 Solution

Addressed by creating a clear separation between the two features, ensuring users could easily switch between them without confusion.

#2 Solution

Using intuitive icons and simplified navigation helped ensure the app was user-friendly and inclusive.

User Testing

Conducted usability testing with users to identify pain points, measure user satisfaction, and assess the app’s effectiveness.

Bias exists since the users followed us at each design iteration. The testing report highlighted areas for improvement, such as simplifying the music selection process and keeping the overall layout simple. Feedback was incorporated into final design revisions to enhance the overall user experience.

Task Scenario

#1 Task

Search a song.

#2 Task

Switch the language.

Details on Music*

*showing my assigned section only.

Discovery Page

Search Page

Takeaway

This project was an excellent opportunity to strengthen my user experience skills, learn about user interaction, and understand the importance of creating user-centered designs.

Next steps

↘ Add "Profile" Section

Customize their profiles
Showcase their top songs, favorite artists, or current vibe
Profile picture, bio, and mood status

↘ Music

Online Karaoke