MyKU UX Site Documentation

The assignment was to create a redesign of Kutztowns MyKu site that fuctioned as a plateform to manage and schedual class, academic records and much more. The redesign was a structual one, and far less focused on visuals.

Step 1.Process Flow & Analysis

The current MyKu site had a lot of issues. To start, it was very visually confusing. It had mutiple nav bars that were very tight. The font choice and layout of information was hard to see with no clear higharchy. The flow could be very drawn out and misleading. There was no back button, and the "myplanner" was nearly useless.

Step 2.Creating Personas

Personas are used in creating senerios that a wide range of useres would relate to. The point of this is to understand didfferent ways that the site would be used, to make sure that everyone is considered. Personas are outline by simple character traits that seperate them from other useres. From there you formulate situations of what they would use the site for.

Step 3.Process Flow

After we had an idea of how the site would be used, we needed to make a process flow, a simple graph to show each interaction to get to the desired result. Process flows also showed where certin screens would intersect, and what needed to be added and what could be trimed.

Step 4.Creating Rough Wire-Frames

Next we needed to create rough wire frames of what the site would look like.These are lose and have no design elements but it allowed you to viually map out where key elements were and what different screens would lead to.

Step 5.Wire-Framing with UXPIN

UX PIN is a professional app that allows you to create wireframes quickly, from basic shapes, and link them to different pages, mimicing a coded website. This stage brough our rough wire frames to life and allowed us to make more accurate choices on what was working, the sizing of elements and out loyouts. User testing was then done from writting steps that would ask the user to preform as task and we would monitor the users attempt, taking notes to make adjustments of where they failed.

MyKU UXPIN Desktop

MyKU UXPIN Mobile

Step 6.Redesign

Next we brought our revised uxpin prototypes to life in illustrator and photoshop. We knew that we were going to be using a program called invision. this program could moch-up great prototypes from illustrator or photoshiop documents but they had to be layers and lables a certain way.

Desktop Moch-up: Student Icon Clicked

Mobile Moch-up: Planner Clicked

Step 7. Invison

Invision is a very useful UX app that allowed us to create fuctional prototypes from the mock-ups. Here you could fine tune adjustments like button sizes, font sizes, and fuctional elements. Uxpin allowed us to visually use th mobile site on a smart phone. At this point sevreal elements were tweaked and made effeicnt like the MyPlanner page. I got rid of the cart and combined it in the my planner with the ability to save a schedual plan to use for enrollment. The MyPlanner also broke into 2 fuctions. One for pre-enrollment; building schedual combinations, and one for post enrollment; seeing what class will fit in your schedual you alreaady have.

MyKU Invison Desktop

MyKU Invison Mobile

Step 8. User Testing

User Testing showed great success for sevral key elements. The student Icon that held priority information worked out great and was very self contained with the acordian menus. The search classes feature and how the classes were seperated worked great. From here you would see all the classes sepreate, and had to click in to a drop down to show the tearches, followed by another accordian folder for other info. The myplanner fuction was alittle confusing at first, and thats ok.. the fuctionality of ity is very dense, thus making it confusing, but by the 2nd or 3rd question users were navigating it perfectly and commmented that it made sense and had great fuctionallity. This is a fair trade of for having added a very useful feature.

MyKU UXPIN Desktop

myku-desk-vid from Austin Haas on Vimeo.

MyKU UXPIN Mobile

myku-moble-vid from Austin Haas on Vimeo.