Moodle Mobile App redesign concept

Moodle Mobile App redesign concept

by Rafael Luna -
Number of replies: 4

Hello, I am a user of moodle and a student, and I have found the mobile app's usefulness pretty lacking, so I took the time and liberty to design a very diferent UI to make the app more useful for students and easier to use, as it is more clear and pretty than the current app.

Let's begin with the courses page:


(The app is in spanish as it is my native language and I took my courses as an example to fill the app)

The app is divided in four main views: the courses, the calendar, the messages, and the user's profile. I chose those because they are, at least in my case, the most used features of moodle.

The main course view is just clear list of all of the courses you're on, with the name of the teacher right under it, in case you identify the course by the teacher's name. The cards on which the courses are are big, simple, white, and with a shadow to make it very clear to the user what's the content and what's the background, which is a design aspect that I don't like about the current app.

At first, it was very plain, so I included that little symbol that for some reason also showed up before each course's name in the moodle website for my institution.


Next, it's the individual course view: 

In here, instead of choosing from a previous menu what topic to open, every topic is showed here and is collapsable, that way, if you're done with it, it won't take too much space on screen.

At the top of the view, there's a participants button, to have easy access to them, a feature lost in this design's main courses view, but that it is present in the current one.

Also, if no name was given to the topic, it will just show "topic 1" or "topic 2", but if it was named, it will show just the name instead.

I redesigned the Icons to make them clearer, at least to me.

Finally, there's a search bar at the top to search for assignments, documents, etc. and the "i" at the top would show the course's info.


Next up is the assignment view:


Here, the first thing you see is the upload Icon, which I think is the most important action you can do in this view. In this case, it is greyed out because the assignment submission time has past and I can no longer upload anything.

Then there's the assignment info, which is the most important piece of information about it; here, I looks not collapsable, but that can of course be changed.

Then, there's the assignment description, where the teacher describes what they want done:


Finally, students probably want to read everything before submitting their homework, so I put an upload button at the bottom also.


Next it is the calendar view:


I love the calendar in the website, and I wish I could do more with it and take it with me more easily.

First, it shows the current month, with the current day highlighted, with a list at the bottom for all of the assignments due that day.

The days for which an assignment is due are highlighet with a subtle red square for easy identification.

The selected day can of course be changed, and the list at the bottom will change as well to show the selected day's assignment.

The list view will show each courses asignments in this way: The hour for which it is due in bold numbers, the assignment's title in semibold, and two lines of the assignment's description in normal font. They would be tappable and they would take you to the assignment's page like the one previously showed.

But what if there are too many assignments for one day?


Then just pull the list up and reveal all of them. In this expanded list view, the list is scrollable if there's even more assignments.

The background darkens in order to make clear that the list is now the most important element of the UI showing.

Finally, in the list view, if an assignment was already submitted, a check icon appears, but if the deadline has passed, it shows a cross mark.


Now, the next is a feature I would love to have in every app, and that is dark mode:


I don't know most students, but I use my phone a lot in the dark, and having a dark or night mode is just a blessing so my eyes don't hurt when I'm checking my assignments in the middle on the night.


Well, this was my little project and idea, If the moodle team is interested in me to develp this further, please feel free to contact me, as I'm very interested in UX and UI design and I would love to work on this project.

Average of ratings: Useful (3)
In reply to Rafael Luna

Re: Moodle Mobile App redesign concept

by Pau Ferrer Ocaña -
Picture of Core developers Picture of Moodle HQ Picture of Peer reviewers Picture of Plugin developers

Hi Rafael,

Thank you for your great designs! We love them!

The UX team will review and work on them. In my opinion some of the improvements you are spotting can be part of the app, however we  have to study them deeply before.

¡Muchas gracias! de nuevo!

Pau

In reply to Pau Ferrer Ocaña

Re: Moodle Mobile App redesign concept

by Rafael Luna -

Okay, thank you very much! I would love to help to make moodle better for everyone!

In reply to Rafael Luna

Re: Moodle Mobile App redesign concept

by Elton LaClare -

Hello,

I found this alternative app design very interesting. Clearly you took a great deal of time to consider the needs of your users. There are a couple of aspects of this design that I found really interesting mostly because they solve some issues my users have with the app. 

I really like the idea of using the bottom of the display for providing access to the areas Moodle users visit most often (in your case, Courses, Calendar, Messages, Profile). I actually started MOBILE-1728 in the hope of solving a navigation issue encountered by my students. I noticed it was rather difficult to return to the 'My courses' page from within courses or activities. In the tracker issue I suggested a 'home' button, but I think your solution is better. There is not enough room in the header for more icons, so I like the idea of putting things at the bottom.

I also like your idea of showing course sections in collapsed form rather than having a separate page where students must choose which section to display. When students attempt to enter a course for the first time, they are often confused about which option to select from this menu (e.g., All sections, Topic 1, Topic 2, Topic 3). This page also creates a navigation problem when attempting to return from the course to the My courses page (or other areas of Moodle such as Site home, Calendar, Messages, etc.) as you must navigate back through this list of course sections even though you are leaving the course.

Thank you very much for sharing your ideas.


Sincerely,

Elton  

In reply to Elton LaClare

Re: Moodle Mobile App redesign concept

by Rafael Luna -

Thanks! I'm glad you like it.

I really hope some of these ideas come true and that I can work alongside the moodle UX and development team, because I'd love to help students be more productive through this app.


Thank you,

Rafa