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


Toxicon

The Toxicon app was developed with the purpose of tackling the problem of toxcity in online videogames by visualizing the emotional context of the audio/text commmunication inputted by our users in order to allow for self-reflection. The completed version of our app along with documentation on our design process 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.

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.





Cognition and Cognitive Neuroscience Website

A complete overhaul of the Cognition and Cognitive Neuroscience Lab's website. I was tasked with creating and proprosing a redesign which I would then implement. I hope to eventually utilize Google Analytics metrics in order to implement new features once the website goes live. The website is not yet fully available but a preview can be found here.

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.




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. 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.




Algo-writer 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.




Website for Steven Pan

"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


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. Despite having made a deployable version of his website in late 2017, 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.

Steven 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.




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 and the github repository 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.


Here are some of the courses I've taken:
(Descriptions taken from UCSD's Course Catalogs)


COGS 121: Human Computer Interaction Programming Studio

This course covers fundamentals of user interface design and implementation of web-based systems. A major component is completion of a substantial programming project in which students work together in small teams.


COGS 120: Interaction Design

Introduces fundamental methods and principles for designing, implementing, and evaluating user interfaces. Topics: user-centered design, rapid prototyping, experimentation, direct manipulation, cognitive principles, visual design, social software, software tools. Learn by doing: work with a team on a quarter-long design project.


CSE 118: Ubiquitous Computing

Explores emerging opportunities enabled by cheap sensors and networked computing devices. Small research projects will be conducted in teams, culminating in project presentations at the end of the term. Section will cover material relevant to the project, such as research methods, software engineering, teamwork, and project management.


CSE 30: Computer Organization and Systems Programming

Introduction to organization of modern digital computers—understanding the various components of a computer and their interrelationships. Study of a specific architecture/machine with emphasis on systems programming in C and Assembly languages in a UNIX environment.


CSE 12: Basic Data Structures and Object-Oriented Design

Use and implementation of basic data structures including linked lists, stacks, and queues. Use of advanced structures such as binary trees and hash tables. Object-oriented design including interfaces, polymorphism, encapsulation, abstract data types, pre-/post-conditions. Recursion. Uses Java and Java Collections.


CSE 15L: Software Tools and Techniques Laboratory

Hands-on exploration of software development tools and techniques. Investigation of the scientific process as applied to software development and debugging. Emphasis is on weekly hands-on laboratory experiences, development of laboratory notebooking techniques as applied to software design.


COGS 124: HCI Technical Systems Research

In this advanced project-based course, we study the state-of-the-art in research on technical systems for human-computer interaction (HCI). Students will deconstruct the systems described in top-tier HCI papers and work in teams to create novel technical systems of their own.


COGS 100: Cyborgs Now and in the Future

Covers the theories of situated, distributed, enactive, and embodied cognition. Explains how cyborgs are a natural consequence of our current understanding of embodied minds embedded in culturally shaped niches; how mental systems can be distributed over other people and things.


CSE 21: Mathematics for Algorithms and Systems

This course will provide an introduction to the discrete mathematical tools needed to analyze algorithms and systems. Enumerative combinatorics: basic counting principles, inclusion-exclusion, and generating functions. Matrix notation. Applied discrete probability. Finite automata.


CSE 20: Discrete Mathematics

Basic discrete mathematical structures: sets, relations, functions, sequences, equivalence relations, partial orders, and number systems. Methods of reasoning and proofs: prepositional logic, predicate logic, induction, recursion, and pigeonhole principle. Infinite sets and diagonalization. Basic counting techniques; permutation and combinations. Applications will be given to digital logic design, elementary number theory, design of programs, and proofs of program correctness.