David Hayden Demerson

Hello! I am a user experience design engineer focusing on front-end engineering and ux design. Keep scrolling to see my portfolio or you can contact me.


Responsum: Informing and Empowering Patients

Our master's capstone project team worked with a startup for seven months to help them envision a platform that could help patients with chronic illnesses.

Patients with chronic diseases who self-manage and understand their health achieve better health outcomes than patients who do not. Unfortunately patients are often on their own to understand and evaluate information about their health as they research online. Responsum is a startup dedicated to more effectively informing and empowering patients. They worked with our capstone project team to kickstart their company and to better understand the people who they would be serving.


Our team began researching with a foundational literature review and a competitive analysis to orient ourselves in the health and business spaces that Responsum wanted to operate. Moving forward our team took a ’T’ approach to our research dividing it into two phases: a broad research phase across many different kinds of disease and patients, and a narrow research phase focused on a single disease and patient group. This approach equipped us to design a solution for a specific disease while maintaining an understanding of how the solution might generalize to other disease groups.

A woman interviews another woman in a coffee shop
Nanako interviews a patient during our broad research phase. We interviewed patients, doctors, caregivers, and subject-matter experts throughout both research phases.

Building from our literature review and competitive analysis we began conducting semi-structured interviews with subject-matter experts, doctors, caregivers, and patients. The team also conducted contextual inquiries to observe patients’ day-to-day lives and how they seek information about their condition.

After evaluating available resources and discussing with our clients, idiopathic pulmonary fibrosis (IPF) was chosen as our disease of focus for our second phase. Online ethnographies and diary studies provided intimate insights into the lives of IPF patients and their caregivers.

Synthesis & Insights

Throughout several months of research the team continually synthesized the data we were gathering. We began to build, discuss, test, and revise models of the patient journey and experience. These models provided a framework of discussion and understanding of the design context and design constraints both within the team and with our clients.

A man stares at a wall covered in post-it notes.
Zach examines the affinity diagram. Synthesis activities like affinity diagraming were the starting points for our models and design insights throughout the project.
A satisfaction and dissatisfaction cycle show behaviors of patients.
An example of a model explaining how a patient's satisfaction or dissatisfaction with their quality of life can often predict the patients information seeking behavior.

Visioning & Prototyping

After five months of research and analysis the team began to brainstorm solutions and ideas for how Responsum could better inform and empower patients. After weeks of ideation the team began to narrow down, combine, and refine solutions with four core ideas that we speed dated for rapid feedback. Finally unifying around a single solution the team began prototyping. We progressed from low-fidelity to high-fidelity prototypes testing and validating our designs with patients every iteration.

A whiteboard is covered in post-it notes describing goals and tasks patients have.
A brainstorming exercise exploring the various goals and tasks patients have throughout their journey. These ideas were the elements that we used to begin building a solution.
A basic interface shows an article about IPF.
Our first prototype was based on feedback from patients on paper prototypes. We tested this prototype primarily with IPF patients but other patients were also included.
With each iteration we saw patients becoming more and more excited about what we were designing.
A colorful and lively interface shows articles about IPF.
Our final prototype was developed through several rounds of testing, feedback, and iteration. The interface emphasizes personalization, information, action, and hope.

With each iteration we saw patients becoming more and more excited about what we were designing. Our clients were also excited as they saw their vision for informing and empowering patients take real form in our solution. After seven months we began to finalize our prototype and prepare for the end of our capstone project. I focused on developing a transition document that would guide and prepare our client for moving forward at the conclusion of our project.

Lilypad: Apps to Aid Special Education

Our research team worked with various schools for two years to understand how technology could improve data-driven decision-making in special education. I was understudy to the lead researcher and led development of the project.

Helping every student in special education reach their full potential requires communication and coordination between many individuals. Instructors, support staff, aids, doctors, and parents must all be effectively communicating about significant events, health, medication, performance, and behavior. The Lilypad team researched how decision-making between stakeholders in this environment worked and how it might be improved with technology.

Research & Design

Our team met with several schools meeting with their administrators and classroom personnel to begin understanding differences and commonalities between institutions. Contextual inquiries and artifact analyses helped us identify pain points and opportunities. I worked with a team of designers to communicate observations and needs and to begin prototyping solutions. As we iterated on prototypes we periodically met with administrators and classroom personnel to engage in codesign exercises and test ideas, models, and concepts.

A sheet of paper plotted with data is riddled with notes written in the margins.
An example of a datasheet used in classroom data collection. Traditional applications simply did not allow the rapid and flexible data collection instructors required.

Deployment & Testing

After several months of development our team coordinated deployment to three pilot classrooms. We continued to observe these classrooms and collect data and support the application for a semester. Despite duplicating data collection between their old system and our test solution, instructors were still saving time using out system to automate many calculations.

An interface with multiple visualizations of the same data.
A mockup of the analyze screen. We were interested in testing different kinds of visualizations to see how instructors interpreted data.
An interface with multiple points of data collection.
A mockup of the collect screen. The most common action of taking away points was large and at the top, while still allowing rapid access to log critical behavioral events.

Vertical Tabs

Firefox tab management extension

While interning at Mozilla I contributed to the Vertical Tabs Firefox extension. While most of the contributions to the project were visual in nature, there were a number of technical contributions as well. I added an option to the extension settings for theme selection, allowed the extension to be enabled and disabled without restarting the browser, and tracked down and restored some vanishing browser chrome. In addition to these changes I added a new default style for Windows and user-selectable themes across all platforms.

An old style and a new style for the extension are compared on a Windows desktop.
The old style (left) no longer aligned with the new Windows 8 or Firefox. My updated styles (right) moved Vertical Tabs to the new Windows and Firefox design languages.
A light and dark version of the vertical tabs extension side-by-side on OS X.
The light and dark themes were developed for all platforms. The backgrounds on the favicons in the dark theme helped support favicons that relied on transparency.


Automating setup of new Macs for developers

Baymac is an OS X setup assistant. He is a terminal based program written in Ruby, primarily to automate setup of new Macs for developers who use OS X. On an established machine Baymac can scan to identify software that he can install automatically and configurations that he can transfer. When setting up a new machine Baymac will install the software and transfer configurations with a single command. Baymac is entirely self contained and intended to be stored on the iCloud drive so he is available upon first logging in to a new Mac.

A computer terminal shows a bot helping a user configure their computer setup
Baymac walking through the setup configuration process. Once configured Baymac can install software and manage configurations on a new computer with a single command.

Countdown Clock

An introduction to electronics and hardware prototyping

Countdown Clock is an Arduino controlled countdown timer that marks the number of seconds until a certain day. With 10 digits the timer is able to countdown to dates over 300 years away. Each of the 7-segment digit displays was paired with a shift register to allow the entire setup to be run from an Arduino Nano. A separate 16x1 matrix display showed the countdown date. The target date was controlled by three incremental rotary encoders controlling the month, day, and year portions of the date.

10 7-segment displays are connected with hundreds of wires to a display, knobs, and microcontrollers.
Countdown Clock counts the seconds until graduation. The project used hundreds of connections and many more pins than available on an Arduino Nano without shift registers.