top of page

Undergraduate Advising App

10 Weeks

A web app allowing students to book appointments with advisors from different academic apartments through one single page.

Impact

A web app to centralize advising resources and optimize a scheduling tool for University of Washington students.

Role

User Research
UI Design
Front-End Development
User Testing

Tools

HTML / CSS

JavaScript

React.js

Firebase Hosting

Teammates

Apurv Goel

Kevin Yip

Overview

Design Process

Background

Looking at the existing general advising website for University of Washington undergraduate students here, we engaged in casual conversations with some undergraduate students. 

​

In general,

  • Students feel overwhelmed with the amount of information and links on the site

  • The booking tool is misleading because students cannot actually book appointments with advisers using it

  • The list of all academic departments was difficult to locate, and students couldn't book from this page either 

​

From these conversations, we gathered that the central design problem was that there was no central site for students to book appointments with advisors.

Brainstorming

brainstorming.PNG

We exercised rapid ideation to acquire a diverse list of possible interactive features for the web app. One constraint for this project was the need to design and implement at least two interactive features. Interactive features change the view of the web page in some way based on some sort of dataset. (We planned to use our own .JSON data) .

Personas

personas.PNG

Ideation

Each team member began by creating 1-2 hand-drawn, low-fidelity sketches of possible layouts for the advising webpage.

sketching.PNG

Prototyping

Our first prototype was created solely with HTML, CSS, and JavaScript. We also used mobile-first design principles to make this prototype fully responsive (compatible with a wide range of screen sizes).

​

View it here.

User Testing

Each team member asked 2-3 people to provide feedback on both the design and usability of our first prototype. Following this, we reiterated upon our first prototype by implementing their feedback.

 

Some comments our users gave us:

  • "I don't know how to get to the landing page from the advising page."

  • "It would be nice to automatically filter availability by the slider instead of clicking a button."

  • "The stars for favorites should be filled when selected."

Final Solution

Iterating upon our first prototype using the feedback we received from user testing, our final design used HTML, CSS, JavaScript, and added React.js and Firebase Hosting for data persistence. Some notable differences between our first prototype and final design was the navigation bar, which allowed for clearer organization of the website, and the overall improvement of our interactive features. We also integrated our web app with Firebase Hosting, so users could log in and save their data. The data saved upon logging out were the different departments each user favorited.

​

View our final web app here.

Takeaways

  • Learned how to collaboratively design and develop a web application from the ground up

  • Learned how to take critique and transform the feedback into realistic, actionable steps

  • User Testing is extremely important for effective iterative design

bottom of page