Frame 9.png

Panimate App

Panimate, Nov 2020-current

During my internship at Panimate, I worked as a solo UX designer, embedded on the animate gift card team with a handful of engineers, project managers, and marketers.

Using Panimate's technology to image voice data in real time, Building a personal video card production app for anniversaries.

Role

UX designer

Duration

2 months

Organization

Project Goal

Extend the reach of real-time voice imaging technology

Panimate believe that AI/ML technology, that visualizes voice, can change the world. For example, Panimate provides visual materials during lecture by imaging the speaker's words in real time. Panimate is both a company name and a verb that visualizes voice data in real-time

Instagram Post - 28 (1).png

The Design Goal

Less Work,

More Emotion

How to design App that reduces user workload but intuitive enough which is easy to follow the steps?

Step 1

Create Script

Using Familiar Interface

(Marketer's Side)

Innovative App with aesthetic design but easy to use with familiar interfaces.

step1.gif
Step2.gif

Step 2

Add Voice

Step 3

Upload

Personal Photo

Reduce the number of App pages (Developer's Side)

Shorten the process as much as possible to reduce workload for users but also good to build a fewer bug App 

step3.gif

Panimate

Video is ready!

Deliver your warm heart to your lover.

Created by Sam Moniac

 

Design Method

3 Design Iterations

within 2 months

Learning from real users with agile prototype

Figma, Principle, Adobe Illustrator

image 1.jpg
Group 46.jpg
Group 20.jpg

Targeted User

Young, Emotional & Neutral

Panimate starts to broad the usage of technology with fun apps.

 

Panimate App I am working on is It is a video card production app that can give a big impression with individual images and voices on anniversaries such as Mother's Day and Christmas.

 

It has a neutral and light image to enhance accessibility for anyone.

X - 3.png

Analyzing the existing workflow

Too less information to Complete tasks on each steps

Previous Workflow

Instagram Post - 29.png

Workflow Goal

Keep Simple with Self-describing Interface

New Workflow

Efforts were made to provide more help while maintaining overall linearity task flow and not increasing the pages of each task to facilitate the development environment. A pop-up window was created to give help or control settings without leaving a page.

Instagram Post - 22.png

Create Script

Write down the contents of the card with gratitude and love to the card recipient.


 

App Design: Step 1

Group 42.png

Direction

Less Workload,

Clear Interaction

In first round of designing, I though it should be simple and easy work. The 'plus' button and editing mode to add the list looked like everything for this screen.


However, after watching the user's real experience of the screen, we were able to find challenges we should consider.

Unlike a typical list up app, Panimate requires multiple sentences on one screen/step. So user mostly writes multiple sentences in succession.

The App redesigned considering these "continuous list-addablility" features and the pain points from users experienced.

 

Smartphone users are already familiar with writing and managing sentences such as texting and writing to-do lists. Familiar interfaces provide users with fast usability without explanation. Therefore, I analyzed the task-to-do list Apps interface to have the most familiar interface for users.

Final Concept

Learning from Task List App

Below is the final design. Key considerations are the adding text boxes continuously and the use of familiar interfaces when modifying text and alignment.

Instagram Post - 26.png

App Design: Step 2

Read your script

Record your voice using the teleprompter.

Group 19.png

First Prototype

Match voice to sentence

& Show how it works

A key consideration in designing a second task display is to provide a suitable screen that allows users to easily read their scripts, while also showing whether voice matches text well which is a technology that occurs behind the screen.

Second Interation

Learning from a Teleprompter

I found a hint on the teleprompter about the optimal interface for users to reduce concerns about the timing and speed of reading the script. Depending on the automatically flowing display, users can easily finish their task.

A teleprompter display works well but still, there were challenges as above. 
When you press the record button, the recording starts automatically and you see buttons that control the size and speed of the letter. After recording, re-recording and confirmation buttons are located in the same place. 


This interface has errors in the sequence of tasks. Because the recording environment needs to be changed before recording. Furthermore, the replacement of buttons of different personalities to the same position confused users.

Final Concept

Rethinking Recording Interface

There are two areas of concern in the final design. The button is positioned at a different location depending on the functions of the button (preferences/recording). The other is increased usability by using interfaces frequently used by existing recording applications.

Instagram Post - 24.png

App Design: Step 3

Panimate your script

Select the perfect images to be in your Panimation.

Group 16.png

Original Idea

Advantages of Circular Structures

Below is the existing design before I participate in the project. There are two main tasks for this third step. One is uploading pictures of recipients. The other is to identify and modify images selected by AI to be used in the final video.

Instagram Post - 20.png

To effectively place these two tasks on one screen, previous designer used circular structures, which had distinct strengths and weaknesses.

I explored a new design that is taking advantage of a circular structure: clearly demonstrating the importance of the two tasks. And new layout to enhance visibility and add explanations to small reference images.

First Prototype

Creating Complementary Display Layout

A new layout has been evaluated to effectively show two different tasks on one screen from team members by placing two elements on different layers and making a big size difference. But there are still problems like below.

Final Concept

Reducing the number of displays

Below is the final design. In this step, there are two distinct tasks that are divided into two distinct pages.

Instagram Post - 27 (1).png

The first page focused only on one task uploading images. The second page checks the pictures that are linked to each sentence at the same time as correcting/verifying the uploaded image. This task is well placed on one page because it is grouped into the same category of image modification. If you want to choose a different picture, the section showing a different reference image unfolds.

Design Application

Goes along with Design Identity

Design System Summary

Web Page Design

Banner Design

X - 3.png
Frame 12.jpg
Frame 1.jpg

Reflection

Innovation starting from Familiarity

Developing design from multiple angles

Flexible and fast online collaboration

By creating an actual working application, I could hear the user's vivid usability evaluation. Through that, I realized that true revolutionary design had to start with familiarity for the user. Innovation that no one can understand is nothing.

This was one of my first projects creating a user-centered product that is published with various team members having different specialties. I learned to consider problems from the multiple positions perspective and focus on solutions that each role wants to solve and see.

This project was completed during the pandemic and I had to collaborate with my team remotely. Although it was challenging to work together at first, I learned various software that help to collaborate together with app developer and project manager in real time despite never meeting in person!