Portlet for Undergrads New Students and Transfer Students to check their outstanding on-boarding items.
Planning implementation and achieving results
Last year, coworker Rahul helped create the New Student Checklist portlet. This is a portlet that helps students quickly view what items they have outstanding for their Admissions process. With the next semester, we wanted to roll this out to Transfer students as well. My manager Steffanie wanted to take this opportunity to redesign the portlet, so she tasked me to take a look.
This is how the questionnaire used to look.
My job was to redesign the User Interface of this portlet. These were my design philosophies:
- People understand checklists, so we needed to keep that.
- People understand numeric ordering, so we added that.
- People prefer clear directives, especially for something important like school registration.
The items were grouped into 4 categories: First, Required, Optional, and Additional. To differentiate them, we added a Header for each. To clarify the the optional items, we added a menu that users can hover down.
The icons with the Due dates were removed and replaced with hover messages to simplify the UI.
Links were added to the line items to take the user directly to the page that they need to complete rather than having to hunt down the information.
At first I thought of hiding the Required and Optional steps until the First step is completed, but I think for something important like school registration it’s frustrating to not see the items ahead of time. If they need to go see the doctor for their immunizations, there is no reason why they can’t start early for example. So instead we “disable” the other items with a gray color and when they complete the first item, they become “enabled” with a black color.
In the old design, it was confusing to show an “X” checkmark for items that were not completed because they could be optional, like Financial Aid and Housing. So instead we are now showing blank boxes and only checking them with a green arrow if they are completed.
This is how the questionnaire looked after the first design pass.
Lastly, for fun and to keep with the school and checklist theme, we added notebook-like CSS. The end result was the portlet you see at the top of this page. Users were pleased. :)
Influencing, communication and teamwork
This particular portlet required a great deal of communication and teamwork because of how many systems it touches. Without going into specifics because this blog post is already too long, four technical resources and several end users had to be kept informed on the progress of this portlet.
In particular, manager Steffanie oversaw the entire project and helped with meeting and gathering requirements from end users. Coworker Rahul provided guidance and created the initial portlet. He and I worked together to enhance the security of the web services. Coworker Veena created an Oracle stored procedure for handling the form submissions. I hope I'm not forgetting anyone, but I think that's it.
Analysis, problem solving and creative thinking
I went through a few design iterations as you can see from the screenshots. Early on I sat down and defined the philosophies I was going to adhere to (above). Once I had that, I iterated quickly and often and got feedback as soon as I could. This allowed me to make changes early and arrive to the finished product faster than otherwise.