Novice web developers want to build complex and intricate layouts, but often lack the knowledge of Cascading Style Sheets (CSS) needed to select the best techniques.

Busy individuals hope to make meaningful connections with people and make new friends, but the COVID-19 pandemic has made spontaneous interactions even more difficult.

Students in Northwestern Engineering’s Design, Technology, and Research (DTR) program identified these two problems, and the practical technology solutions they developed earned top awards in the Undergraduate Category at the Association for Computing Machinery (ACM) Computer-Human Interaction (CHI) 2022 Student Research Competition held in New Orleans.

Fardeem Munir, a third-year undergraduate in computer science at the McCormick School of Engineering, and Roxanna Wilcox, a fourth-year undergraduate student in computer science in Northwestern’s Weinberg College of Arts and Sciences, won first place for their project “Knowledge Maps for Building Conceptual and Transferable CSS Knowledge.”

Cindy Hu, a third-year undergraduate in computer science at Northwestern Engineering and in communication studies at Northwestern’s School of Communication, won second place for the project “Self-Disclosure for Early Relationship Development through Situated Prompts in Opportunistic Collective Experiences.”

“I am really proud of Roxy, Fardeem, and Cindy. In many ways, their project success mirrors their personal growth through their participation in DTR. It’s really wonderful,” said Haoqi Zhang, associate professor of computer science and design at Northwestern Engineering. Zhang is director of DTR and codirector of the Delta Lab, an interdisciplinary research lab and design studio.

A Northwestern Computer Science, Segal Design Institute, and Delta Lab education initiative, DTR is a fast-paced, multiple-quarter course structured around students learning to self-direct their own research projects within a supportive community. Students learn to lead research projects while also learning about their own work processes and metacognitive blockers, leading to both project progress and personal growth over time.

Assisting novices with expert-level insights

Munir and Wilcox built the Knowledge Maps (KM) tool to train novice web developers to build transferable and conceptual knowledge of CSS techniques.

“This is important because web developers often only learn how a CSS technique is used in the one example it's presented in and have trouble applying that technique to new contexts,” Wilcox said.

In the explore phase, learners use a custom CSS editor to interactively examine examples of professionally designed websites and discover how CSS techniques are employed to produce specific visual outcomes. Users then create a generalized knowledge structure called a knowledge map to categorize the visual outcomes of those sites and match the features with the CSS techniques responsible for producing them. The process helps users understand use cases and tradeoffs of various CSS techniques.

Munir and Wilcox tested their platform by measuring the performance of seven notices who used the KM platform with that of six novices trained with conventional CSS tutorials. The KM users identified the appropriate CSS to build a set of layouts with a 48 percent increase in accuracy, compared to a 15 percent increase for non-KM users.

“The research shows that better resource design can lead novice developers to gain expert-level understanding of topics faster and with less experience,” Munir said.

Wilcox said the generalized knowledge structure has potential applications beyond CSS training.

“The Knowledge Maps methodology can be used to teach a variety of web development techniques, programming languages, and more to provide better learning tools for CS students,” Wilcox said.

Munir also suggested that the project provides a more nuanced understanding of the idea of expertise.

“The surface level understanding of expertise is that you need to put in years of work to become an expert,” Munir said. “Knowledge Maps demonstrates that you can extract the deep knowledge of an expert mind through carefully designed tools.”

Zhang co-advised the KM project with Gobi Dasu, a PhD student in computer science at Northwestern Engineering.

Facilitating spontaneous interactions

Mindful of the anxiety that makes initiating connections and developing friendships with new acquaintances challenging, Hu designed Cerebro, a context-aware mobile app that encourages self-disclosure between strangers by engaging users in opportunistic collective experiences (OCEs) with situated prompts.



Cerebro identifies interaction opportunities through location tracking and prompts the user with suggestions to post situation-based photos and captions for common daily settings, such as restaurants, coffee shops, or public transportation. For example, Cerebro might prompt a user at a restaurant with a notification “Enjoying your food and the ambience? Take a picture and caption with your review.” 



Once two users have submitted input to the same OCE prompt, they can view each other’s content and can start a conversation based on the common ground of their shared experience.

Hu collaborated with co-advisers Zhang and Ryan Louie, a PhD student in the Technology and Social Behavior Program.

Advancing the state of the art through research

Undergraduate students in the DTR course work on independent research projects at the intersection of human-computer interaction, social and crowd computing, learning science, artificial intelligence, and design.



The course is designed to be repeated —Munir completed two DTR sessions and Wilcox has participated for three quarters — and students delve progressively deeper into the process of exploring and iterating designs, building and scaling prototypes, deploying systems, conducting user studies, testing key hypotheses, analyzing collected data, and reviewing existing research.

Students build design, technical, research, and communication skills, and benefit from the opportunity to collaborate with and mentor other DTR students. Wilcox noted her positive experience with Munir. 



“We have really different strengths,” Wilcox said. “Fardeem is a coding genius while I have more of a liberal arts background which made us stronger as a team and allowed us to learn from one another.”

Munir agreed that he and Wilcox worked together well as a team.

“The KM system uses technology I am familiar with so we could make iterations on the tech side and test out new ideas super quickly,” Munir said. “Roxy asked really good questions and kept the work focused. She was very effective at choosing the highest leverage actions to maximize progress on the project.”  



Wilcox joined DTR on the recommendation of Abizar Bagasrawala (BA/MS ’21), the CS mentor she was paired with during her second year. 

“The most valuable part of DTR has been learning how to proceed and make decisions when I hit a roadblock. I often get paralyzed by indecision because I’m worried about making the right choice for the project, but DTR has taught me that any step forward is helpful even if I don’t always make a perfect choice,” Wilcox said. “Moving in the wrong direction for a week can help me get closer to finding a solution because it usually gives me more data and reveals something about the project I wouldn’t have realized if I hadn’t gone in that direction.”

DTR is such a special place on campus that it's hard to describe to anyone who isn't in it. I think it would be quite hard to find a community that has more intelligent, hard-working, caring and thoughtful people. Fardeem Munir Third-year undergraduate in computer science at Northwestern Engineering

Similarly, Munir learned of the DTR program through discussions with several Northwestern CS students during his first year. The self-directed, autonomous nature of the course taught Munir to have conviction in and execute his ideas.

“DTR is such a special place on campus that it's hard to describe to anyone who isn't in it,” Munir said. “I think it would be quite hard to find a community that has more intelligent, hard-working, caring and thoughtful people.”

Wilcox is graduating in June and plans to work as a software engineer at Google in New York.

“Long term, I’m open to what I’ll end up doing, but I’d like to be a director or a leader in some way," Wilcox said. “I really enjoyed leading this project and have definitely gained more confidence in my abilities as a result.”



After he graduates, Munir aims to join an early-stage startup experiencing hypergrowth and learn to lead high-impact engineering teams. His long-term goal is to start his own company.