Course Spotlight: CS 147 & CS 194H
by Jenny Zhi
In my earlier article about working on side projects, I mentioned working on an app called Flutter in CS 147 and CS 194H. Flutter was a big team project: I worked with wonderful WiCS members Chloe Barreau and Cynthia Liang for two quarters, as well as the amazing Amy Xu and Taylor Bacon for one quarter each (love them all ❤️). We made significant progress in these two quarters, and I thought it would be a good idea to go over the process and share a little about what I learned about design and development.
CS 147 (Introduction to Human-Computer Interaction) and CS 194H (User Interface Design Project) are taught by James Landay. CS 147, usually offered in the fall, is a large class of more than 100 people, and goes over needfinding, brainstorming, and prototyping. Those teams who really want to continue fleshing out their project from CS 147 have the option of continuing in CS 194H. This class is a smaller 20 people, and focuses more on testing and development.
Starting in CS 147 in the fall, our team was in a section focused on living spaces. We began with needfinding, and after interviewing people around Stanford campus and the surrounding area, found that people had a lot of clutter in their homes, primarily because people assign sentimental value to their things (who knew?).
We then began brainstorming — and this is the famed design thinking process. It involved a lot of post-it notes and markers, and a lot of questioning of our interviewee’s mentalities and brainstorming how we might change their decluttering experiences. And this is when we landed on the first iteration of Flutter: we wanted to integrate storytelling into the giving process in order to ensure emotional security in the decluttering process.
From here, we started prototyping. First we sketched out different ideas. We played around with maps and timelines, and when we landed on something we liked, a feed of sorts, we created a low-fidelity paper prototype. Prototype fidelity refers to the level of detail: this was supposed to be quick.
With the low-fi prototype, we ran a couple rounds of lighting usability testing, and with the feedback we got from that, made a medium-fi prototype using Figma. This was a higher level of detail than the low-fi prototype, without having to actually code anything.
We continued to iterate on this until we landed on an interface we liked — and then we started coding our hi-fi prototype. For the hi-fi prototype, we used React Native (I’m a loyal Android user and wasn’t about to relinquish usability for myself). This was a two-week period of hardcore coding (I pulled maybe two all-nighters), but we ended up with a prototype that was fairly functional!
This was the end of our work in CS 147, and we closed it off by participating in the Final Project Expo. It was super interesting to see all the apps that other teams worked on — and Flutter also won best demo, which was exciting.
After a restful winter break, Team Flutter reassembled for CS 194H. CS 194H was primarily a project class, and so the focus wasn’t so much on learning about design processes, but about really pushing the project forward. This was ten weeks of continuous iteration between usability testing and more development. We came out of the class with a completed Flutter with both a beautiful user interface and a functional backend.
Working on Flutter through CS 147 and CS 194H was an especially exciting process of creating something completely from scratch. Seeing Flutter change and grow from start to finish also allowed me to really hone my development skills as well as figure out my styles of working, both individually and in teams. The experience was exciting and instructional, and I highly recommend taking the sequence!
