Designing UI/UX Curriculum for Computer Science Students
This article is meant to be a companion piece to my portfolio project, UI/UX Curriculum for CS Students, which can be viewed here.
Create UI/UX designs and design curriculum that would supplement the students’ understanding of front-end programming.
Bring awareness to design principles to those not familiar with design (i.e. the students).
I made sure my designs used standard UI/UX design principles that are commonplace on the web, meaning that they’re principles the students should already be aware of (implicitly or explicitly). My job, in giving them these designs to implement, is to train their eyes, and make them actively notice what design principles are being used and where when interacting with websites.
- Nina gives me a prompt. We meet to discuss and clarify the prompt, and to create very low fidelity designs (read: pencil sketches) in person.
- I send a set of basic iterations to Nina and the other TA’s.
- Nina and the TA’s give me feedback on designs. Depending on the project we can a.) discuss whether components should be added or removed based on the students’ progress on their projects and/or b.) discuss what interactions should be represented by what interfaces (ex. Should the user close an overlay using a “cancel” button or clicking an “x” in the upper corner?).
- Once everything’s been worked out and Nina approves the design, I move on to higher fidelity iterations that include text, color, and images.
- I create a short 5–15 minute presentation and present to the lecture hall about my UI/UX designs, making sure to answer student questions after class.
What went smoothly?
Nina, the TA’s, and the students all trusted my knowledge on design and were never quick to question any of my design decisions simply because they didn’t understand it. I also trusted them (as users of web interfaces) to understand their interactions, and know what did/didn’t feel right to them, which allowed me to be open to their feedback even when I initially made a different design decision.
Since the class was relatively large, we (me, Nina, and the TA’s) used Piazza as a tool to communicate with our students. Students also used the platform to help each other when we didn’t have the time or capacity to answer all their questions. This was really helpful as some students had previous front-end coding experience and could support other students who were beginners.
What was challenging?
What do non-designers already know about design?
As someone immersed in the design world, it’s difficult to discern what knowledge people who live outside of that bubble have. What design knowledge is common sense (i.e. instinctively understood by non-designers) and what design knowledge only feels like common sense because of my design education (i.e. would not be immediately understood by non-designers)? I wanted to give students thorough explanations, but in a way that wasn’t patronizing.
To teach or not to teach?
Since UI/UX design was merely a subsection of the class (as in, the main focus of the class was to teach coding, not design), I had to be intentional in what concepts I decided to include in my designs, because whatever I included I wanted to be able to teach to the students. If I decided that a design concept would take too much effort / time / understanding to teach to the students, I would leave it out of my design (ex. font mixing).
Nina wanted her curriculum to be able to adapt to new coding softwares and practices, and to her students’ capacity to master the material within the time frame of the class (10 weeks). Thus, the curriculum was constantly changing; we added/removed components of projects based on students’ progress and Nina was often adding in new coding elements that she and the TA’s had to learn and test run right before introducing them to the class. Because of this, I also had to be ready to change and adapt my designs to the ever flexible curriculum, and sometimes we would have miscommunications about how concepts were supposed to work (which were usually solved through setting up in-person meetings, instead of communicating through email).
Breakdown of each project, including specific prompts and design decisions.
Assignment #1: Wayne Thiebaud
PROMPT: Create a website showcasing Wayne Thiebaud exhibit at the Manetti Shrem University Art Museum
Purpose: for students to learn HTML, CSS and Flexbox, and media queries.
- two layouts (desktop and mobile)
- on desktop the pictures should show up either all 6 in a row, 4 on top and 2 on the bottom, 2 rows of 3, or 3 rows of 2
- include a header and footer
Research: I researched multiple museum websites including the existing Wayne Thiebaud exhibit on the Manetti Shrem website and SFMOMA.
Knowing my audience: Since my audience were college students who were most likely immersed in Bay Area tech culture (think minimalism, bright pops of color, sans serif fonts, gradients, etc) I decided to integrate some of those elements into my design.
Fonts: Following the tech theme, I chose one sans serif font (through google fonts, so no problems would come up in their code). I chose not to mix any fonts because I didn’t want to overload the students by teaching them how to font pair (a more in depth concept not suited for the purpose of this class).
Colors: I color picked simple bold colors from Wayne Thiebaud’s paintings themselves so that the color scheme would match the exhibits’ colors.
I gave them several color and font options so that not all 150 students would have the same exact website as their final result.
The presentation I created to explain all of my design decisions to the students can be found here.
Assignment #2: Book Club
PROMPT: Create a website to search for books that uses a pre-existing database.
- landing page for search
- overlay pop-up (after search) displayed as a “tile” showing the book information for the first book
- include buttons for overlay pop-up (back, next, keep, close)
Research: I researched multiple websites that have search features including indeed.com, Google Books, and Airbnb, and used their UI as inspiration for this project.
For this design, I wanted to go even simpler just because the students were working on harder concepts now.
Since students were using an API for Google Books, I decided to use Roboto, Google’s official font, as well as color pick some bright colors based off of Google’s logo (blue, red, and green).
In my presentation, I tried to explain every design decision that I made, from why overlays should be transparent (so the user understands they’re still on the same webpage, and haven’t been directed to a new one), to why the user’s search should be repeated and bolded on the “not found” page (to give the user feedback / confirmation of what data they’ve entered). I’ve realized that design decisions that may seem intuitive and no-brainers to me wouldn’t necessarily be viewed that way to people who haven’t been immersed in a design environment. That presentation can be viewed here.
Final Assignment: PhotoQ
PROMPT: Create a photo searching website that automatically applies tags for each photo.
Purpose: for students to learn Google Cloud Vision API, React, SQL, and AJAX
- landing page for search
- visual design of the search function & how tags would appear when user was actively searching
- overlay on photos that would show tags (user should be able to add or remove tags)
Finding design solutions: This project was the most difficult in terms of figuring out the UI/UX. Some examples of design questions / solutions were:
- How should users select tags? Should they be clickable? What if a user thought they had to select the tag by pressing enter but instead initiated the search?
Our solution: the user presses tab or clicks on a tag to select it, and presses enter or the search button to search
- What if a photo has over 10 tags? Should there be a limit on the number of tags? When should the “add tag” button show up?
Our solution: limit number of showable tags to 7, and only show the “add tag” button when there are less than 7 tags
Research: I referenced websites that had drop-down search and tag functions including Google Images, Pinterest, YouTube, and Tumblr mobile.
- Intentional colors: At first, I made the tags more colorful, but after Nina asked about the purpose of the colors, I decided that it was better to make it more simple, with the exception of special “landmark tags” that were a slightly brighter color than the rest of the tags, to let the user know that this tag is different.
- User feedback cues: I also wanted to implement user feedback cues, i.e. let the user know what they’ve searched. At first, if a photo didn’t contain a specific tag, I would indicate that by showing that tag unfilled and with a strikethrough, in the same way that google lets users know what keywords are missing from each search result. However, that proved confusing so I opted for just adding a “You searched for” at the top of the search result, followed by the tags that the user input.
Teaching this class for a quarter was really rewarding. Since over 100 people were enrolled in ECS 162, I mistakenly thought that I would have no personal interactions with any of the students. However, many of them came up to me after my presentations to tell me they enjoyed my designs! It was an amazing learning experience (definitely for me, and hopefully for the students) that I’d definitely try again, if given the opportunity.