Online portfolio of a hybrid engineer and artist. "The walls between art and engineering exist only in our minds." - Theo Jansen

Online portfolio of an artistic engineer.

Hi there! Welcome to my website - here you can learn a little bit about me, my work, and my experiences.

I've been studying and completing internships in some interesting places over the past couple of years. Most recently, I've worked at the Media Interaction Lab in Upper Austria, Rokk3r Labs in Miami, and Sony in Waterloo. I also completed an academic exchange term at the National University of Singapore this year!

I'm highly interested in feature design, creating beautifully functional interfaces (HCI, UI/UX design), and finding data-driven solutions to multi-disciplinary problems in a team. Currently, I'm fascinated by and am actively doing research related to novel interface technologies.

Check out my projects to see what I've been working on most recently! You can also find me on linkedin, or dribbble.

skills of the trade

Information Architecture

Planned and organized the overall structure and feature set of multiple web and mobile apps.

HCI, UI/UX Design

Devoted to creating beautifully functional interfaces. Knows how to design workflows & push pixels.

Coding & Development

HTML, CSS, Twitter Bootstrap, C++, C#, XAML, Processing.

work experience

  • Worked directly with stakeholders to define product objectives, scope, business model and features
  • Organized content and flow of web & mobile applications; produced user journeys
  • Rapid front-end development; leveraged Twitter Bootstrap, HTML/CSS to implement responsive design solutions
  • Created interface designs for internal and client projects; including Ditty, Maven and s3nse dashboards
  • Collaborated with development team to define DB schemas and API calls for web applications
  • Responsible for the ideation and development of features for Media Go (multimedia software application)
  • Created detailed design documents; defined workflows; produced mock-ups and finalized graphics
  • Worked directly with senior management and engineering team to meet project deliverables under tight deadlines
  • Designed layout of Media Go homepage: http://mediago.sony.com
  • Developed new source code to support social-media integration on Exclaim.ca
  • Spearheaded the visual design and development of official Facebook landing page
  • Initiated the analysis and development of interactive Facebook application to host contests on network
  • Derived social-login and sharing mechanisms for comment system; gained knowledge of Facebook API, Twitter API, and OAuth 1.0a and 2.0 protocols
  • Produced promotional web graphics – banners, tour blog design for Canadian band “The Mark Inside”
  • Designed, developed and presented new website to facilitate manager-level training
  • Increased traffic to internal communications site - designed promotional materials and coordinated their production and distribution internationally
  • Prioritized and juggled several concurrent assignments to enhance web-based learning portals
  • Identified and amended weaknesses in existing reporting structures to more accurately measure learning plan effectiveness
  • Isolated and defined user requirements through client interaction for software and web-based solutions
  • Executed steps in Software Development Life Cycle (SDLC) - prepared laboratory software systems for production environment
  • Expedited change control management processes in FDA regulated environment
  • Developed website for Recognition Culture Initiative in collaboration with H.R. and I.T. executives
Business Analyst at Teva Canada | 2010

  • Isolated and defined user requirements through client interaction for software and web-based solutions
  • Executed steps in Software Development Life Cycle (SDLC) - prepared laboratory software systems for production environment
  • Expedited change control management processes in FDA regulated environment
  • Developed website for Recognition Culture Initiative in collaboration with H.R. and I.T. executives

Technical Training and Onboarding Coordinator | 2010

  • Designed, developed and presented new website to facilitate manager-level training
  • Increased traffic to internal communications site - designed promotional materials and coordinated their production and distribution internationally
  • Prioritized and juggled several concurrent assignments to enhance web-based learning portals
  • Identified and amended weaknesses in existing reporting structures to more accurately measure learning plan effectiveness

Web and Systems Assistant Developer| 2011

  • Developed new source code to support social-media integration on Exclaim.ca
  • Spearheaded the visual design and development of official Facebook landing page
  • Initiated the analysis and development of interactive Facebook application to host contests on network
  • Derived social-login and sharing mechanisms for comment system; gained knowledge of Facebook API, Twitter API, and OAuth 1.0a and 2.0 protocols
  • Produced promotional web graphics – banners, tour blog design for Canadian band “The Mark Inside”

UX Designer | 2012

  • Responsible for the ideation and development of features for Media Go (multimedia software application)
  • Created detailed design documents; defined workflows; produced mock-ups and finalized graphics
  • Worked directly with senior management and engineering team to meet project deliverables under tight deadlines
  • Designed layout of Media Go homepage: http://mediago.sony.com

UI/UX Information Architect | 2012

  • Worked directly with stakeholders to define product objectives, scope, business model and features
  • Organized content and flow of web & mobile applications; produced user journeys
  • Rapid front-end development; leveraged Twitter Bootstrap, HTML/CSS to implement responsive design solutions
  • Created interface designs for internal and client projects; including Ditty, Maven and s3nse dashboards
  • Collaborated with development team to define DB schemas and API calls for web applications

Wondering what's next? Why not contact me?

Email me at jslleong@eng.uwaterloo.ca to learn more about what I do.

recent projects


NeuroPaint - A Novel Expressive Painting Application using EEG

January 2014 - April 2014

Created a novel expressive painting application using a NeuroSky MindWave headset in Processing 2+. Developed in collaboration with Chris Vandevelde and Audrey Chung for a Biomedical Measurements and Signal Processing course. In future, this has the potential to be used for art therapy purposes. It could also be used to create large-scale public interactive art installations.

NeuroPaint - Expressive Painting Application using EEG

January 2014 - April 2014

Created a novel expressive painting application using a NeuroSky MindWave headset in Processing 2+. Developed in collaboration with Chris Vandevelde and Audrey Chung for a Biomedical Measurements and Signal Processing course. In future, this has the potential to be used for art therapy purposes. It could also be used to create large-scale public interactive art installations.



Affective Classification of Abstract Paintings using Artificial Neural Networks

January 2014 - April 2014

Developed and analyzed artificial neural networks (ANNs) for the purpose of classifying the emotions abstract paintings evoke in human subjects. Experimented with Levenberg-Marquardt Feed Forward and Radial Basis Networks. Completed the project in collaboration with Audrey Chung for a Machine Intelligence course. Depicted to the right are the number of average true positives per emotion for the best of each network. A set of 228 abstract paintings were used.

Affective Classification of Abstract Paintings using ANNs

January 2014 - April 2014

Developed and analyzed artificial neural networks (ANNs) for the purpose of classifying the emotions abstract paintings evoke in human subjects. Experimented with Levenberg-Marquardt Feed Forward and Radial Basis Networks. Completed the project in collaboration with Audrey Chung for a Machine Intelligence course. Depicted to the right are the number of average true positives per emotion for the best of each network. A set of 228 abstract paintings were used.



Heart Activity Monitor - User Interface Design

January 2014 - April 2014

Created a user interface for a non-invasive, multi-subject video-based heartrate monitor. Created in collaboration with Stephanie Cheng for an Interface Design course. Process involved creating wireframes, conducting user interviews with primary users (nurses), and running usability tests. This version of the design was produced with two design iterations. The interface was also analyzed using Persuasive Technology Concepts.

Heart Activity Monitor - User Interface Design

January 2014 - April 2014

Created a user interface for a non-invasive multi-subject video-based heartrate monitor. Created in collaboration with Stephanie Cheng for an Interface Design course. Process involved creating wireframes, conducting user interviews, and running usability tests. This version of the design was produced with two design iterations. The interface was also analyzed using Persuasive Technology Concepts.



Evaluating Large Public Display Interfaces

September 2013 - Present

Conducting research in the Collaborative Systems Lab at the University of Waterloo. Supporting a PhD candidate in conducting user studies and evaluating the effectiveness of animation in an interactive wall display in terms of attracting passerby’s attention. Currently designing and coding the interface.

Evaluating Large Public Display Interfaces

September 2013 - Present

Conducting research in the Collaborative Systems Lab at the University of Waterloo. Supporting a PhD candidate in conducting user studies and evaluating the effectiveness of animation in an interactive wall display in terms of attracting passerby’s attention. Currently designing and coding the interface.



Idea Garden - Design Project Visualization Tool

June 2013 - August 2013

Completed an internship at the Media Interaction Lab, at the University of Applied Sciences Upper Austria. Worked in a team to design and code the first prototype for a long-term visualization tool to support designers. Project funded by the EU. Project website: idea-garden.org

Publication:

Xu, Y., Perteneder, F., Leong, J., Schwaiger, E., Haller, M. Using Grid Visualization to organize visual data. In Second International Symposium of Chinese CHI 2014, April 26-27, 2014, Toronto, ON, Canada (to appear).

Idea Garden - Design Project Visualization Tool

June 2013 - August 2013

Completed an internship at the Media Interaction Lab, at the University of Applied Sciences, Upper Austria. Worked in a team to design and code the first prototype for a long-term visualization tool to support designers. Project funded by the EU. Project website: idea-garden.org

Publication:

Xu, Y., Perteneder, F., Leong, J., Schwaiger, E., Haller, M. Using Grid Visualization to organize visual data In Second International Symposium of Chinese CHI 2014, April 26-27, 2014, Toronto, ON, Canada (to appear).



Smartphone Lighting Solution

May 2012 - August 2012

Designed and built a working prototype of an accessible smarthome lighting solution. It would enable users to transform their ordinary integrated lights into ones that can be remotely controlled from their smart phones. Final product included a working prototype - hardware and software component. Worked in a team as a 3A Systems Design Project. Project video available here. You can also check out the UI I designed for the app here: Smartphone Controlled Lighting System - UI Design

Smartphone Lighting Solution

May 2012 - August 2012

Designed and built a working prototype of an accessible smarthome lighting solution. It would enable users to transform their ordinary integrated lights into ones that can be remotely controlled from their smart phones. Final product included a working prototype - hardware and software component. Worked in a team as a 3A Systems Design Project. Project video available here. You can also check out the UI I designed for the app here: Smartphone Controlled Lighting System - UI Design



Sony Media Go - Audio Split Feature

January 2012 - April 2012

Collaborated with upper management and engineering team to design an audio split feature in Sony Media Go multimedia software. Designed the UI. Enables users to specify and procure snippets of audio files in their media library.

Sony Media Go - Audio Split Feature

January 2012 - April 2012

Collaborated with upper management and engineering team to design an audio split feature in Sony Media Go multimedia software. Designed the UI. Enables users to specify and procure snippets of audio files in their media library.