Pi Dian Chong — Family Karaoke

IoT, Mobile App, Interactive Karaoke

PROJECT SUMMARY

Pi Dian Chong is a smart box that connects family members and friends with each other through karaoke experience. It is a startup project developed within 3 months.

ROLE

UX/UI Designer, UX Researcher

TOOLS/METHODS

UX Research: Usability Testing, Interview, Grounded Theory Method, A/B test, OmniGraffle, Heuristic Evaluation

UI Redesign: Sketch, Proto.io, Photoshop

DELIVERABLE

Process Book, Prototype Redesign

IDENTIFYING CRITICAL PROBLEMS

RESEARCH ON TARGET USERS

I conducted usability tests followed with interviews in 3 target families, trying to find out what were the critical issues of the previous prototype.

I collected quantitative data about successful rates and periodic time spent in each test task.

I also collected qualitative data like quotes, comments, and observations.

Thus the critical problems of the previous prototype were identified as:

THE ELDERLY & THE KIDS

"We, as the middle-aged, primarily buy your product to enrich my parents' life, my kid's as well, but not ours."

In China, the middle-aged are breadwinners in many families. Thus the elderly and the kids are the target users that interact with the product more. But the result of my data analysis showed that the previous prototype was not friendly for them.

HEAVY MEMORY LOAD

All participants spent more time on recompleting 3 out of the 4 given tasks. 

Information was not visually simplified

and logically categorized, which gave users a hard time on using the product.

UNDERSTAND THE PRODUCT

To better understand the structure of the previous prototype and how users actually interact with it, I built the diagram to visualize the complexity of the product and see where my redesign should focus on.

BRAINSTORM

I sketched lo-fi wirefram for group discussions. Also, 6 target users tested the paper prototype.

 

By collaborating with the product manager in the team and reflecting on users' feedback, as well as the discussions, task flow and my redesign strategies were finalized at this stage.

DESIGN PRINCIPLES

Bearing the findings and understandings in mind, I identified 3 design principles for my redesign.

UNDERSTANDABLE

Categorize functions and make key ones evident for effortless understanding of the product.

SIMPLE

 

Simplify Content-heavy screens to prevent cognitive overload.

RECOGNIZABLE

Use different theme colors to help the elderly and kids to recognize different parts of the product.

FROM PROBLEMS TO SOLUTIONS

CONTENT HEAVY

It's really hard to read and follow the guide In the landing screen at TV end with multiple steps squeezing in 1 page.

No error prevention/notification is another issue. The system does not present users with any information regarding video/sound setting. Neither will users be notified with video/sound disconnection.

ONE SCREEN, ONE TASK

Installation steps are divided into separate tasks in different screens. Text, font size and graphic help to prevent cognitive overload.

This design will present users with the option to connect a webcam/mic.

SINGLE COLOR SCHEME FOR THE ELDERLY AND KIDS

Consistency in mobile app design has already been widely adopted. But for people who don't feel comfortable with smart phone and kids who are always fond of different colors, consistent theme color might not be the best strategy.

MULTIPLE COLOR SCHEMES

#058d77 is the theme color for Settings-related and Group-Info-related screens. These screens are information-orientated. Hence a neutral and relaxing theme color can build up an environment that facilitates users' understanding process. 

#d7c2a5 is the theme color for Group-Chat-related screens. A heart-warming color always makes people more willing to communicate.

#A796F4 is the theme color for Media-Control-related screens. The magic violet always immerses people, which helps them focus on their tasks, such as requesting a song or turning on live streaming.

UNORGANIZED INFORMATION ARCHITECTURE

Music Control functions that belong to different user tasks are unreasonably packed into one grid, which makes them less recognizable and memorable for users.

INFORMATION CLASSIFICATION

Next Song, Play/Pause, Rewind, Volume, Broadcast and Requested Song List are categorized into Media Control.

 

Song Request and My Album are categorized into Song Request.

 

QR code and Bullet Screen settings are categorized into Settings

FINAL DESIGN

USER TESTING (A/B TESTING)

3 participants for each test (2 middle-aged men, an old couple, 2 kids round 7 years old).

Measured time for each task.

Self-reported impressions for both prototypes. 

TEST B

With my redesign prototype...

Task 1 - Set up the product

Users followed instructions on the screens to set up all hardware components.

All participants spent less time.

Task 2 - Create a new group

All participants inputted all information.

2 out of 3 participants spent less time.

Task 3 - Turn on live streaming

All participants spent less time on locating the toggle.

                    "Easier", "Clearer"

TEST A

With the previous prototype...

Task 1 - Set up the product

Participants read user manual repeatedly and then set up all hardwares.

Task 2 - Create a new group

Participants tried to skip inputting some information.

Task 3 - Turn on live streaming

Participants navigated the app and found out where the toggle was and turned it on.

                "OK", "Can't recall"

Designed & built by Donghai Liu 2018. 

42-20 24th St, Long Island City, NY 11101

US: +1 470-755-6674