Course Spotlight: CS 147 & CS 194H

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?).

Team brainstorming sesh!

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.

Sketch of a gamified Flutter.
Low-fidelity task flow for one of our tasks: giving.

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.

Screenshots of our med-fi prototype.

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!

Screenshots of our hi-fi prototype

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.

Team Flutter at the CS 147 Final Project Expo. We won best demo!

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.

Some final Flutter task flows.
Our final concept video!

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stanford Women in Computer Science

Stanford Women in Computer Science

Stanford Women in Computer Science is a student organization that aims to promote and support the growing community of women in CS and technology.