Initial Flowchart

In order to begin revising the site's sup-par UX, I started by seeing what information they currently have by mapping out their sites flowchart.

Personas

In order to decide how exactly the site should be remapped, I first created some detailed personas. I tried to base these personas off of real students with real problems, being sure to pick those that might make me look for possible problems or special user needs.

Revised Flowchart

The original flow of the website was, simply to say, a tangled mess. The newely revised flowchart was created to help streamline the processes and trim the fat from the site.

Inspiration

To make the site more well rounded, and to make sure I was fully prepared going into it, I began to research other sites. I knew going into this that certain features such as the cart, search, and schedules would be of importance. With that in mind I looked at what other websites were doing with those features. I was sure to take note of sites I found employing them most successfully.

Ideas and Goals

1. Ratings/Review/User Input
  
2. Recommend similar classes.
        a. Similar in terms of requirements, content, or time.
3. Smart Planning/Warnings
        a. Have your account linked to your major/minor
        b. This way it knows roughly where you need to be in your college career and what might put you behind or cause future problems.
        c. Warn you that not taking a class might make you ineligible for another required course.
        d. Planner also acts as course schedule page
4. Clickable Home Button
5. The ability to use the back button
6. On search results/course details, have it show what requirements it fulfills towards your degree, to help give priority to multi-requirement fulfilling courses
7. Minor Suggestion System
8. Visual Checksheet
9. 1st, 2nd 3rd Class Choice System
10. Class Details/Related Course are pop ups
11. If you dont meet the pre-reqs, course name is greyed out and wont add to cart without administrative hold release
12. Classes will show up in color if there is a scheduling conflict. System will warn you and wont let you add class to cart without dropping other class first.

Wireframes

With all my research, goals, and ideas generated I could finally begin actually begin laying out the site. I started by sketching rough wireframes out by hand. Once I had a setup I was happy with, I began to create an interactive wireframe in UX-Pin.

User Testing

After completing an interactive wireframe for myKU I ran it through two rounds of user testing. I sat down with the users, observed their actions, and took not of how they progressed through the site.

1. One of the most common problems I noticed was that users had trouble locating their grades. Some simply did not know where to look, while others made it to the correct page, only to glance over it. I will need to make sure grades are in a proper place, and that they have more presence on the page.
2. Other things users had some difficulty finding were the course details as well as their transcript.
3. Another common occurrence was that users occasionally did not scroll down on the Planner page. I need to make it more obvious that the page continues down below the fold.
4. I am missing the Delegate Access feature.
5. I forget to add an enroll button to the cart; a very obviously important feature.
6. After testing, I now realize that I will need to merge my planner with my next semester cart.
7. Users were confused by the Progress page. After discussing it, I have decided it needs to be renamed to a clearer title such as “Academics”.
8. One user suggested making add and drop into one button on the nav with a dropdown.
9. Perhaps one of the biggest realizations to come out of testing is in regards to the quick search feature on the home page. Although I thought it to be of use, not a single user even attempted to use it. As it sits, it’s a waste of space.

Mockups

Based on the user testing, revisions to the interactive wireframe were made promptly. Only once all the problems had been addressed could I start to create interatctive mockups.