PART 1 - ANALYSIS

The first step was to do a deep analysis of the all portions of the course scheduling process on myKu. I captured these steps in a process flow shown below. I then made notes about flaws in the UX design. I found that the class registration process was very confusing. There were many duplicate buttons, and random tabs within tabs. There were way too many items and buttons in general as well. browsing the course catalog was very confusing. There was no good way to filter classes to find what you're looking for. The planning process was confusing as well. There was no easy way to plan your semester as the existing "planner" was very confusing. Lastly, the back button doesn't work right and there's no easy way to get back to the homepage.

Next I completed a competitor analysis. I found some websites that I considered to have good ordering systems. Below you can see some of the websites I chose. As you can see, Cotton Bureau and Bonobo have a very user friendly checkout system that brings out multiple side bars instead of leaving to a new page every step. Apple uses clean, big, simple photos so that the user can directly choose what product they want to buy. Bellroy has all the checkout information on one single page so the user doesn't get lost or confused between pages. Many of these websites also dont require the user to create an account to checkout.

PART 2 - PERSONAS

For part two I created 5 imaginary personas for people that would possibly be using myKu. I made a list of their picturees and their personalities as well as certain needs they would have for myKu.

PART 3 - WIREFRAMES

Part 3 involved first creating a new process flow and wireframes. I tried to make this new process flow easier to follow and fixed all the problems with the original process flow. My new process flow is shown below.

Next I created wireframes for the general layout of myKu. At this point in the process I wasn't concerned about style or colors, just the overall basic layout. I created layouts for both desktop and mobile. You can view the clickable wireframes below.

PART 4 - USABILITY TESTING

Next I created a script to read aloud to my usability test subjests. The script included a list of tasks I wanted to user to be able to perform. My test script for desktop is as follows:

1. View your Spring 2017 schedule on your homepage
2. Art 101 section 2 is full so you want to figure out how to be notified if it opens.
3. Figure out how many natural science classes you have left to take
4. You need a natural science but can only take it at night. Search for all the natural science night classes and view the class details.
5. You forgot your advisor’s office hours, find them.
6. Find a section of Art 101 that fits your sidebar cart planner, then enroll in it.
7. Go to the course catalog. Using your sidebar planner, enroll everything in your cart.
8. Drop Ad 2 from your current schedule on the homepage.
9. All the classes you wanted to enroll in have filled up. Enroll in your backup wishlist classes.
10. Drop Intro to Photo from your cart
My script for mobile is as follows:
1. You forgot that it’s your day to enroll and are in a hurry. Quickly enroll in everything.
2. Drop Art 123 from your current schedule
3. View all the Natural Science classes available in the catalog


Random subjects then clicked through my wireframes and tried to perform these tasks. Some problems occured mostly because of the way I worded buttons. Also my visual hierarchy was confusing at times so the user wasn't sure where a button was because it wasn't obvious. After fixing these issues I did another round of user testing.

PART 5 - MOCKUPS

For part 5 I created two versions of desktop and mobile designs in Adobe illustrator. I narrowed it down to the two versions below.

PART 6 - Prototypes

Part 6 involved using the program Invision to make clickable prototypes of both the desktop and mobile mockups.

Lastly, I recorded an example of what it would look like for a user to go through my script correctly. Below you can view the desktop and mobile videos of these processes.