University of California, Davis
Course Articulation Website
University of California, Davis (UCD) Computer Science Department wanted to streamline and modernize the course articulations process
View Work


Lead Designer + Full Stack Developer
20 weeks


Collaborated with
3 Full Stack Developers

What Made Me Unique

Only full stack developer in the team with experience and interest in UX design.

Key Responsibilities

Led the design efforts including redesigning the department's end-to-end course articulation process and designing mockups to guide the development work.

Developed majority of the front-end components, along with the back-end of a variety of features, and shipped website.

User Research

Conducted user interviews to learn about the current process, tools, pain points, and opportunities

MVP Definition

Brainstormed solutions, developed use cases, and prioritized features to define MVP and project plan

Process Design

Redesigned end-to-end course-articulation process to guide website information architecture and permissions


Prototyped mockups of the website and iterated upon designs based on feedback from user testing

Full Stack Development

Developed front-end and back-end components and performed front-end QA for the team


Every UCD department deals with course articulations differently. The Computer Science Department follows the most common process, which is handling the entire course articulation process through email. My team was tasked to create a website to modernize and streamline the process for the Computer Science Department (and potentially other departments in the future).

Course Articulation
A mapping of one institution's course to another


The challenge statement of the project was —

How might we streamline the course articulation process from outside institutions to UC Davis Computer Science course credits?


The project was scoped for 20 weeks to have a fully functional MVP, where we focused 4 weeks on design and 18 weeks on development (including debugging).

Current Process

During the first few weeks of the project, majority of my time was spent with the client and other stakeholders to understand the current end-to-end course articulation process and all the different users involved. I wanted to ensure we understood the process fully, before performing any major development work.


The course articulation process revolves around 3 different users.

  • Student — Transfer student who wishes to articulate course they have taken at a previous University
  • Advisor — Department advisor who handles students' articulations
  • Instructor — Department instructor who must approve/deny articulations to the courses that they teach



2nd year student @ SJSU
Wants to transfer to UCD

Needs to check which SJSU computer science courses are transferable to UCD


  • Emails advisor regarding course articulations of all previously taken courses
  • Provides any additional information regarding articulated course, if requested



UCD Computer Science Department advisor

Needs an easy way to manage and track students' course articulation requests


  • Tracks articulations on a spreadsheet
  • Acts as a liasion between students and instructors
  • Reminds instructors of pending requests
  • Notifies students of updates



Teaches intro to programming and machine learning

Needs to be able to track course articulation requests and approve/deny requests


  • Reviews submitted case articulation request
  • Requests additional information from student, if needed
  • Approves or denies request with valid explanation

User Interviews

After several conversations with the client, I decided to reach out to the different users and conduct interviews to learn more about their experiences and get a deeper understanding of the current process.

We conducted a total of 5 interviews

  • 2 Students
  • 1 Advisors
  • 2 Instructors

Current Process

With the information from the client and the interviews, we were able to piece together the current end-to-end course articulation process.

The current process is performed purely through email starting with a student reaching out to an advisor regarding course that they previously taken.

In short,

  1. Student emails Advisor with information about the courses
  2. Advisor forwards the information to the Instructors
  3. Instructor approves/denies the articulation and informs Advisor
  4. Advisor informs Student of approval/denial

Pain Points

During the interviews, we learned about pain points that each user has/had about the current process.

Key insights include:

  • Long turnover times, due to busy instructors and inefficient communication
  • Missing data in articulation database, due to lack of standardization




  • Long turnover times that ranges from several weeks to 3 months, due to slow faculty response times
  • Has to constantly email advisor for updates on the request




  • No standardization in articulation requests causes missing data in spreadsheet
  • Lack of explicit expiration dates of articulations
  • No paper trail of interactions in case of audits, due to purely email communication




  • Often too busy with courses to worry about articulations
  • Strings of emails causes difficulty in tracking articulation requests
  • Reminders regarding articulations get forgetten and lost in their inbox

A major pain point revolved around the communication loop between the student, advisor, and instructor. The advisor acting as a liasion between the students and instructors played a part in delaying articulations, causing turnover times to commonly range from several weeks to several months.

Another pain point was the passed down spreadsheet database of course articulations. Due to the lack of a standardization, the information varied as different advisors throughout the years requested different information from students, resulting in missing information and fields.

Important missing fields included:

  • Articulation date
  • Syllabus
  • Instructors who approved/denied articulation

MVP Definition

User Stories

After fully understanding the current process, the users, and all the painpoints, our team came up with user stories to determine the features to design and builld.



As a student, I want to...

  • search articulations to check if my course has been previously approved/denied
  • submit a articulation with required documents
  • check my articulation status
  • communicate with instructors and supply additional information



As an advisor, I want to...

  • check existing articulations
  • modify completed articulations
  • update database (new instructor, new course, etc)
  • check the status and activity of articulation requests
  • notify instructors of pending requests



As an instructor, I want to...

  • view submitted articulations for my courses
  • approve/deny requests and provide a rationale
  • communicate with students and request information
  • discuss with other instructors regarding articulations

Feature Prioritization

Our team brainstormed features based on the requirements and user stories and grouped them in 4 prioritization categories: must have (MVP), should have, could have, and won't have.

Must Have

  • Searchable articulation database
  • Articulation form with standardized requirements
  • Ability to edit and delete articulation requests
  • Email notifications

Should Have

  • University database along with feature to add University, if it's not in the database
  • Messsaging system between solely faculty and between students and faculty

Could Have

  • Mobile-friendly website
  • Global and push notifications
  • Student profile
  • User guides

Won't Have

  • Algorithm to compare course descriptions and estimate percentage match to inform approval/denial

User Flows

We worked together with the client to redesign the end-to-end course articulation process and created user flows that displayed how the users interacted with the website and one another. We also mapped when notifications would be sent in the process and the users that would receive them.

Key changes in the process

  • Public access to existing articulations
  • Standardized articulation form
  • Automated email notifications
  • Direct messaging system between users

Information Architecture

I created an information architecture diagram to map out each functionality and phase of the articulation process to a page. We also mapped the different components on the page and the user permissions of each component.

This was a living document and was continously updated and referenced, everytime we started developing or designing a new feature.



While the team was setting up the back-end of the website, I was in charge of creating designing wireframes and sharing them with the client in the beginning few weeks.

User Testing

Throughout the design phase, I conducted A/B and usability testing with the client and user, resulting in iterations and discovery of new requirements and reevaluating our feature prioritization list.

Final Product

At the end of the fourth week, I had high-fidelity wireframes that were approved by the client and received positive feedback from users.

Below are a few of those screens.

Full Stack Development

The whole development process took ~18 weeks, with the final 3 weeks dedicated to debugging. The team split the work amongst ourselves through different features . We were able to finish all of the features in the 'Features' section (except the Won't Haves).

The website is deployed with Nginx and GUnicorn, while using Django as the website framework. We also used SQLite as our database to handle articulations.


The website development was handed off and taken over by the client in June 2018 and was released to the public in Fall 2018.