One App for All of Your Student Needs — MyUMN Case Study

First of all, I would like to state that this case study was written in August 2018, while the design process was held 2 years ago. This MyUMN project was just a sample for studying purpose for my Interactive Media Design class (4th Semester, Multimedia Nusantara University). Done with a group of two, handled for around 7 weeks.

Focusing in ICT, Multimedia Nusantara University has been one of the top universities of Indonesia for their Design program. UMN (Universitas Multimedia Nusantara) has a certain website (my-umn.ac.id) for students to check their schedules, points and grades, study fees — basically their every needs.

Undergoing the ‘Interactive Media Design’ class, we were asked to design an app to support the use of MyUMN website mentioned above. So, we are aiming for efficiency and convenience.

The First Step — Brainstorming

Working with my college friend, Andrea Puspa M., we listed all the services this website has. Then, we sorted them according to the access frequency and significance. Here are some of them:

1. Class Schedule & Exam Schedule. Students need to check for their daily schedule: Class Subject, Time, and Classroom Number. Each day, they will have 0–3 classes assigned with different room (even different building!). It surely takes a few weeks to remember all of them. However, there could be times where their class is rescheduled, so they need to re-check the updated schedule. The exam schedule would be different from the regular too.
2. View My Assignments, View My Grades, and View My GPA. To check how students are doing with their classes, they can check their mid test, final test, and task grade in the ‘View My Assignments’ page. The ‘View My Grades’ page would be a compilation of all the final grade of each class on each semester. At the end of the page, they could find the cumulative and current GPA.
3. View My Attendance. The university sets a limit of 3 absences for each class — or else they can’t join the final test. Sometimes students need to reassure whether their presence is counted or not.
4. Class Shopping Cart. Each semester, students may choose classes they want to take. They will need to browse classes, add them to shopping cart, and checkout. Taken classes will be shown on Weekly Schedule.
5. Announcements. Currently, the MyUMN website shows the newest announcement sent to the students’ mail. However they can only read it from the mail site. There are various of important information sounded here, such as semester’s fee, events, scholarships, internship & work opportunity, etc.
6. View SKKM Points. In order to graduate, students of Multimedia Nusantara University also need to complete a total of 20 points which they gained from being comittee, joining competitions, attending seminars/workshops, and doing social services.
7. English Test Registration & Graduation Application Form. Aside from finishing study and completing SKKM points, students were obliged to take a TOEIC test before they can apply for graduation. All the schedules and forms are shown and filled online in MyUMN website.

Well, those above are the services that we found crucial and accessed frequently. In the application we were about to design, we decided to add some more features that would be useful. Those are Academic Calendar, Important College Department Contacts, and UMN Bus Schedule.

Uhh.. The pain

Because the MyUMN Website has been live, we also listed some pain points that students currently have to go through:

1. Login Difficulty: Long email address (firstname.secondname@student.umn.ac.id), automatic logout for 30 minutes of inactivity
2. Too many levels: Students view one information at a time (screen). It becomes depressing when they want to compare information at different levels. For example, when you are seeing the assignment grades of English class and then you want to check another.
3. Not mobile friendly: It is made for the desktop. Imagine when a student needs to check that day’s schedule, he needs to tap waterfall menus with small dropdown arrow to reach Weekly Schedule, and swipe everywhere to adjust the screen.

Here I attached a video to see the current MyUMN website.

So many clicks needed!

Next, Sketches & Wireframes

We continued by making some sketches. At this step, my friend and I tried to find the best layout and organized the information hierarchy. We wanted this application to be quick and easy — just a few glances or taps to show what the students’ current need.

So, these are what we came up with! Today’s schedule shown up first, followed by quick icons to each menu. We also provided a side tab to access less frequent services, settings, and logout button.

Early Sketch of Side Bar and Home

Let’s Do Some Design!

Feeling great with the concept, we were confident to start designing! We were using the Adobe Illustrator program to design all of the screens, icons, and some vector art bonus (that cool & mighty UMN building — did you notice this article’s header image?)

We chose Multimedia Nusantara University blue brand color to the design. Then we felt that the MyUMN website was quite boring and texty, so we added illustration and icons to live up things.

Some Final Screens of MyUMN Application

Less Taps, More Horaayy!

Starting from the login screen, the ‘Remember me’ feature will help for easy access. The student’s picture and name will be shown on top of the home screen, followed by the day’s schedule. Then, other menus are served by the quick icons and hide on a side bar. Important announcements may run on the space below. And, same level Information are shown together in minimal number of screen. Remember the pain when comparing a class’ grade to another? Well, it is now quick and easy!

An Element of Surprize — Customization

Here is the amazing part! Students may customize whichever service they want to show as quick icons in the homescreen. The Settings menu consists of organized icons ready to be switched on or off! Services with the ‘off’ toggle will be shown on the side bar menu.

Now, Let’s Try It!

Since all screens were ready, we brought it to protype mode using Adobe Flash. I understand how outdated this tool is. Back in the university, I haven’t known about Sketch, Marvel, Invision, etc. Using Flash at that time has it’s ups and downs. We can test how to jump from screen to screen, but the animation and destination pages is limited. Check it out below!

MyUMN Application Prototype

Well, What’s Next?

As what I have mentioned above, this project was made for the semester test without any plan to be published. It has been 2 years and when I look back, I do feel there are plenty rooms of improvement, from the design aspects and the interaction! My concern right now is that jumping from inside into another frequent-used service (represented by quick icons on Home) requires some taps too.

I understand this article may lack of progress documentation. But I am pleased to learn writing as well as designing. Please feel free to leave your thoughts! And I will surely let you know if I have redesigned the app and continued writing in Part 2! In the meantime, check out my recent UI designs on my Dribbble/Behance!

Jennifer Handali on Behance

Jennifer Handali

Sending my warm regards to you! Have a nice day!

Jennifer Handali