Case Study: Defining mobile app approach for Student Centered E-Learning Environment website
This is another newbie UX case study that i made as a project assessment of sort. Even though the design itself is not yet perfected and tainted by many flaws and thinking fallacies, i truly learn a lot in the process. i hope i can continue making things that will eventually be useful in the future. Below are my process of creating this mobile app design.
Observe
Ideation
When first reading the brief that basically saying: ‘just make whatever, BUT know its useful’ i was quite baffled yet excited. Before deciding on making a mobile app for SCELE, i almost thinking to make another expense tracker, adding to its already crowded creation. The idea to create this mobile app was surfaced by the recollection of my past experience as a student, how i often rely on friends on course information.
SCELE (Student Centered E-Learning Environment)is basically a one-stop information portal for the subject learning in my faculty (Faculty of Computer Science, University of Indonesia i will address this as Fasilkom after this). The website provide service for many roles, such as student, lecturer, lecturer-assistance, etc. Since i’ll be making a student-focused app, i will try to give some context of what a student can do in this website. As a student we will be loaded by our course information here under the “My Course” navigation. There we will get course materials, assignment brief, assignment submission portal, announcement about the course and information for assessment (quiz & test). We can also explored the many forum discussion under the main menu in homepage fitting to our needs. The first thing you see when opening the homepage was infact a display of academic forums where academic secretariat will inform you about changing class schedule or mid and final test schedule in excel format.
Problem Assumption
Albeit the rather compact content, i often find myself missing some information due to the lack of noticable status of announcement, updated brief, etc. One may argue that this was indeed the purpose of the website where student challenged to constantly checking the web and aware for the updates. But i think to fully serve its purpose as information portal i think its best to actually provide an ease access for student so that any important information won’t be missed. Overal here are my assumption of the problem that i had with the website:
- I usually don’t realize when there are any assigment (P1)
- When there is an assignment, I don’t remember their due! (P2)
- I don’t even realize when there is an update upon the assigment (P3)
- I don’t notice it when the deadlines are changed (P4)
- I always miss ‘assistensi’ schedule (P5)
- I always dumbfounded with quizzes schedule that i don’t know of (P6)
- I don’t realize when exam schedule are uploaded or updated in scele (Whether updated on the uploaded excel files or web’s calendar) (P7)
- I always left alone because i didn’t know there are group-assignment! (Worse, i usually don’t know how to do it anw…) (P8)
- I usually don’t know when lecturer reschedule class schedule
only to clash with other class’s schedule. (P9) - I miss ‘demo’ schedule with teacher-assistance (therefore didn’t get full mark of my efforts) (P10)
User Research
As a way to validate my assumption i conducted a small and rapid user researched survey for both the ongoing fasilkom student and its graduates. I also provide some means for sugesstion of the desirable mobile version feature. I conduct my survey using typeform which then i promotes using my instagram stories. You can access the typeform here: bit.ly/JannahForMe.
It’s nice to know that the problem is not my own. At least for half of the problem assumption got a supporter of their own. I also see the need to make the assignment feature prominent since its the most voted mandatory features. Insight are also pilling up where i was totally inspired by most of the insight, something like attendance recap or grade recap that i myself didn’t even think about it before.
Reading Other’s Approach
Apparently, mine is not the only resolution to create mobile app for the website. Many other had infact already proposed some ideas as their journal. Fortunately Hanif Ibadurrahman, a senior who happens to be a friend of mine, willingly give me his journal where i can also see his research, previous design proposal that had been made along with his proposed new design.
What striking me is how in both previous design and his proposed design, it seems that they want to take scele as whole of its full feature. This then intrigued me whether or not student really used their smartphone as means of education, so i conduct another simple survey using instagram stories feature.
Admittedly, earlier i was thinking to only made a simple information reminder for SCELE itself, but now this survey got me thinking into putting even the course materials as one of its perks.
Ideate
Defining Solution
After undergo the above process, i try to ideate my own solution to the given problems. My ideation are actually quite messy since i slide between many ideas alternatively. But in a bigger picture i had decided what my app would be, my app would be a student-focused needs of scele. This means that my app wouldn’t be any sort of replacement for the SCELE website itself but more of a helping tool to the defining feature of the SCELE. The app will be created based on there big chunk of student’s concerns: Course, Assignments, and Assessment (quizzes & test). Although the Assignment and assessment itself was a child of a Course, i feel the need to making them stand on their own so that student can directly compare it to each course without realeasing its connection to the course. Here are the app limitation that i had defined:
- Only provide service and aid for student’s role
Although the app was student’s focused, but student will receive information by academic representative such as secretariat, lecturer, lecturer assistance. In future there may be some means of application provided for their roles. - Can’t provide submission service for the assignment
The thinking behind this is that eventhough learning can be done withing the tips of our fingers, i think most of the assignment will be done in a proper files using laptop or computer(this was infact my own untested assumption). So to create a submission of the assignment within the app serve no purpose for me. I will focused more on the assignment information, updates and grades. - Won’t be displaying the full categories of forum discussion
The forum discussion that would be included within the app are strictly the forums that are linked to course, assignments and assessment. Any other forums as apparent in the SCELE website homepage will not be accessible through this mobile app. - The app will only provide information about your current course at the current semester (using the rules of max 24sks per semester, then there will be at most 8 course listed at a time)
The app wouldn’t create access to previous course taken in the previous semester, or perhaps maybe user can access it through archieve or something. But for now the app capabilities are focused on its current user’s course. The course data itself will automatically derived from academic.cs.ui.ac.id so that student don’t need to manually enroll the course.
Sketching
My time are limited and i rely heavily on my confidence of user to actually jumped directly into making the sketch without defining a clear user persona. My sketching process to are very messy i found myself get confused often and had to forfeit the sketched design only to start over.
I really tried to make the design oriented to the already frequently used app like social media. This was because i want user to felt familiar immediately within the app and therefore reducing user cognition workload. I align my design closely to app like instagram, whatsapp, line, medium, epub-viewer lithium, etc. After some trials i finally can make peace of the app and started to create its mockups and defined its suitable interaction. I will breakdown my solution approach along with its HD mockup design.
Design
Brand & moodboard
For the brand i didn’t really put much time to it, i only try find alternative of logos for the SCELE web and use its distinct orange color. In my thinking one of the reason why the SCELE web may seems a little dull is because the lack of color utilization. I really thought that colors can provide strong visual cues for dividing the many many course and actually can provide easy visualization.
Since the app will only list the course that we currently took in our semester. With each semester’s max number of SKS (course’s academic weight)being 24 SKS, i figured at a time there would be max 8 different course. That is basically why i have the 8 color’s above for truly identify each courses from the other.
HD mockups breakdown
Here is the breakdown of the app main feature:
Homepage
The home of the app will provide all the announcement segmented with 3 types, which is course, assignment and assessment. There are also in-app chat just like instagram direct for user’s need of communication to academic secretariat bot, lecturer and its assistant, or even to their course-assignment group. The course will be defined by the distinct colored randomize by the system with course abbreviation as an aid of distinguishing courses.
Course page
Here, will be listed all teh course taken by a student in the current semester. The course detail pages will include general information of the course like class schedule, attendance, its materials, assignment grade recap and assesment grade recap. There are also announcement button (represented by the speaker icon at the top right corner) that will include all the announcemnet regarding the course. This include assignment and assessment announcement because they admiteddly had a direct link to the course.
Assignment page
As in assignment pages, we get to see all the assignment segmented by the course so that we can have a direct comparation of the status of each. The assignment will be accompanied by one of the 4 status type which is ( done submitted, missed submission, open submission and graded). In its details page, we can also add notification of the deadlines, registering group that will triggers the creation of the group chat in the in app chat in home, also grade status of the app.
Assessment page
On the assesment pages, we basically get a timeline of the upcoming and past test divided by the colors of the course and also segmented by it. We can access information about what topics that will be tested, references, and even add notification for the test.
Calendar page
For the calendar itself i truly adapt google calendar design. infact, all of the design that i made are truly an adaptation of Google’s Material Design. Here i want to create a clear and crowded-prove visualization of one’s schedule, therefore instead of mixing all the course, assignment and assessment schedule, i divided it into tabs and hoping to create a more focused visualization.
Access the prototype: http://bit.ly/SCELEmobile
Reflection & Review
Review & Suggestion
Having a friend that happen to be an experienced product designer ( The One and Only Christian Arryanda) had its perks for me. After i created this app design, we agreed on a meeting to discuss the ‘works or not’ of the design and is there any better approach or improvement to be made. Here was the summary of our meeting:
- There are many typos, pseudo-text even false used of icon that will changed the designed interaction. So in future i need to becareful and to really check whether the content that i put was already correct. every little things matters.
- There are many elements in which i made prominent yet had no clear purpose. I really learn that i need to put aside my ‘graphic design’ heart and truly focused on each elements functionality. the element that mentioned is such as the too big user profile infomation, the course colored badge. All in which i argue only as because i like the look of it.
- At some pages, i didn’t create an interaction where user’s can really backtrack their steps. for instance in Penulisan Ilmiah course detailed pages, if i then click the see all assignment then i will automatically redirected to assignment pages where Penulisan Ilmiah is already filtered and there was no way for user to access the previous Penulisan Ilmiah details page without starting over from course pages.
- The overt uses of active inactive status. i should just chose between playing with opacity or using the tiny red dot.
- The inconsistent size and visual hierarchies. There are just too many things i need to revisit and think it through again about its importance and its hierarchy compare to others. I also used to many inconsistent styles of declaring things.
- My unfinished thought of the feature capabilites and its back-end process. Many of the proposed feature are created without any depth thinking with all aspect considered. So there were still so many things to be revisited and redefined.
Self Reflection
I clearly understand that there are still many flaws in the designed app, alas, my knowledge still had an apparent limitation. The design itself are still mainly based on my own assumption that will need to be tested. However, i do hope that the solution approach can actually be beneficial for the students. Please comments below or connect to me directly if you had any question, suggestion or critique! Thank you.
