An dynamic academic planner for students

(sponsored by Workday, Inc.)

Aplanner can help students plan courses and get career insight in a long run

Deliverables

UI and UX

My Role

Design, Animation,
and User Testing

Co-workers

Di Chen

Menyao Lyu

Yijun Shao

Platform

iOS

wifi

Get insight into your interested academic path

You can know what courses lead to an academic path you are interested. User that as a guide when you want plan your courses!

wifi

Know any time conflicts and unfulfilled prerequisite while planning

On Scheduler tab, you can know any time conflicts/ unfulfilled requirements for the course you chose

wifi

Master prerequisite requirements with other key information of a course

On course detail page, you can see a list of nicely visualized prerequisite information as well as other regular information of a course

Learn more design story about Aplanner

wifi

User Research

We interviewed 9 students around campus to understand how they plan their courses in general and specific problems they face.

Persona

wifi

Eric

A graduate student at Cornell

Pain Points

He can only plan his courses for one upcoming term on the current course website

He had hard time understanding prerequisite requirements on the current website

He often finds it hard to plan courses towards an academic track of interest

Needs
wifi

know any time conflicts and unfulfilled prerequisite requirement while planning courses

wifi

Understand prerequisite requirements in an easy-to-read and effortless manner

wifi

Get insight into possible course combinations in the academic path I am interested in

Current Solutions

We compared three popular academic planner apps in terms of their features.

wifi
Pocket Schedule
Planner
wifi
Homework App
wifi
myHomework
Student Planner
Dynamic course planning wifi wifi wifi
Unfulfilled prerequisite information wifi wifi wifi
Course planning based on academic topics wifi wifi wifi

Conclusion

wifi

Dynamic course planning

Our app needs to enable users to "play around" with different choices of courses and prerequisites.

wifi

Easy-to-understand prerequisite info

Users should be able to interact with prerequisite requirements in a visual and easy-to-understand manner

wifi

Academic track specification

Our app will allow users to view the path of courses planning needed to focus on a specific academic area.

Ideation

Dynamic course planning

With dynamic course planning feature, users can know if a course can be taken based on prerequisite requirements she has fulfilled.

wifi
Displaying prerequisite requirements

We wanted to use this cascading layout to display prerequisite requirements to improve their readability and each course tabs should be clickable.

wifi
Academic track specification

This feature is to help students answer the question "what courses should I take if I want to be a data scientist?"

wifi

Low-fi Prototype

Landing

wifi
wifi

Course

wifi
wifi

Planner

wifi
wifi
wifi
wifi

Profile

wifi
wifi

Color Scheme

We wanted to use a blue-green color as our primary color because we wanted to create an academic while funky tone of our app's visual experience


Primary Color

#05C2C8

Highlight 1

#5AC8FA

Highlight 2

#8ACE5C

Typography

Tab title 30px

Course Title 18px Medium

Course Subtitle 18px Regular

Paragraph text 18px Regular

Course Number 13px

High-fi Prototype

Landing

wifi
wifi

Plan

wifi
wifi
wifi

Course

wifi
wifi

Scheduler

wifi
wifi
wifi
wifi

Profile

wifi
wifi

User Testing

Testing Condition
wifi

2 participants tested

wifi

Participants have some experience of using academic planner app before

wifi

Tested on Invision and Principle (Mac)

Testing Tasks
wifi

Find a specific course by searching on the course tab

wifi

Check prerequisite requirements when adding a course

wifi

Pick an academic track of interest and check course choices in that track

Design Iterations

UX Problem

Confusing color scheme of core courses and regular courses

Our participants said some courses under the “Full Course Plan” are greyed out while some are blue when they first saw this page, making them feel those grey course tabs are unclickable or somehow disabled, even though they are actually clickable according to our original design

wifi
UX Improvement

We canceled the greyed out design of all tabs. Instead, we used “white/ blue” to indicate if a tab has been tapped. When users see this page, they will see all tabs white, which can help them know all tabs are in the same status and all clickable。

wifi

Final Design

Landing

wifi
wifi

Plan

wifi
wifi
wifi

Course

wifi
wifi

Scheduler

wifi
wifi
wifi
wifi

Profile

wifi
wifi