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

AIGA PHL Design Awards 2013

AIGA PHL Design Awards 2013

2012-13 — Community :: Developer and Designer at The Mighty Engine

Teaser image for the 2013 AIGA Philadelphia Design Awards project.

SYNOPSIS: One of the biggest designer organizations, AIGA holds a chapter Philadelphia and every year they hold a design competition that is judged by senior design practitioners. The Mighty Engine firm was a design agency where I worked at the time that helped host and design the annual event theme.

Major Skills Applied

  • Visual Design
  • User Experience
  • Front-end Development
  • Back-end Development

Collaborating with staff from AIGA Philadelphia and Mighty Engine, I have contributed in the translation of print design created by Mighty Engine's designers to a web experience. I have also produced majority of the front-end code utilizing HTML5, CSS3, and JavaScript, as well as the back-end code on the project. The back-end contributions were mainly around payment processing, database manipulation, and a custom management engine on a Linux/Apache/MySQL/PHP Stack.

Project

2012 was a year when there were about two-thousand and twelve guesses on how the world might end that year. Running with the theme of "end of the world", designers at The Mighty Engine agency and I had worked on a pop-culture spin-off modifying the phrase: "The revolution will be televised" to "The revolution will be designed".
Rendering the print design involved integrating skeumorphic and grunge styles of CRT tube TV's as the frame of the canvas and supporting it with late 80's electronics illustrations. The website's primary function was to provide information about the design awards and process the submissions themselves. The interaction of the website featured a contrasting flat design that was inspired by the menu and controls of a CRT Monitor control interface. The webpages themselves were designed and laid out to resemble a network broadcast testing screen. An overlay of random static was added to the background along with some transitional animations to provide a fluid navigation experience.

The persona below was created from interviewing several graphic designers both professionals and students within the wider Philadelphia area; sourced from either university campuses or in the AIGA Philadelphia roster.

Along with the pop culture references and experimental designs to attract the intended demographic, the actual process of submitting the work and paying for the submission had to be made fluid as well. Technologies like AJAX were heavily used in correlation with PHP and MySQL to limit the amount of pages for the user.

Process

My first set of setbacks were also from this project. While I was developing the front-end portion of this project, I realized how many little pieces and details I was leaving out. For example, I did't include alt tags in images, clean up code, and coded with modularity in mind. Only other support I had in terms of development was the lead developer, who was busy handling other projects at the time and had little time to spare. The rest of the team consisted of visual designers whom I had to collaborate with to translate their print designs to an interaction and digital experience; resulting in myself juggling several hats.

  1. Phillip, Visual Designer
  2. Julie, Visual Designer
  3. Cameron, Visual Developer
  4. Hyun, UX and Visual, and Front-end Developer

Although there were some production problems, with the help of the lead developer and several pots of coffee, the development quality issues were polished out and the team was on-time for scheduled release. Despite launch problems (browser compatibility for one), after few fixes almost all of the submissions were processed successfully. The integration between front-end code, back-end code and then the ever-building database of submissions working together was quite a sight and a huge learning point. Like every designer and creative person, when I looked at the behaviors of the code I only saw opportunities to optimize and create cleaner and faster code.

Outcome

Homepage: Reflecting the 8-bit interface of CRT TVs.
Screenshot of the homepage.
Judges Page: Page where the contest participators can view the panel judges.
Screenshot of the Judges Page.
About Page: Content Typography
Screenshot of the About Page.