MoCA WEB APPLICATION MoCA WEB APPLICATION
(opens in new tab)What is the MoCA Web Application?The MoCA Web Application was developed so contributors can easily access, create, update and visualize MoCA research findings. Much better than a spreadsheet!
See Web Application Tour Below
Click here for a Live Demo (opens in new tab)
What is MoCA?MoCA (Model of Coordinated Action) is a new theoretical framework for understanding differences in how people collaborate. The model is designed to describe the problem space of computer-supported cooperative work (CSCW) but can be extended or have applications for other fields or domains. I have been a research assistant with MoCA for over two years. One of the main tasks is a retrospective content analysis of CSCW publications. Click here to learn more about MoCA (opens in new tab)
I developed the web application with the help of another research assistant in the CSC Lab. I created the wireframe sketches and worked with the research assistant to confirm the application design plan met all of our requirements. I developed the web application with a Python back-end, leveraging Google App Engine. The fellow research assistent on the project coded the email feature in the website application.
Since early January of 2015, our research team has been collecting MoCA research data using Google spreadsheets. Although convenient to use Google spreadsheets, it has proven aesthetically difficult to showcase our findings to other research contributors and manage data collection as the datasets grew.
The MoCA website application is a step towards creating a better user interface design.
Allow users to click on links to various research papers, which display the MoCA data collected. Within each research paper link, a window loads a PDF of the research paper. The user also has the option to email research assistants through the website and geographically understand where each research collaboration took place.
Wireframe SketchesWireframe sketches were done from the working knowledge of the needed system. As a MoCA research assistant, I knew the problem space fairly well to get started with design ideas.
Front-End Design
Once a wireframe was finalized by the team, I developed the front-end design using HTML, CSS, and Javascript.
Development
The website application was developed using Python, Django, and Jinja2. Initial programming procedure for the website application changed to leverage Google App Engine to add more ability for growth and flexibility. Website application was tested using a smaller data set. The Google Maps api call from spreadsheet field location data. * A fellow research assistant on the project coded the email feature of the website application.
Model of Coordinated Action (MoCA) Web Application Demo (opens in new tab)
Let’s take a tour...
The first page is a welcoming page with a scrollable menu on the left column. This menu is a list of all of the CSCW research paper from 2014 that had a Coordinated Action listed in alphabetical order.
Clicking on a link we are taken to a page with data from a CSCW paper. On the far right column we can see the PDF loaded and scrollable. In the middle column there is a scrollable section with the various pieces of information we have collected about the paper: Title, Authors, Institutions, Session, Page Number, Coordinated Action and many others.
In this screenshot we can see the options given to us when hovering over the PDF, like: print, download, zoom, etc. We can also copy/paste from the pdf which will come in handy with pulling quotes when we add the data editing feature.
In this slide we can see the email form in the middle column. This feature is used to send a link to this paper to someone via email. A note on this is the URL. It is created using the unique page number of the CSCW paper and can be referred to directly.
And in this screenshot we can see the sliding menu in action and a good look at some of the extra data that was below the fold as well as the Google Map. This particular research paper had a higher number of research locations with 26 sites of investigation.