I am a Computational and Design (Digital Media) major student at Duke Kunshan University, dedicated to merging the realms of technology and creativity. With a keen interest in Human-Computer Interaction (HCI) research and UI/UX design, I strive to create impactful user experiences.
Currently, my research focuses on the intersection of tangible user interfaces, accessibility, wearable technology, and HCI in educational settings.
Here are some of the projects and research I've done in the past. They include course projects from my sophomore class, lab research projects I was involved in, and a brochure I designed for the school office!
Tangram Game for Autism Spectrum Disorder Children
A Sustainable housing model controlled by user interfaces
A Game For Children to Learn The Knowledge Of Agriculture
BrochureDesign
The research aims to investigate how Illuminable Tangram (First Stage)/ tangible user interfaces (Second Stage) can facilitate social interactions among children with autism spectrum disorder. As children with autism usually require support in social interactions and collaboration, our design has embedded certain features to facilitate the collaboration between autistic children, or between autistic children and their teachers, family members, and caregivers.
- For technical skills: I expanded my proficiency in p5js, Processing, Electronic Components, and hardware design, gaining a deeper understanding of how to do user experience design and research. Also, I improved my skills in using Figma, Notion, and other UI/UX design tools.
- For research skills: I enhanced my qualitative research skills in this project. We did semi-structured interviews, unstructured interviews, and three rounds design iterations during the design process.
- For my future research: Because this project has a target population (kids with autism spectrum disorders), I think it will help me do more research on accessible design. More importantly, I think I will be able to think better about the needs of my research subjects and help them better.
- For my future career: If I were to pursue a career in UI/UX design or research in the future, I think this research experience would also help me to better think about and empathize with the needs of users. More importantly, this program taught me the process of designing products and the ability to communicate and collaborate with my team.
ASD is a widespread developmental disorder involving impairments in communication skills, cognitive levels, and social skills (Chen, 2012). However, among all impairments, social barriers are the major source that leads to cognitive and language disabilities for kids with ASD (Williams White et al., 2006).
In our conversations with teachers of children with autism spectrum disorders, they told us that these children sometimes want to play with other children, but they just don't know how to express and the way to express the feeling appropriately.
Therefore, in this project, we want to develop a game to promote children’s collaboration, communication and social skills.
To gain a better understanding of the ASD community, we went to a Children Rehab Centre to observe how ASD children are taught and trained. We received permission to observe from teacher and the child’s parents.
Also, we conducted an unstructured interview with open-ended questions with the teacher there to gain in depth insights about how to help the children.
Based on our conversation with the teachers at the rehabilitation center, they told us that most of the autistic children they have taught are easily attracted to bright colors, lights, and movement. So we took the traditional Chinese toy tangram as our inspiration and decided to design a large-scale tangram foam toy that can light up through interaction.
Using the light-emitting element to attract children's attention, and using the large size enhances the possibility that children need to interact with each other.
Then, we made a storyboard to depict the interaction process of users playing with illuminate tangram.
Watch the video to see our first prototype (the video is in Chinese).
We showed the first design prototype to the teachers at the rehabilitation center and they gave us some suggestions and ideas for improvement：
- This illuminate tangram is more suitable for children with Autism that have certain cognitive ability to understand simple instructions and can focus for a short period of time. However, it may be difficult for younger or more severe children to follow instructions and the exposed electronic circuitry can be quite dangerous for them.
- Also, they suggested us to validate the child's interest in tangram.
We started our iteration on the design based on teachers' feedback.
Based on the feedback from the teachers, we made another tangram model with magnets instead of circuits and did a simple user test.
We gave this model game to about 15 kids with autism spectrum disorder. Based on initial observations, the children enjoyed the large puzzle game and we observed a lot of communication between the children.
In our iteration, we decided to make three big improvements to our design:
1. Remove the electronics and circuits from the jigsaw puzzle.
2. Do not provide the children with instruction, the children will explore on their own based on the feedback given by the game.
3. Design a simple user interface for the game and project it with a projection, the children will use the foam jigsaw puzzle to interact with the projected user interface. We will use a camera to detect the position of the jigsaw puzzle. If the camera detects that the child has put the tangram together correctly, the projection will give the child positive feedback to encourage them to continue exploring.
This project is a work in progress, we are making a UI and camera detection system using Processing and Figma.
⬆ HIDEI designed a model of a zero-energy house that demonstrates how renewable energy can be incorporated into daily life. The model will feature a 3D representation of the house and an interactive GUI that allows users to select and experiment with various types of clean energy. This way, users will be able to see firsthand how the house operates and how clean energy can affect it. This project aims to promote the adoption of zero-energy houses and contribute to a more sustainable future.
I expanded my proficiency in model making, Processing, Arduino and hardware design. Also, I improved my design and design iteration skills by using Figma, user persona, user flow, screen flow, system flow, graphic user interface (GUI), and the real 3D model.
I think I have a much clearer idea of the process of doing design in this class project. More importantly, I learned a lot about environmental protection and sustainability related knowledge. This has inspired me a lot for my future work and research direction.
Clean energy is becoming increasingly important in our world today as we confront the challenges of climate change and the need to reduce our reliance on fossil fuels. A promising solution to help us transition towards more sustainable energy practices is the zero-energy house. This type of building is designed to generate as much energy as it consumes, resulting in zero net energy consumption over the course of a year. Zero-energy houses typically use a combination of energy-efficient design, insulation, and renewable energy sources to achieve this goal.
While zero-energy houses have the potential to significantly reduce carbon emissions and energy costs, they are not yet widely adopted due to a lack of understanding and awareness among the general public. Many people may not be familiar with the concept of zero-energy houses or how they work, which can hinder their adoption and the transition towards a more sustainable future.
The target group for my design project is middle school students. Middle school students have a unique background that makes them an ideal audience for this project. They are currently studying science subjects such as Physics, Chemistry, Environment, and Geography, which provide them with a foundational understanding of scientific concepts related to energy and sustainability. By targeting this group, I can build upon their existing knowledge and help them connect what they learn in the classroom to real-life applications.
The outcome I aim to achieve with these students is to enhance their understanding of the specific applications of physics, chemistry, environment, and geography in daily life. I want to demonstrate how these disciplines can be combined to create sustainable solutions, particularly in the context of zero-energy houses. By engaging them in hands-on activities and interactive learning experiences, I hope to stimulate their thinking and inspire them to contribute to society in the future.
I want to design a model of a zero-energy house that demonstrates how renewable energy can be incorporated into daily life. The model will feature a 3D representation of the house and an interactive GUI that allows users to select and experiment with various types of clean energy. This way, users will be able to see firsthand how the house operates and how clean energy can affect it. By improving understanding and visualization of clean energy, this project aims to promote the adoption of zero-energy houses and contribute to a more sustainable future.
The complete system includes three parts. The first part is the graphic interface part, which will be achieved and made by Processing. The second part is the hardware part (a model), which will be achieved by Arduino and 3D printing (possibility). The last part is the projector part, which will be used to show the changes the house can make if it is a zero-energy house. The interface will be designed to control and interact with the zero-energy building model. For instance, if the user chooses to add solar energy in the house, there will be corresponding reactions on the house model. Besides, the projector will project more green trees if users use more clean energy on the house model.
The introduction part of the GUI serves as a gateway to the world of zero-energy houses. It provides a concise overview of what a zero-energy house is and highlights its importance in reducing our environmental impact.
After introducing the zero-energy house, students can play with the house model with the wind turbine part, solar panel part, and heat pump part by themselves. This will give them a more vivid view and understanding about how zero energy really works on the houses and what these sustainable energy can make on the houses. There are two main parts.
The function of the first part is to give students a clear understanding of how clean energy works in a zero energy house. By providing detailed explanations and visualizations, students can understand the principles behind different types of clean energy, such as solar, wind, and geothermal. They will learn about the process of energy generation, conversion and utilization in a model of the house.
The primary function of the second part of the GUI is to demonstrate the benefits of clean energy for a zero-energy house compared to a standard house. Through detailed comparison between houses, students will gain insights into the advantages of clean energy technologies in terms of energy efficiency, cost savings, and environmental impact.
To better structure the model of the sustainable house, I used Fusion360 to built a model of the house and sketch all the components in my model.
The wind turbine part consists of four main components: a DC motor, a wind turbine model, 4 light bulbs, and Resistors. This is a simulation of the wind energy process. Wind energy is typically providing the house with electricity. So the light bulbs here are representing the electrical facilities in a house.
The solar panel will move based on the position of the lights. There are two Ambient Light Sensors. Arduino will compare the numbers that each Ambient Light Sensor transfers and make the motor move based on the numbers. Also, the red light bulbs will light up, representing the hot water coming down because of the solar energy.
The heat pump part consists of four main components: above ground part of the neon light tube, below ground part of the neon light, a mode converter , and a transformer and a button(inside the converter).
Food is essential for human health, growth, and development. However, children need more learning materials and motivation to receive food literacy education or know the fundamental food processes from farm to table. In this work, we explored the design of a prototype named WooGu with tangible user interfaces (TUI) and embodied interactions, which aims to improve young children's food literacy.
I expanded my proficiency in the use of Figma, Xcode (coding and design for iOS system), UI/UX design, and different sensors. Also, I improved my skill to design UI and UX and explore how to utilize all the sensors on a certain device (Apple Watch).
If I will do UI/UX design related work in the future, or if I will design UI in a research project, I think the experience of this program would help me a great deal. Because in this project, we did a more in-depth research on the users and the background of the game, and kept adjusting our UI/UX design according to the game device. It allowed me to constantly gain a deeper understanding of user needs and design considerations in the process.
Food is essential for human health, growth, and development. Knowing the food processes from farm to table can encourage children to make more informed food choices and appreciate the effort in food production, which also facilitates children's connection with the natural world.
However, traditional food literacy education for children (eg., school courses and workshops) primarily focuses on nutrition and lacks an explicit curriculum, suitable materials, or training to support children in learning where food comes from and how it is produced and processed.
Previous research has indicated that tangible user interfaces (TUIs) can significantly enhance students' task performance and learning outcomes. This is primarily due to the multi-sensory cues provided by tangibility, fostering more substantial and enduring engagement. Additionally, TUI prototypes have been investigated and implemented in the realm of food literacy education.
1. How to integrate embodied interactions in tangible user interface to facilitate children's learning of food knowledge from farm to table, learning outcomes, and engagement?
2. What are children's and parents' usability experiences of the game?
The name "Wugoo" is taken from the Chinese word "five grains" (五谷), which refers to five traditional grains, namely rice, broom corn millet, grain, wheat, and bean, and is also a general term for food. The name "Wugoo" symbolizes the importance and necessity for children to understand the process of how food is planted from seeds, grows into fruits, and is finally produced and served on the table.
In the game, we also decided to use the five foods of the five grains as the main body of the game, so that children can experience the process from seed to food in the context of traditional Chinese culture.
We are focusing on enriching children's understanding of farm-to-table food concepts through innovative tools and interactive experiences. To achieve this goal, we implemented specific design principles during the exploratory prototyping phase:
- Enhanced Sensory Engagement: Our approach centers around a Tangible User Interface (TUI) aimed at providing rich, multi-sensory feedback. Research shows that TUIs greatly benefit children's emotional development, learning processes, and social skills. To achieve our goal, we chose the Apple Watch as the interactive facility for the TUI because it can integrate visual, auditory, and tactile narratives to provide an immersive multi-sensory experience for children.
- Learning Through Physical Interaction: We emphasize the significance of embodied interactions for effective learning. Our user journey prioritizes physical engagement, encouraging children to interact with tangible props made from cardboard. This interactive and playful experience allows children to explore and engage with various tools, fostering a deeper understanding of the journey food takes from the farm to the table.
This project is still working in progress, we are optimize our UI and UX design and transfer the UI to Apple Watch using Xcode.
The brochures showcase the culmination of projects from a course that explores the intricate connections between computation, society, and culture. There are two brochures that summarize the programs for different school years. A total of eleven class programs are included in the brochure.
I expanded my proficiency in using Figma to do brochure design. In this project, I learned about typography, font types and sizes, image placement and sizes, and much more related to page design.
This project has taught me various details as well as techniques that need to be taken care of in page design. I think it will be very helpful for my career. Because in the process of doing UI/UX design, I will be able to pay more attention to the details of page design that can help the user to understand and use the interface better.
The brochures showcase the culmination of projects from a course that explores the intricate connections between computation, society, and culture. There are two brochures that summarize the programs for different school years. A total of eleven class programs are included in the brochure.
