Role

Lead Designer + Full Stack Developer
20 weeks

Team

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.

Timeline

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.

Users

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

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

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.

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.

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.

Prototype

Wireframes

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.

Future

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