Interaction + User Experience Designer

PORTFOLIO
ABOUT ME
RESUME

/ / portfolio

ABSOLUTE PERCEPTIONS

CALIFORNIA STYLE EVENTS

PAN HSU PEDIATRICS

DANCE COGNITION

ACTION NETWORK

FAUCET REDESIGN

BILL SHARING REDESIGN

INDIANA UNIVERSITY REDESIGN

MORNING STYLE INTERFACE

ALTON & CHARISSA

[ Back to Top ]

/ / about me

Hi. I think by now you know my name is Jon Chen (it's pretty big up at the top). I honestly don't really know what to put in this section, but it seems to be an imperative to all sites, so here it is

I hope you got a chance to see my portfolio above, it's a random collection of coding, design, and iterative design work both with school and on my own. I guess a little about me is that I am a recent graduate from UC San Diego with a B.S. in Cognitive Science specializing in HCI. I went in as a bio major, decided that I lacked a lot of interest in the health sciences, and decided to go into a more design and computing focused major and voila! Found cognitive science, a beautiful harmony of neuroscience, programming, and design.

At some point I read Don Norman's Design of Everyday Things, and since then I've really enjoy finding everyday tasks that are difficult for the everyday person to do (ie. watching people have trouble opening doors, turning things on, etc.) and this really led to my interest in information architecture and user experience, as I've always had a strong interest in photography.

I really enjoy macro and landscape photography, anything related to the outdoors, and playing praise music on my guitar. Please, feel free to browse around. I know it's not much, but it's all coming :)

[ Back to Top ]

/ / resume

Download the pdf version.
Download the text version.

[ Back to Top ]

dance cognition | 2010

This was a web project archiving hundreds of hours choreography and instruction from Wayne McGregor of Random Dance (also director of the Royal Ballet). The goal of this project was to create a searchable archive of videos of Wayne McGregor creating a dance from conception to execution. The site was designed with the intent of other researchers being able to view the videos as well as annotate directly onto the video, to eventually have a network of researchers viewing and analyzing the choreography/learning process. During this process we poured over hours of dance footage as well as interviews with Wayne and dancers about how they interact to learn the dance.

To the left are just a few of the wireframes created to develop this site.

View a framwork of this site! Unfortunately this project is still underway so feel free to peruse the current framework.

action network

This was built as part of COGS 187B course at UC San Diego, where we took on real clients and developed a website from the ground up (from user needs, user experience, client needs, wireframing, storyboarding, etc.) for free. This company was bringing awareness to the San Diego region of the growing issue of child slavery. The website's purpose was to bring easy access to parents and awareness of the dangers that lurk in San Diego.

View a working link of our design!

water faucet redesign | 2010

This was a project for a Human-Computer Interaction course at UC San Diego, where we took an object everybody interacts with every day, examined the system, based on extensive user research, personas, and storyboarding made design recommendations for an improvement on the faucet system. A basic prototype was put on paper based on these recommendations.

View a copy of the report (PDF).

bill sharing process | 2009

In the largest project undertaken during my college career, we took a look at a system that appeared to be broken and attempted to pinpoint the breakdown and come up with a solution. In our particular project, we studied the interaction involved in bill sharing in restaurants, where large parties (generally 4+) would attempt to share a bill. We noticed that this was very difficult for many groups, and through extensive research by interviews, observations, and shadowing we determined that the break down was in the customer's ability to properly perform the mathematical calculations required to split the bill effectively.

We then proceeded to take this research and began developing strategies to offload these calculations, and decided that redesigning the physical bill would be the most effective. So through multiple iterations of prototyping and more testing, we eventually came up with a model of a bill that seemed to work well with users attempting to split the bill. Click here to see a full size of this bill!

indiana university | 2009

This was a class project done with a small team to redesign the (then) current University of Indiana, Bloomington website. We employed information architecture concepts to bring salience to important aspects of the website, and to make the site easier to navigate as well as have a more pleasant user experience. We used both low and high fidelity wireframes to construct these mockups.