Abhinit Parelkar - UX/Interaction Designer

Observation Tool

Home    >     Projects     >      Observation Tool Prototype (Code-based)


User Researcher's Observation Tool Prototype 

The problem:

We conducted a contextual inquiry in our user research study (found here) using Optimal Workshop. We found some deficiencies in the Optimal Workshop's Reframer tool. While conducting a contextual inquiry, we were forced to use two-three objects (audio recorder, Reframer - to jot down observation notes, notepad to sketch environment/models) to record our observations. It was a terrible experience to keep track of audio recording status (most of us used smart phones), to carry a laptop for jotting down observation notes while shadowing subjects, carrying a notepad to sketch environments/models.

The need to incorporate media recording, communication with team members, shared AEIOU (Activity, Environment, Interaction, Object, User - a framework used to record observations in user research.) or self-generated tags was essential to depend on a single device (most preferably a tablet).

A seamless way to record observations was much needed to avoid any interruptions and to fully focus on our subjects rather than worrying about the number of objects/devices being used whilst conducting contextual inquiry. 


We had a time constraint of less than three weeks. The tool wasn't developed due to shortage of time and lack of developers in our research team.


To view the interactive Axure RP prototype (if asked, enter password "depaul"): click here

To view the interactive coded screens (please, use Google Chrome browser - the "Material Design Lite" framework best supports Chrome platform): click here


We initiated the design process with the requirements based on our experience with Optimal Workshop's "Reframer" tool. We ideated our prototype with a desire to incorporate the needs (requirements) in to an observation tool. The objective of our prototype is to deliver a seamless experience of:

  • note-taking,
  • recording media,
  • sketching,
  • communication,
  • sharing tags (for note-taking),
  • measuring the duration of observation (timer),
  • all of this in a single device (tablet).

We had a total of four iterations over the interactive wireframes designed in Axure RP. Each iteration was an improvement over the previous artifact, based on evaluation. The code-based screens are the mid-fi version of the interactive wireframes.

Technology used: 

Axure RP, Google's Material Design Lite Framework (HTML5/CSS3).


Originally, the team consisted of six members (researchers & designers). The leading member (Dr. Cynthia Putnam) directed and supervised the project (including the prototype) which resulted in four iterations. The contribution on the prototype was done by only the following two members:

  • Abhinit Parelkar (Designer & Coder): Sketched, prototyped, coded, refined.
  • Silpa Vipparti (Designer & Coder): Collaborated for ideation, prototyping and coding process.

Learned Lesson(s):

Our goal was to develop this tool and conduct a usability test (on this tool) using Morae. Unfortunately, due to much shortage of time (the study was much focused on the user research part), we couldn't ideate the analysis part of this tool, neither we could develop this tool due to lack of developers in our team. We see a potential in our idea, and we hope to implement and evaluate (with usability tests) it in the near future.



  < Prev.   |   Next >