Prev: Jenzabar Retention Next: GaggleAMP Amplify

Jenzabar Mobile

My role: user experience, user interface, visual design, html/css/jquery mobile prototyping

The Challenge

Jenzabar Mobile is a mobile web optimized translation of Jenzabar's campus portal system. It offers all of the major functionality of the desktop portal as well as access to assignments and grades from Jenzabar's eLearning learning management system. We are also creating a native / mobile web hybrid system to offer individual schools as a service.

There are a number of challenges when trying to recreate an entire site or system that was designed for a large desktop screen and mouse and keyboard use, in a mobile form. Which functionality and content is really useful and necessary in a mobile context? What about navigation? The portal system is completely flexible and customizable in the desktop version. How do you translate or let the clients translate their deep hierarchical site structure into something that allows their students and faculty to find and access the content and features they need with just a couple of taps? How does the use case for each feature change when using a mobile device, or does it at all? These are just a few of the questions we asked and answered over and over again for the portal and each of the modules that runs within it.

main menu student center attendance attendance attendance
jenzabar mobile background

user stories

My Process

  • User research
  • Feature analysis and mobile context ideation
  • Iterative process design and layout design
  • Team and client reviews
  • Visual interface design and screen shot development
  • CSS/HTML/jQuery Mobile prototyping
  • Developer support
  • Interface testing

The Journey

We developed Jenzabar Mobile over several years. First we created a system that lets our users build a mobile optimized version of their portal that pulls all of the same content as their desktop version. Then we added translations of all of our various features and modules one at a time.

One notable example was our attendance feature. In the desktop context, most instructors either have a sign-in sheet at the door or jot down each student's status while class is in session. They then enter it all into the computer at once, dilligently clicking dropdowns and selecting options for each student.

While initially trying to translate the existing workflow directly onto a mobile screen, I quickly realized that that's not a very likely use case with a mobile system. If an instructor can enter attendance on a mobile phone or tablet, it's far more likely they will enter it directly in the first place, saving themselves the extra step.

So how do we support that? Is it a large class or early in the semester where they might not immediately be able to put names and faces together, or is it a small class where they know at a glance who's present and who's absent? I built a solution for each of those cases. For the former, you can tap a student, mark their attendance and then advance to the next. Each student has their own profile page with their picture, other identifying information, and their attendance for other sessions. The instructor can move through the entire class alphabetically, see who they are dealing with and mark each student accordingly. For the latter, a list view with simple buttons for Present and Absent while leaving less frequently used options like Partial and Excused in a dropdown. Also, to reduce the number of taps necessary for the most common option, I added buttons at the top and bottom to say "Everyone else was present" so an instructor only needs to mark those who are absent or any of the other less common options and click once to complete the attendance for the class.

A great side effect of having to distill everything down to fit on a small screen is similar to mobile first design philosophy. Once you determine what's important and how to deliver it the best way for mobile, you can take that back to your desktop design and really optimize that experience too.

Jenzabar Retention