00 Overview
Problem &
Design Questions
"Is your puppy okay today?"
There is no way to keep our pet's health, check their condition, and get essential information about pet for people who raise pet first time or who are too busy to check their pet during work time.
Panimate App
Panimate, Nov 2020-Jan 2021
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.
.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.
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
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
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.
Analyzing the existing workflow
Too less information to Complete tasks on each steps
Previous Workflow
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.
Create Script
Write down the contents of the card with gratitude and love to the card recipient.
App Design: Step 1
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.
App Design: Step 2
Read your script
Record your voice using the teleprompter.
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 Iteration
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.
App Design: Step 3
Panimate your script
Select the perfect images to be in your Panimation.
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.
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.
.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
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!