HuskySwap

Create your dream schedule

Mobile app interface for class section trade requests, showing sections INFO 200, Section AA, and Section AB with trade options.
Trade Matcher app interface on a mobile screen, showing user profiles with course trade options, including 'Parker Huang' offering INFO 200 AB and requesting INFO 200 AA, and 'Karen Castillo' offering CSE 121 AA and requesting CSE 121 AG.

Overview

For a class project, my group and I designed an app which enables students to trade courses and sections with one another.

My Role

UI/UX Designer
Team Lead
UX Researcher

Timeline

6 weeks

Tools Used

Figma, Miro, Photoshop

Team Members

Sammy Bharadwaj, 
Parker Huang
Oscar Wang

What’s the problem?

Students can’t get the classes that they want

At the University of Washington, many students encounter a recurring challenge each quarter: not being able to secure the classes they desire. This issue can significantly impact their academic progress. Unfortunately, UW’s existing system for notifying students about open class spots is inefficient. As a result, we have been assigned the task of devising a more effective solution to address this problem.
Smartphone screen showing a university course registration page for INFO 464. The course is scheduled for Winter 2024. A red circle highlights that the course is closed with 0 available spots out of 35.

"As a UW student aiming to graduate on time with essential major courses, I experience stress due to unpredictable course availability. I am actively seeking a solution to stay on track academically."

Our Solution

A course trading platform

After conducting preliminary research, we concluded that a course trading application would serve as the optimal platform for college students to engage with our concept. Husky Swap is an application that allows students at the University of Washington to trade courses and sections between one another seamlessly, allowing students to get the classes they want each quarter, securing a timely graduation and reducing unnecessary stress 

Interviews

What do other students think?

Our team conducted a series of in-person interviews with local students in our class and dorms to understand student opinion on the current registration system.

Our aim was to identify pain points, validate assumptions and build empathy

Quotes from students about registration issues, expressing frustration with class availability and scheduling conflicts.
Illustration of a person holding an email icon, standing next to a large purple chat bubble with quotation marks, in front of a window and wall decor.

Findings

The more feedback the better

We obtained a sample of 50 UW students through classes and friends and sent our a survey on thair opinions on a course trading platform. As seen by the graph around 60 percent of the students are not too satisfied about the registration system and 80% of students think a platform to trade courses would be useful 

Do you think a platform to trade courses would be useful?

Color-coded options for evaluating course exchange benefits: purple for beneficial, orange for maybe, white for unsure, red for not beneficial.
Pie chart with three segments: 80% purple, 15% orange, 5% red.
Bar chart with purple bars displaying percentages for categories 1 to 5: 1% at 0%, 2% at 20%, 3% at 60%, 4% at 10%, 5% at 10%. Black background.

On a scale from 1-5 how do you feel about the current course registration system

5 - Flawless

4 - Works most of the time

3 - Can be annoying sometimes

2- Is very annoying

1 - I want to transfer schools

Personas

Understanding Our Users

Drawing insights from user interviews and an online survey, we crafted two distinct user personas. These personas allow us to delve deeply into the motivations and needs of our intended audience
Illustration of a cartoon character with glasses and a beard, alongside text about John, a UW sophomore seeking an internship and needing help with a course. The text suggests using a course trading platform.
Illustration of an animated character labeled "Aisha, the graduation-oriented student," facing course registration challenges in her final year at UW, with potential solutions through a course trading platform.

Ideation

Initial Sketches

As a group we came up with some initial sketches for how the system of our product will work. For this ideation session, we worked based off of our user research and the personas we had created. 
Once we looked over our sketches, we decided that a mobile app would be the best way to go with our product as it is the most accessible to students and the content of our system would be simple enough to just require an app and not an entire website. 
Sketches and wireframes for a mobile app concept focusing on course trading and recommendations. Includes interactive course map, course tokens, course trading list, and priority indicators. Handwritten notes and diagrams illustrate user flow and app functionality.

Design Requirements

What features do we need?

Now that we had narrowed down the platform, we had a brainstorming session where we agreed on some of the main features for our app. We took insights from our user research in order to create features best catered to users needs. This initial list helped us guide the rest of our design process: 
This page allows users to select the courses they want to send to the trade matcher(Feature #2). Users can search courses and also specify the classes they already have. 

#1

Selecting Classes

After sending  selected classes to the trade matcher, users can check two tabs: one displaying the best matches for you and another listing all matches (where at least one class aligns with your preferences).

#2

Matching Users

Essential for communication during trades. Enables users to discuss specific trade details with their counterparts. 

#3

Messaging

Illustration of a woman interacting with a giant smartphone displaying a profile page, surrounded by gears and plants.

Information Architecture

Visualizing the User Flows

Flowchart of an online platform process for course trade. Starts with Welcome Screen and Sign-up, proceeds to Home Page, includes options for Registration, MyPlan, View Schedule, Advising, Trade Requests (I want/I have), Trade Matcher (My matches/All Trades), and Trade Chat (Send message, Accept/Decline Trades). Legend explains symbols: Single Page, Tabs, Action.

Wireframes

Low-Fidelity

Guided by our sitemap, we translated its structure into low-fidelity wireframes. These wireframes provided us with a clear understanding of the design’s functionality and the user-app interactions
Mobile app interface for HuskySwap showing welcome screen, login page, trade matcher, trade requests, chat list, and chat conversation.

Feedback

User Testing Evaluation

To evaluate our initial prototype, we tested our low-fidelity prototype on students at the University of Washington and in our classroom. We presented each user with a set of tasks and then an interview at the beginning and end of their testing, observing pain points, user work-flow, and general functionality of the app. 
Some changes we implemented based off of feedback: 
  • A 'section' tab where users can trade sections. I recognized and confirmed through student interviews that enabling class section trading is more useful than just trading classes.

  • Using more specific button icons for our tabs to   ensure that there is no confusion

  • Implement a feature allowing users to cancel their trade post submission

  • Informed users that their schedule auto-connects after logging in via UW MyPlan, displaying only compatible classes in the Trade Matcher.

Illustration of two people interacting with a large smartphone interface, surrounded by gears and digital elements, symbolizing technology and app development.

Final Design

Putting It All Together

After carefully evaluating the design modifications stemming from our low-fidelity prototype, we proceeded to incorporate them into our high-fidelity design. 
As the sole member in our group with a design background, I took the role of the UI designer for our product. Leveraging Figma, I crafted a user-friendly and dynamic interface that strikes a balance between cleanliness and vibrancy for our app.
Mobile app login screen for Husky Swap, featuring "Create your dream schedule" and a "Log in with UWNetID" button.
Easy Onboarding Process 
Mobile app interface for HuskySwap, showing a user profile with student information, major in Informatics, and minor in Data Science. Features include course search, registration, schedule view, and advising. Course recommendations are listed below.
Adding a trade request
Mobile app interface for class trade requests showing 'I want' and 'I have' sections with trade options and a button for matching trades.
Sending classes to trade matcher page and accepting trade request 
Mobile app interface for 'Husky Swap', a course trading platform for students. Features include user profile, course recommendations, trade requests, chat with other users, and trade confirmation.

Reflection

What did I learn?

  • With this being one of my first end-to-end UX case studies, I came to the realization that the significance of UI design is not paramount compared to other aspects of the project. Through constructive critique, I gained a valuable understanding that user feedback and research play a pivotal role in shaping the design decisions. As a designer, our primary objective is to cater to the needs of users, and this insight has become a guiding principle in my approach to UX projects.
  • After multiple iterations of my design, I discovered that achieving a final design is an ongoing process. No matter how many changes and versions I create, the design will never be final. User feedback, often diverse and sometimes conflicting, constantly shapes the evolution of the design. Despite this, as the designer, the ultimate decision on design choices rests with me, but it's crucial to recognize the significance of feedback and testing, as they consistently prove to be valuable and guide the refinement process.