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.
2015-16 — Commercial :: Technologist and User Experience Designer working at IBM
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
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.
"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. Motion designer creates a wiki page of animation curves, timings, and coordinates
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...
1. Export animation to JSON file using provided Cue After Effects Plugin
2. Import JSON file to Cue
3. Send link to Developer
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.
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
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.