top of page
Frame 2988 (1).png

Grad Tracker

Project Description

Grad Tracker is an application designed to help college students stay on track with their graduation requirements. The app allows students to easily find and track their core and major requirements and determine which courses they still need to take in order to graduate. It also estimates how much time the student has left until graduation and provides suggestions or pathway to graduation. This app helps students easily monitor their progress and plan their course of study to ensure they graduate on time. With Grad Tracker, students can stay organized and on top of their academic requirements, giving them peace of mind and a clear path to graduation.

Problem

Grad Tracker addresses several key problems that college students often face when trying to navigate their way to graduation. One of the main issues is the lack of a centralized system to help students keep track of their major and core requirements. Without such a system, students are forced to manually check requirements and figure out what requirements they already have and which they are missing. This can be a time-consuming and confusing process, and it is very easy for students to mess up and miss important requirements. Additionally, many students find it difficult to get hold of their advisors and often receive conflicting information from them. Grad Tracker solves these problems by providing a user-friendly, centralized platform for tracking academic requirements and progress, as well as giving suggestions and pathway to graduation, making it easier for students to stay on track and graduate on time.

Solution

Grad Tracker was designed to solve the problem of helping college students navigate their way to graduation by providing a centralized platform for tracking academic requirements and progress. The app was created with the following features and functionality in mind:

​

  • Core and major requirements: The app allows students to easily find and track their core and major requirements and determine which courses they still need to take in order to graduate.

​

  • Time until graduation: Grad Tracker also estimates how much time the student has left until graduation.

​

  • Suggestions and pathways: The app provides suggestions and pathways to graduation, helping students to plan their course of study and stay on track.

​

  • Easy to use: The app has a user-friendly interface, making it easy for students to access and use the information they need.

Timeline

My Role

Skills

2 weeks

Front-end developer

UX designer

Firebase

Flask

HTML

Python

JS

CSS

Design Thinking Process

icons8-bullseye-96.png

Design objectives

  • Define the problem

  • Target Audience

  • Pain Points

icons8-magnifying-glass-tilted-left-96.png

Research

  • Understanding the problem & User

  • Persona

icons8-bar-chart-96.png

Analysis

  • Summary of data gathered

  • Main themes and insights

  • Journey map of the experience

icons8-light-bulb-96.png

Ideation

  • User Flows

  • User Stories

  • Sketches

icons8-mobile-phone-96.png

Tesing

  • Lo-Fi wireframes

  • Hi-Fi wireframes

  • Design Systems

icons8-test-tube-96.png

Testing

  • User testing, expert review, etc.

  • Feedback intake

  • Accessibility review

Persona

Frame 9.png

User Journey Map

HW1 (2).png

Low Fidelity Prototype

New Wireframe 1 (1).png

Design System

Frame 3000.png

High Fidelity Prototype

Frame 2999 (1).png
Frame 3002.png
Frame 3001.png
Frame 3003.png

Final Designs

Grad Tracker's design focuses on providing students with a streamlined and intuitive interface that is easy to navigate.

One of the key UX techniques used in the design of the app is information architecture. This involves organizing the app's content and features in a logical and meaningful way, making it easy for users to find what they need. This is accomplished by using clear labels and headings and by providing clear pathways for users to follow.

​

Another important UX technique used in the design of Grad Tracker is user-centered design. This approach puts the user at the center of the design process and focuses on understanding their needs, goals, and pain points. By understanding the user's perspective, the application is able to provide personalized suggestions and pathways to graduation that meet their specific needs.

​

In addition, Grad Tracker uses the Firebase Real-time database, which is a flexible, scalable NoSQL cloud database to store the user's data. Firebase allows for real-time data syncing and easy integration with mobile apps, making it a great choice for Grad Tracker. This allows for all of the user's data to be stored securely and to be easily accessed and updated by the user when needed.

Takeaways

The Grad Tracker project was a valuable learning experience for me as a front-end developer and UX designer. One of the key takeaways was the importance of prioritization and time management. Due to the tight deadline, I had to carefully select which features were most important to include in the final design and forgo some of the additional functionalities that I had initially wanted to implement.

​

Another important aspect of the project was the use of various UX techniques to design the app. From user research, personas, user journey mapping, and wireframing, I was able to gain a deeper understanding of the user's needs and pain points. This helped me to create a user-centered design that addressed their needs and made the app easy to use.

​

Working as both the UI designer and front-end developer also presented its own set of challenges. I had to balance the aesthetics of the design with the technical feasibility of the features. The use of firebase as a database to store all user input was a great solution in terms of scalability and real-time updates.

​

Overall, the Grad Tracker project was a great opportunity for me to apply my skills and grow as a front-end developer and UX designer. The project taught me the importance of user-centered design, time management, and how to balance technical feasibility with design aesthetics.

bottom of page