Hyun

My work and me

About Me

Hello, my name is Hyun — I am a designer and technologist creating symbiotic relationships between information and people. I am currently working with researchers, engineers and designers at IBM Research in Yorktown Heights, New York.
If you have any questions or have something in mind for discussion, please don't hesitate to contact me.

IBM Side Project, Cue

IBM Side Project, Cue

SYNOPSIS: Cue is a translation and automation tool aimed for motion designers, and developers to collaborate and integrate UI animations painlessly and quickly. It is a side project initiated by two of my colleagues that I decided to jump in and help.

Major Skills Applied

User Experience

Full-stack Development

Ad-hoc Technology Interpreter

All projects at IBM Design are worked on and produced in teams. My specific contributions for this side-project were on user experience design, front-end development, technology research, future envisioneering designs, and applying previously gathered design patterns, research, and technologies to the project. Following IBM Design's open-source ethos, this side project is disclosed to the public by me since IBM does not compete within the business of design and/or animation tooling.

Problem

"Animation is another thing on top of my responsibility."

—Front-end Developers, IBM Design

MOTION design in user interface, in my honest opinion is still a thing in its infancy. With its infancy, it carries the obvious problem of finding tools, responsibilities, translations, communicaiton, and execution qualities. This is shown by the gap between UX, Research, and/or Visual designers, along with developers then finally, the motion designers themselves. The project was started to close any of those gaps much as possible by assistance of automation, and packaged design methods.

The personas below were created from numerous interviews and feedback sessions with current existing tools. Data points of the personas include visual, motion, and UX designers, researchers, and developers from the IBM Design studio.

Front-end Developer

Previous responsibilities of a front-end developer has included visual, architectural, and behavioral aspects of the software. However, with motion design being adapted in IBM Design, as well as other design firms, another responsibility is added to their job description.

Pain 1: Receiving incomprehensible values and data from designers

Pain 2: Going back and forth with fixes

Motion Designer

Designer in charge of creating aspects of motion the user interface. Majorily working with Adobe After Effects, the motion designers produce distributable artifacts majorily in After Effects files or videos. The motion designers often document their methodologies in order to communicate to front-end developers effectively.

Pain 1: Not enough time to learn to translate values from animation tools to code

Visual, UX, and/or Research Designer

Designer in charge of the overall interaction experience, visual experience, and/or research collateral. They are in a position where they have an eye for motion design to detect nuances but lack the technical skill and/or desire to create a motion study from scratch.

Pain 1: Want to contribute and know what to fix but technically incapable of using animation tools

Pain 2: In relation to Pain 1, unable to modify even a simple piece of meta-data such as timing because of different terminologies and barrier of entry for animation tools

We have realized that for this project, the goal wasn't to empower the developers and non-motion designers to create their own animations, but augment their skills such as ability to notice timing discrepancies, animation curve arcs, and assessing code production time to the motion study created by the animation's owner; the motion designer.

2. Developer tries to guess and fit the numbers into CSS and HTML counterpart values

3. Motion designer and developer goes back and forth until the animation is correctly implemented

4. Depending on complexity of the animation, the entire process is repeated

The biggest pain on the gap is typical. Waste of time because of loss of communication; having the designers document every value, and interpretation of the written spec by the developers. Another way to look at it is the translation of terminologies and langauges between motion designers and developers is very inefficient and time consuming. Collaboration is the primary issue thus creating a system that will automate the inefficiencies and keep the users in an enclosed environment will remedy the communication issue. The expected flow with the tool is...

4. Developer views CSS and HTML of animation and directly integrates it to prototype/production code

Specifically, in effort to close the gap in miscommunicatin as well as trial and error involving execution between the development and motion design personas, the solution we sought to create was essentially an automation tool, which became the rendering engine and web server UI, and a translation agent which later became the After Effects plugin.

Process

INFORMATION EXCHANGE : The primary focus to solving this project's problem is to convert and translate one person's medium to another while still being useful. In context of software development companies, in the end, code was the final deliverable, so that was decided to be the output. The more disposable, and cheaper artifact to produce was the animation from After Effects; so naturally that became the input. The middle ground, where the focus was on visual, UX, and research designers as well as developers wanted to tweaak the given animation was brought to attention. The project then was to include a UI component where the users can view, edit and manage the added animations.

Cameron, Motion and Visual Designer

Peter, Front-end Developer, UX and Visual Designer

Hyun, Full-stack Developer, UX Designer, and Technologist

I have jumped into the project when it was kickstarted already by two of my colleagues. Specifically, I joined in the beginning stages when they hit a roadblock, struggling in establishing the architecture, conversion systems, and ideas around the UI of the project. Recalling my experience in other projects where I contributed in motion design was valuable in bringing insight regarding what developers look for when they try to integrate motion design in code. Along with my experience, gathering additional information from other animators, developers to synthesize feedback for the UI helped further refine the usability. After the research, experience architecture and iterations of the UI design, one of the colleagues involved in the project and I started to build the tooling. My colleague helped in creating the UI and the front-end manipulation engine while I have built the After Effects conversion kit, as well as the web rendering engine. The technologies used were common: Javascript (.JSX for Adobe After Effects), and a standard LAMP stack application; PHP, MySQL, HTML, CSS, JS, and jQuery library.

Results

ADAPTATION and actual usage was one of the biggest pain points. Development and design process was fairly smooth because the people involved in the making of the project knew each others skill and timing process. Later on after a soft release with some additional noise making, Cue has caught the attention of IBM Design's core studio team and tooling team. After gaining support from the studio's team, Cue has garnered much support from new hire designers, IBM Design Maelstrom interns, and around various product teams in the studio. It is one of the few major projects that is planning to be open sourced within IBM Design. Cue is still a highlight to the Security Design Team because of the team's willingness to intiate a side project, designing it, developing it, and releasing it for other designers including designers outside of IBM to freely use it to improve their UI animation production workflows.