Wearable Technology for Children’s Educational Purposes

Project Brief


Since September 2018, I have been collaborating with the BodyVis team working on a new wearable computing and electronic textiles (e-textiles) technology for learning about anatomy and physiology. This project is mainly run by Leyla Norooz, a Ph.D candidate from University of Maryland, and Dr. Jon E. Froehlich (PI) and Dr. Tamaea L.Clegg (Co-PI). https://makeabilitylab.cs.washington.edu/project/BodyVis/



We present a new wearable computing and electronic textiles (e-textiles) technology for learning about anatomy and physiology, and for supporting children’s scientific inquiry skills. More specifically, we propose to design, build, and evaluate a set of wearable e-textile shirt prototypes—called BodyVis—that combine embedded sensing and interactive visualization to reveal otherwise “invisible” parts and functions of the human body. As the wearer engages in an activity, physiological phenomena are manifested on the wearable visualization in real-time. In addition, we present a new mixed-reality tool called SharedPhys, which tightly integrates real-time physiological sensing, whole-body interaction, and scientific inquiry to support new forms of embodied interaction and collaborative learning. (Makeabilitylab/BodyVis)



My Role

My major contribution in the BodyVis project was in the data collection process and data analysis phase. I co-ran deployment sessions and collected qualitative data (field notes), contributed to protocol iteration, and have been working on the qualitative analysis of transcribed and video data.


Data Collection

  • Collected primarily qualitative and some quantitative data
  • Qualitative data: field notes taken in situ, written post-session debriefs, video and audio recordings of sessions, daily post-session journal entries completed by children, pre- and post-assessment open-ended questions, focus groups with children post-study
  • Quantitative data: pre- and post-assessment true/false and likert scale questions

Data Analysis

  • Qualitative data analysis: mixed inductive and deductive analysis approach
    • Video data: Researchers reviewed debrief and field notes, and one session video, to derive an initial codebook. Two researchers simultaneously coded a second video, updated codebook, then independently coded all videos, developed summaries, and met to discuss data. One researcher wrote a final summary. (This follows Chi’s 8-step process.)
    • Journal entries, open-ended questions, and focus groups: Two researchers coded a data subset using an initial codebook, then resolved differences and updated the codebook, coded a second subset, and achieved acceptable inter-rater reliability using Krippendorf’s alpha (at least .80) before coding remaining data.
  • Quantitative data analysis: significance of results evaluated via chi-squared and Wilcoxon signed ranks tests (sig. level = 0.05)







Website and Application Improvements & Feature Design (student group project)

Project Brief



As a part of student project for the User Experience Research Methods class, my team and I worked collaboratively through the research, analysis, and design phases of the ‘Improving the UX of the Harford County Website and App’ project.


Overview & Client Details

Harford County is a county in the U.S. state of Maryland. Harford County was formed on March 22, 1774 from the eastern part of Baltimore County with a population of 13,000 people.

The Harford County Department of Planning and Zoning is responsible for overseeing the growth and development of Harford County. The Department seeks to better meet the needs of county visitors by enhancing its current app and website. They currently provide access to county services, information and resources, including: news, calendar, facilities, mini-apps and sign up for county notifications but it does not specifically encourage tourist activities. It is most heavily used by 30-40 year-olds, however, the county would like to enhance the app to more fully engage business and vacationing visitors, and expand its user base beyond the core user group.



Project Focus, Mission & Business Goals

Our project focus were promoting county tourism to visitors and expanding the website and app’s core user group; by understanding the experience of trip planning and information requirement while making decision. Our mission and business goals were:

Increase engagement with non-residents including business and vacationing visitors

Promote county tourism to residents and non-residents

Expand the core user group of the app beyond 30-40 year olds

Improve accessibility of information from the app/website


Affinity Diagram


In the background research process, we analyzed Harford County app and website, did comparative analysis of similar websites, and analyzed popular trip planning sites. Then, we conducted 8 contextual interviews across the varied demographics, formulated affinity diagrams from notes made in the interpretation sessions. We also built three Contextual Design Experience Models to show the structure of users’ lives from the multiple points of view and help us to collect, incorporate and use our data.



Contextual Design Experience Models





Sequence Model                    Day In the Life Model            Identity Model



After doing user research, competitive and complimentary analysis and lots of concepting and ideation, we came up with some design ideas and then created prototypes for our proposed solutions.  We wanted to create a more engaging online experience for users, which we achieved through observing and doing retrospective account of the listed activities in a series of interviews.




Competitive Analysis  •  Contextual User Interviews  •  Sketching  •  Prototyping  •  Presentation   •    Affinity Diagramming    •    Sketching    •     Storyboarding


Combining insights into cohesive experiences through user stories.


Design Ideas & Prototypes

  • Put attractive pictures on the main page. Replace generic stock images on the main webpage with images from the county
  • Advertise interesting and novel experiences / attractions unique to Harford County
  • Show what people are talking about from social media – Instagram, Facebook, Twitter
  • Support trip planning with displaying accurate and up to date information about future events
  • Group activities together, so that they are easier to find with respect to what people want to do
  • Show user testimonials for activities and places in Harford County
  • Give weather based on event options
  • Relevant and important information should be easy to find
  • Add option to make itinerary which syncs with your personal calendar


Other Design Ideas:

  • Give information on the different ways one could get there and the time it would take
  • Include a virtual tour, to allow users to get a sense of Harford County before they travel
  • Suggest pre-planned experiences for travelers to the county
  • Provide discussion threads for people to talk about their experiences and ask questions


Home Page | Show everyone how fun Harford can be.


Find Events Pages | Let’s find your next muse.


Smart Itinerary | Your trip, at a glance.







Designing New Technology for Ghostbusters (student group project)

Project Brief


The Ghostbusters (from the movie “Ghostbusters“, 1984) are back and they need new technology. Our job was to design and build it. When designing for special populations that you cannot literally step into their world, it is important to understand all of the nuances of
their job as well as how your design will fit in the grand scheme. The needs of the users
and how your product can help fill voids in the user’s current systems are also important
to consider.




User Analysis

Feature Analysis

Design decision: there is a variety of paranormal activity all around the world. To catch and kill them, Ghostbusters need to know the type of the ghosts and other information about their characteristics in order to know their strength and the best way to kill them.

In the movie, there are different types of ghosts that Ghostbusters had to fight and catch. In the library, there was a white, human sized, semitransparent ghost with mixed emotions and speed (first she was calm and stood still, then turned to an angry ghost and attacked Ghostbusters). However, they fought a green, medium size and hungry ghost in a building who moved fast and injured one of Ghostbusters. Toward the end of the movie, they were tracking a giant heavy ghost in the streets of Manhattan which became a problem for the whole city and ghostbusters had to shoot him many times.

We tried to come up with an idea to develop a system to provide our users with desired information about different types of ghosts they have to fight with and kill. First, they need to find the exact location of the paranormal, our smart camera would help them to spot the ghost. Then, it scans the ghost, provides the stats, and sends all info to a screen


Design Process

Following the user-centered design principles, we sketched our ideas for the product design. First, we brainstormed on the ways in which we can make it easy for our users to find paranormal and provide guidance for capturing them. Combining a few ideas from different sketches that we created, we considered the ideas that would help Ghostbusters more and we finalized our design.

Below are the design steps we took to get to our final prototype used for testing.


Brainstorming Sketches



Low Fidelity Prototype


High Fidelity Prototype





User Testing & Evaluation

We conducted an in-class evaluation of our hi-fidelity prototype where the performance of our design was assessed, and then a quantitative evaluation of our prototype was assessed through a follow-up question. We asked our users to login to the prototype and then run it to provide feedback for our system.

In the usability testing on the prototype, we focused mostly on the speed, efficiency, and learnability. Based on the Nielsen’s usability guidance, we observed our test users to evaluate the user control and freedom, flexibility and efficiently of use, visibility of the system status, and minimalist design.


List of tasks:

  • Login to the system through 2 validation steps (face recognition and vocal password authentication)
  • Connect the device to the camera mounted on the head
  • Use the camera view to detect the ghost and exact location of it
  • Receiving all ghost’s stats on the device mounted to the wrist, including size, color, emotion, speed, energy, and weight
  • Get to know how many shots needed to kill the ghost
  • Go for next mission


The key finding from our usability testing includes:

According to the evaluation that we conducted and feedbacks we received, our design is easy to carry and use, efficient and aesthetically pleasing. This design could help the problem we are trying to solve during this project. Login to the system and sync the camera to the device were indicated clearly and were visible for the users. Our prototype had required features to be able to be used during the mission and was self-explanatory and straightforward to users. Also, the Ghostbusters do not need to interact with the product over the task and our design would provide them flexibility and ease of use.

Recommendations and observations (Feedback from in class tests):

  • Make the facts about the ghost appear faster
  • Haptic feedback to detect ghost
  • It was a little heavy on the wrist
  • People thought they had to tap the ghost in the camera
  • People were confused about the Bluetooth part and what to click

The user test result led us to make a list of adjustments and features for our design:

  • Modifying the Bluetooth connection page design to make the device connection process easier and faster
  • Showing the user that the screen is only to display the ghost location and give the information about it, and the user doesn’t need to interact with it.
  • Changing the band of the device to make it more secure and easy to carry and balance the device better on the wrist
  • Adding more feedbacks to the ghost detection process
  • Increasing the speed of some slides to see the result (ghost stats) faster
  • Switching the “wanna catch another ghost?” page from a touch screen to a voice command.


Final Design & Application Description

The Ghost Catcher app allows the user to connect to a portable camera mounted on a headband which is easy to carry, and is used to spot and scan the ghosts. The camera is connected to a screen device mounted on the user’s wrist to display the data received from the camera. The smart camera identifies the ghost, scans it and measures the ghost stats such as size, color, emotion, speed, energy, and weight to send them to the screen device. The application on the screen device receives the camera live view and all the measurements, calculates them to show the user how many shots needed to successfully capture the ghost. This helps Ghostbusters to know what they have to do in order to be successful and gives them detailed information on what kind of paranormal they are dealing with, so they will go into the situation with as much knowledge as possible. 


Final Prototype








Aggregate Website of Tips (student group project)

Project Brief


Outmaneuvering Dementia, is a click through prototype website which aids people with dementia in self-management of their chronic illness by providing tips created by other individuals with dementia.





Outmaneuvering Dementia, is a click through prototype website which aids people with dementia in self-management of their chronic illness by providing tips created by other individuals with dementia. Because of the effect of dementia on the cognitive ability of individuals with the illness, very few web applications are created strictly for the use of people with dementia. There are only a select few online peer to peer support forums which provide people with dementia a place to go and get support from others with dementia. However, these support forums often have delayed response times from several hours up to days for certain posts. Also, due to cognitive impairments of individuals with dementia, their ability to sort through vast amounts of information and tips using search engines such as Google can be overwhelming. This exemplifies the need for an aggregate website of tips for people with dementia to go to when they need information quickly.


Data Sample:

This prototype pulls its data from a pre-existing, open access, online database of peer to peer support from users with dementia, Dementia Diaries. This online forum is designated for use only by people with dementia, excluding input from users without dementia, in order for people with dementia to connect with and support others in the same position as themselves. Dementia Diaries includes audio recorded diary entries from people with dementia to share their lives through this online forum. Each of the Dementia Diaries are transcribed on their website.



Application Description: Features and Functionalities

The major tags are displayed by headers on the main page. When a header tip is selected, a list of all tips under that category is displayed. When a certain tip is selected from among this list, the full text of the original transcribed diary, the author, and the URL where the tip was found is displayed so that users can go to the source of that tip online. If a user does not want to use the headers, a search bar can be utilized to look for a specific word throughout the database of tips. The search functionality made use of JSON files we create from our Excel document of transcribed diaries.A navigation bar spans the top of the website no matter the specific webpage the user is on. A New Profile button was included to allow the user to input their information and create a personal profile.



To make our information-based website accessible for people with different levels of technology literacy, we followed some basic design criteria. First, about the look and content of the webpage, we made sure to keep it simple, with plain background, and well-contrasted colors. To comply with the dementia-friendly design process, we never relied on the common icons and logos, instead we used explicit texts. All header texts were short and informative (no abbreviations or jargon) with a consistent font. The content is explicit and arresting, with a clear and easy-to-understand language, and no scientific words or generalization. Second, to aid with user orientation we kept all relevant information, forms, or text in one page. Additionally, the number of choices a user has is kept to a minimal. Third, all links and buttons indicate their purpose individually and independent from the surrounding texts and other features. Also, buttons were labeled with informative and clear phrases/sentences. Finally, regarding navigation, the essential navigation items are clearly locatable across the website, including: home button, user profile, and saved tips. The navigation tools and icons are self-explanatory to help the user get the needed information as easily and quickly as possible.



The main features of our website:

  • Searching posts by header tag
  • Searching posts by content of the post itself
  • A landing page with buttons that use Javascript functionalities
  • A system of explorable tags for posts
  • A navigation bar throughout the website
  • A new user profile form
  • Simple design that is easy to use for an older population





Timeline of Life and Work

Project Brief


I created a biographical timeline of Dr. Ben Shneiderman, who is an American Computer Scientist and a distinguished professor at the University of Maryland (UMD). He is one of the pioneers of the field of Human-Compute Interaction (HCI) and Information Visualization. This scrolling timeline was designed to improve audience’s understanding of his past and current experience by learning about his history through events, awards, accomplishments and books.


Design Ideas:

In the process of creating this biographical timeline, I had to choose forty events, passages, and interventions in Dr. Shneiderman’s life and professional career, obviously out of hundreds of achievements over more than fifty years of his contribution in the field of HCI. I consider my primary audience including students, university professors, journalists, scientists, etc. to lay out the facts in a way to enable them to correlate information in a meaningful manner.

I made some sketches, then built a few prototypes, and ran some usability testings to improve the final version.








Final Design:

The final version of the scrolling timeline includes forty events about Dr. Shneiderman’s life and professional career and it was added as a tab on his UMD homepage.