Here are some of the bigger projects I've worked on:


Toxicon

One of the orignal goals of the Toxicon app was to tackle the problem of toxcity in online videogames. My group found that in most online encounters, many of the more toxic individuals would not consider the things they were saying to be toxic. Because of this, we wanted to create an application that could review transcriptions of in-game communications and provide both contextual and emotional data in order to determine whether or not someone was being toxic in their games. In order to narrow the focus of our app's purpose, we created several user scenarios depicted through storyboards such as the one below.

Prior to coding our app, we used Figma to create digital mockups which featured some of the key ideas we wanted to incorporate into our final product. In the end, two full mockups were created each with a different approach on how we wanted to tackle toxicity. Both mockups had elements that were either used or discarded over the course of our design process and many ideas never came to fruition. For example, one idea that was pitched early on included a version in which we would have users rate the toxcicity of other users, however, we found that method to be too subjective and thus decided to rely on AI for the task rather than people.



A full verion of one of the Figma mockups can be found here.
Our app was created with a Node.js backend which interacted with the IBM Watson Speech-to-Text and Natural Language Understanding APIs in order to provide contextual and emotional analysis on inputted text or audio data. SQLite was used to store our data for manipulations which could be visualized through Plotly and our frontend was built through HTML, CSS, and jQuery.

The completed version of our app can be found on github. In order to showcase the final product, we produced a brief 2 minute video that goes over Toxicon's purpose and functionality which can be found below. Credits to Wayne Phung and Helen Cheng for working with me on this project.





Website for Steven Pan

Steven, a graduate student at the Cognition and Cognitive Neuroscience Lab, first approached me about the idea of redesigning his own personal website after I had initially proposed a redesign of the lab's website which he was managing. He initially had a single static HTML page which acted as a CV, however, he wanted to improve his web presence and upgrade both the content and visual quality of his website.

I worked closely with Steven throughout the whole design process, implementing any changes he requested while providing feedback on whether the changes would be tenable and/or appealing, changing my implementations to meet these criteria whenever possible. The website was built from the ground up through HTML, CSS, and a little bit of JavaScript. It did, however, utilize the Bootstrap framework to allow for more a responsive and dynamic design implementation. An older version of the website's code can be found here.

"Andrew's web design work is superb. He has helped build two websites for me and/or my employer, one that showcases my research program/outreach and the other for a major laboratory at an R1-level university. In both cases, Andrew was instrumental in creating a modern, adaptive, and visually appealing website with innovative technical features and a slickly designed interface. He was incredibly efficient, harnessed the latest web design tools, and the results were fantastic. Further, throughout the design process Andrew was laser-focused on the mission requirements and exceptionally responsive to feedback. Andrew is an excellent web designer and I cannot recommend him highly enough!"
- Steven C. Pan


I continue to work closely with Steven in maintaining and updating his personal website, which can be found here. As my first experience working in a non-class setting and engaging with a real client I was able to learn a great deal on how to get my ideas across while still satisfying my client's needs. This project also opened up new opportunities by allowing me to prove my ability to the head of the Cognition and Cognitive Neuroscience Lab, Dr. Timothy Rickard, and gave me a chance at going through with redesigning his lab's website.




Algo-Writer

Algo-writer was a mobile-based webapp built by my classmates and I for an interaction design course at UCSD. The app was made with goal of helping novice programmers envision the algorithms within their programs. It underwent several iterations both physical and digital throughout its design process. Many of these prototypes were used both for user testing as well for ideation. Initially, we created two paper prototypes each with a different concept on how to tackle the issue of difficulties experienced by novice programmers. Gradually, as development progressed, many ideas from both paper prototypes were incoporated into the final design. With the design completed, we used Figma to create a digital mockup of how we wanted our app to look before coding it. This digital mockup provided us with a framework to improve upon as we built towards the final product.


A verion of the digital Figma mockup can be found here.
Throughout the entire development process of Algo-writer, we worked closely with our user base to improve the quality of our app. Starting from the needfinding phase, we interviewed Computer Science students at UCSD on the difficulties they had as novice programmers and from their testimony we worked to create an app that could alleviate the problems they experienced as new programmers. We conducted several in-person walkthroughs throughout the design process and had users navigate through and provide feedback on not just the final product but also through our digital and paper mockups. Once a working version of our app was published online, we were able to have several users test it simultaneously and gather data on their usage through Google Analytics.



Algo-writer was built on a Node.js backend and utilized HTML Handlebars as well as the Bootstrap framework on top of vanilla HTML, CSS, and jQuery. Every iteration underwent several sessions of user testing and feedback from our user tests was used to improve as well as debug the app over time.

A testable version of Algo-writer can be found here and the source code can be found on github. We also produced a minute long video that walks through the app which can be found below. Credits to Jason Ho, Ethan Cai, and Maya Bello for working with me on this project.







Cognition and Cognitive Neuroscience Website

When I was exploring my research options at UCSD freshman year I found myself browsing through many of the websites run by labs on campus and when I saw the CCN Lab's website I immediately spotted an opportunity for change. When I joined the lab in the spring of 2017, it became my goal to have the opportunity to redesign what I believed was a well-intentioned website that simply needed a good polish.

Over the summer of 2017, I would spend my time developing a Figma prototype of my planned redesign for the lab website. My goal was to keep the overall aesthetic of the redesign as similar to the original website as possible while adding some modern elements and features. I presented my final mockup to the lab manager at the CCN Lab, Steven Pan, in the fall of 2017 but was told a website overhaul was not being looked into at the time. After being fortunate enough to work on another web project I was given the opportunity to present my mockup to Dr. Timothy Rickard, who headed the CCN Lab, and I was given permission to begin work on redesigning the website over the summer of 2018.



The final version of the Figma mockup can be found here.
Over the course of development I worked closely with both Steven Pan and Dr. Rickard to ensure that the final product would meet the standards of a reputable lab while being both aesthetically appealing and responsive across a multitude of devices. I primarily based my work on the mockup I created, but also drew further inspiration from my analysis of other lab websites. The website was built utilizing the Bootstrap framework but also with a great deal of custom HTML and CSS as well as a few lines of JavaScript.

At the moment, the lab website is still undergoing some minor changes before being published to the web. It should be completed sometime during fall of 2018.




Here are some other projects I've worked on:


The Numbers of Music

An exploration of the Billboard Top 100 Charts using Python as part of a course on Data Science in Practice. Using the Billboard.py API we were able to pull data from every chart published in the Billboard 100's history and managed to both analyze as well as visualize trends in music over the last 60 years. Credits to Zachary Gutierrez, Nate Browne, Erin Drury, Tyler Tran, and Churro Chong for working with me on this project. The final version of this project can be found here.


Redesigning the Printer

As part of a course on the Design of Everyday Things, my group and I wanted to explore the problems users regularly faced when using printers and address them by proposing a potential redesign. In order to better understand user problems, we would interview several individuals both working adults and students and would have them walk us through a typical print job, taking note of any issues they ran into and asking them further questions in the process. Once this was done, we conducted a quantative analysis on available printers to see how certain brands tackled different problems. Using what we learned, we created and proposed a printer redesign that we hoped with alleviate some of the issues we observed. Credits to Nate Browne, Tuan Bao, Victor Phung, Luke Burbidge, and Jonathan Hernandez for working with me on this and the full project writeup can be found here.


A Look at Mistakes and Slips in UCSD's WebReg System

A brief study on usability issues found in UCSD's online registration program for a course on the Design of Everyday Things. In order to find both opportunities for mistakes and slips to occur when using UCSD's WebReg program, my group and I conducted several interviews and walkthroughs with UCSD students, noting any problems they had run to in the past or problems the ran into during their walkthrough. We created a full writeup on the problems we found and also proposed a potential redesign that we felt addressed some of the issues we discovered. Credits to Nate Browne, Tuan Bao, Victor Phung, and Jonathan Hernandez for working with me on this.


Ethnographic Study of a Qualcomm Researcher's Search Habits

As part of a brief course on ethnography taught by Google Senior Research Scientist Dan Russell, my group and I took a trip to Qualcomm headquarters where we conducted an interview with Senior Director of User Experience Jonathan Kies. In our interview, we discussed and asked about how he utilizes web search in his day-to-day life. Over the course of the interview, we noted key insights and observations and later on presented what we found to Dan along with a panel of students.



Back to Top
<< Go Back