Designing UI/UX Curriculum for Computer Science Students

[image description]: sneak peek of the final assignment for this project. there are 2 browser mocks next to one mobile mock. the first browser mock shows the user searching something, the second shows the search results. the mobile version also has those same search results. all three mocks are on top of a light blue background.

This article is meant to be a companion piece to my portfolio project, UI/UX Curriculum for CS Students, which can be viewed here.

In Spring of 2018, I became the design teaching assistant for ECS 162, a computer science class lead by Professor Nina Ameta that teaches CS students various front end programming languages like HTML, CSS, and JavaScript.

My Goal:

Create UI/UX designs and design curriculum that would supplement the students’ understanding of front-end programming.

I made my designs just complicated enough that the students learn how to implement design decisions for themselves, but still simple enough to not be overwhelming, and to allow them to focus mainly on the function of their website (ex JavaScript, APIs) rather than the form (ex HTML & CSS).

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.

General Process:

  1. 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.
  2. I send a set of basic iterations to Nina and the other TA’s.
  3. 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?).
  4. Once everything’s been worked out and Nina approves the design, I move on to higher fidelity iterations that include text, color, and images.
  5. 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?

Trust. 
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.

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

Quick Changes
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

[image description]: assignment one mockups. one browser mockup, one tablet mockup, and one mobile mockup. all mockups have the same design, but in different layouts. each mockup contains text about wayne thiebaud’s work and pictures of his paintings. the main color is a dusty pink.

OVERVIEW

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.

Components:

  • 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

DESIGN DECISIONS

Research: I researched multiple museum websites including the existing Wayne Thiebaud exhibit on the Manetti Shrem website and SFMOMA.

[image description]: research. three screenshots of SFMOMA’s website

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.

[image description]: branding. on the left is written Montserrat Bold and Montserrat Light (with their respective fonts), on the right are 3 sets of colors, one pink/burgundy, one light blue/navy, and one yellow/burnt ocre

The presentation I created to explain all of my design decisions to the students can be found here.

Assignment #2: Book Club

[image description]: assignment 2 mockups. one browser mockup and one mobile mockup. the design has a white header with blue text that contains the search function to the website. below it are books the user has presumably searched for. each search result contains the cover of the book, the title, the author, and a description of the book.

OVERVIEW

PROMPT: Create a website to search for books that uses a pre-existing database.

Purpose: for students to learn JavaScript, Google Books API, and JSON

Components:

  • 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)

DESIGN DECISIONS

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.

[image description]: research. three screenshots; two of indeed.com (landing page and search page) and one of google books search results.

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

[image description]: branding. on the left is written Roboto Light, Roboto Regular, and Roboto Bold, all in their respective fonts. on the right are 5 colors: bright blue, light gray, white, bright red, and bright apple 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

[image description]: final assignment mockups. two browser mocks and one mobile mock. the first browser mock shows the user searching something, the second shows the search results. the mobile version also has those same search results.

OVERVIEW

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

Components:

  • 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)

DESIGN DECISIONS

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.

[image description]: research. 5 screenshots; one of pinterest’s search function, one of youtube’s search function, one of google images search results, and two of tumblr mobile search and tag features.

Re-evaluating designs:

  • 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.
[image description]: two browser mocks. both show the search function of photoq. the one on the left shows the “before” mockup, where tags are shown in multiple colors whereas the one on the right shows the “after” mockup, where tags only have 2 colors (both blue).
  • 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.
[image description]: two browser mocks. both show the search function of photoq. the one on the left shows the “before” mockup, where photos without a tag shows the tag with a strikethrough whereas the one on the right shows the “after” mockup, where the strikethrough tag is removed, and instead says “You searched for” at the top of the search results.

Conclusion

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.