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.

Commercial

Community

Recreational

Legacy

IBM Side Project, Cue

IBM Side Project, Cue

2015-16 — Commercial :: Technologist and User Experience Designer working at IBM

Teaser image for the IBM Cue project.

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.

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.

  1. 1. Motion designer creates a wiki page of animation curves, timings, and coordinates
  2. 2. Developer tries to guess and fit the numbers into CSS and HTML counterpart values
  3. 3. Motion designer and developer goes back and forth until the animation is correctly implemented
  4. 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...

  1. 1. Export animation to JSON file using provided Cue After Effects Plugin
  2. 2. Import JSON file to Cue
  3. 3. Send link to Developer
  4. 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.

  1. Cameron, Motion and Visual Designer
  2. Peter, Front-end Developer, UX and Visual Designer
  3. 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.

Final Product

Video capture of initial / starting workflow.
Video capture of productive workflow.