Painting the online academic scene blue for the Ateneo — a UX case study

It was that time of the year again — User Experience Society hosted its annual flagship project called UX University, a two-week long case study competition for college students interested in learning UX, and this year I decided to join. The rationale of the competition sounded simple enough: creating an online product for a design problem within the Ateneo de Manila University (ADMU) community. The process of getting there, however, was far from easy. This meant two weeks of non-stop hustling. In my case, the hustle was being able to design an online academic syncing platform called the BLUEBeadle.

But what is BLUEBeadle all about? Before I delve into the specifics, let me first go back to where I got the idea to begin with. Looking for a problem was a frustrating feat to say the least. I had to ask myself questions like: What did Ateneans struggle with? What are they almost always in trouble about? I remember sitting on it for a day or so. It was only when my friend and I were ranting (passionately, if I may add) about online academic services in Ateneo for the nth time that day when I realized the problem was right in front of me all along. Students had to juggle up to 5 different platforms day by day just to make sure they don’t miss class updates. This can range from the learning management systems (LMS) like Moodle, Schoology, Google Classroom, and Edmodo to one as far as social media platforms like Facebook. For the sake of simplicity, we’ll call these online academic syncing platforms. So at this point, I had formulated a hypothesis: Ateneans needed a change in how their classes’ information is being provided to them.

Concretizing the Problem

Sanggunian ng mga Paaralang Loyola ng Ateneo de Manila’s intiative called Sabihin sa Sanggu (SSS) posted Atenean students’ concerns about the online academic syncing platforms through Facebook

Now while it was true that I found this a daily hindrance in my academic life, I’ve yet to confirm if this was actually a bigger concern in the microcosm that is Ateneo beyond online posts such as those from Sabihin sa Sanggu. In order to do so, I set out a one-on-one interview with three types of stakeholders — students with beadleship experience, students without, and professors.

From my interviews, it shows that all of these users experience very similar struggles and pain points with such platforms, regardless of background or routine. Words such as hassle, confusing, and hard to organize recurred in every single interview. They cannot argue that these platforms are crucial in order to get information disseminated. However, they also believe that the current practice of multiplicity often reduces their efficiency in working or studying. In summary, the problems included:

1. Transferring from one platform to the next means logging in and out of it one at a time as well, ultimately wasting more and more time.
2. These platforms are unorganized in the sense that when they have to look for posts, they cannot easily get to a certain one because there aren’t filters or filter tags to identify them.
3. Most LMSs don’t have presence awareness, thus students feel like they can’t really easily communicate (particularly when they have inquiries for the professor) and professors feel the same way with students.
4. There isn’t much interactivity between students in these platforms, thus they have to resort back to social media in order to communicate with groupmates.
5. Professors would sometime send announcements (especially free cuts) an hour or two before class, and sometimes students won’t even be online that time since they’re coming from a different class as well.

Fundamentally, they were asked not only what their problems were, but also how they envision these problems to be solved. For example, one probing question included in the interview was to describe their own ideal online academic syncing platform, in terms of experience and user interface. One of the interviewee said:

“I want it to be easy to navigate, organized, straight and clear. User-friendly basically.”

Given the insights about problems and ideal expectations that stakeholders have, we are now faced with the overlying How Might We question:

How might we create a more efficient way (storage and time-wise) for students to receive announcements and files from professors rather than having multiple platforms?

Proposed Features

From the key issues that my stakeholders faced upon accessing the platform, I looked at parallel systems that employed a solution and drew out inspirations for the proposed features. Purposefully, I sought to first introduce features that only answered to the problems. These were:

1. The auto-enrollment system can be integrated with the use of the OBF email, which also should serve as a cross-checking that only bona fide Ateneans are able to enroll into the classes present.
2. Algorithm can be organized in a way through a filtering system/organizational system either chronologically set, highest engagement, or tagged in level of urgency (possibly manually set through a provided option upon posting).
3. Presence awareness can also include further push notification to allow more interactivity with the platform.
4. Neural network feature can be designed to auto-detect the people with the highest engagements with each other in the platform or of other cross-platforms (extended).
5. Push notification can be placed up a notch by having an SMS feature that will help one see information disseminated without having to access the internet.

User Journey

User Journey Map of an Atenean student with Integration of Proposed Features

Making sure that these proposed features would run well into the experience and to better empathize with the users, I mapped out their user journey. This goes with the assumption that the proposed features are already integrated into either the website or the app. In summary, I have observed that my users want to maximize efficiency by being able to do a given task in the fastest and shortest way possible while staying organized. Commonly, users can also get easily confused (and later on, frustrated). This means that the task that will be given has to be straightforward as best as it can be.

Job Stories

Alongside the user journey map, I also created 5 job stories in order to represent different motivations of using the website/app. This would give me a better insight as to how users would tackle a task individualistically and help me create a more inclusive design. The job stories were as follows:

1. As an on-the-go student, when I need to check on possible online tasks set, I want to be able to get the option to be informed through push notification and/or SMS, so that I can see it faster and won’t always necessarily need to open WiFi connection.
2. As a beadle of a class, when I have queries or announcements for the group, I want to be able to easily contact my professor or my classmates instead of email so that it saves both of us time and space.
3. As a hands-on professor, when I just want to review the schedule and pace of the classes I’m handling, I want to have the resource to focus the content that’s customizable to whichever order I deem it fit depending on urgency or importance so that I won’t have to keep on looking for certain content.
4. As an org-active student, when I schedule my workload, I want to actually see the deadlines sync with my time so that I don’t have to have the extra hassle of organizing and weighing it out with other activities and meetings that I might have already booked beforehand.
5. As a teaching assistant, when I open an academic platform, I want to easily categorize the workload for different types of things (like class, weight of the work, deadlines) so that I will always be on schedule with the tasks at hand for my students and that there’ll be less chances of overlooking the requirements discussed in class as there’ll be better surveillance with a good filtering system.

Wireframing

Now that I knew how the behavior of users would go about and what features are necessary in trying to solve the problems that they face, I already had ammunition in finally creating the interface design. I first made use of paper prototype to simply have a visual guide of the information architecture I was envisioning. Major pages included are the homepage, notifications, grades, schedule, and archives.

Mock-up of Website and App of BLUEBeadle

Prototyping and Testing

After designing the product on paper, I used Figma to create an interactive prototype that would better represent the design. At this point, I was envisioning the user interface to be three things: (1) clean, (2) easy-to-navigate, and (3) familiar. The first two characteristics were fairly self-explanatory. These were more geared towards following design elements and techniques like maximizing white space and maximizing ratio measurements. Making it familiar, on the other hand, meant giving the user an experience that they are used to. This allows the cognitive patterns to be reinforced and allows the overall experience to feel less heavy in terms of the learning curve.

Technical Aspects

It may be evident that the interface also reinforces the brand of Ateneo using blue and white religiously. I found this to be an effective strategy in acquiring trust from users to use the app, as it also provides a sense of familiarity. For leveling off the contrast between parts and its grays, I used a faint blue tint coupled with faint drop shadows as well. Pops of color indicate call to action or segregation of files, which will allow the user to easily identify and organize the cognitive load.

To view the full walkthrough with the interactive prototype, you may view this screen recording I’ve made by clicking the link below.

BLUEBeadle

Testing & Recommendations

After refining the interactive prototype, I proceeded with doing a guerilla usability testing that assesses how usable your website/app is. The way that I underwent mine is by personally meeting up with them, took a video of their reactions (with proper consent), and made them do certain actions by giving them scenarios that require task fulfillment. They were also told to speak out their mind as they do the work, but the facial reactions were also taken into consideration in evaluating. I assessed the results by grading it 1, 2, or 3, with 3 being that the user was able to do the action with ease and 1 being that the user wasn’t able to do it at all.

The results proved that most of the stakeholders were able to complete the tasks with ease. In fact, reactions (including both verbal and non-verbal cues) to the prototype showed that they were confident in navigating the page. Several of which also keyed in their satisfaction in the interface’s similarity to social media platforms especially with regards to the feed.

That said, there were minor hesitations in the fetching of unread notifications for mobile mock-up and the changing of color preference in the schedule part. While they were still able to complete the task, they expressed their struggle in doing so. Apparently, fetching notifications, being the first feature used in the accessing of the Hamburger, caused frustration since some users might not be familiar with what the Hamburger icon would lead to (navigation). On the other hand, the color preference for the schedule did not really have any instructions that introduces this feature, so I tweaked the design to accommodate such.

While discussing about the highs and lows of the prototype, my stakeholders also provided suggestions of things that they believe can help improve the product. These are the following:

1. Providing an option to go “offline” for chatting.
2. Make chatting more collaborative (like Slack, Discord, etc).
3. Removing the registration page altogether.
4. Adding more features for the professor’s side of the website.

Personal Insights

Photo Courtesy of Alexis Collado 2019

Overall, I am very grateful for the countless things that I have learned through UX University. Having started my UX journey just a few months prior to this, I was already doubting my capabilities since day 1. However, I loved the fact that UX University was geared less towards just being another “competitive” event but rather something that truly aimed to guide the participants. In fact, the speakers, including Andrea Chung, Brian Tan, Alexis Collado, Kate Rustia, Jiggy Villanueva, Andre Sevilla, Avery Si, and Frances To all brought very fresh and comprehensive tactics in becoming a great designer. I am also owe a lot to my UX University mentor Andre Sevilla, for being extremely patient and for guiding me every step of the way. The same gratitude I have for Kate Rustia and Frances To, for having been there to teach me everything I know now from the baby steps of my UX journey.

Just as much as I’m thankful for the things they have thought, I am also very glad for the humbling experiences that goes beyond what is said. Going into the final pitch, I was headstrong and confident. However, with the suggestions provided by the judges, Ely Apao, Chi Señires, and Mark Lacsamana, I really felt humbled and thankful — and in that way I already felt like I won something that I just couldn’t form into words.

I may not have placed first, but nevertheless I didn’t feel like I lost. In fact, I didn’t really lose anything in the first place. I gained and gained and gained. I learned and got even more motivated for what was to come in my UX journey. It may have been 2 weeks long of catching deadlines, stressing, and rehashing but now that I look back, the time it took from point A to point B was all too definitely worth it. If anything, UX University taught me just how much design matters, and how important it is to keep on improving your craft. Because after all, your main goal should always be improving your user’s experience.

Photo Courtesy of Brian Tan for User Experience Society 2019

Hi, I’m Camille Puentespina.

…and this is my first Medium article!— If you liked this story, please don’t forget to clap, leave a comment, or both. I am currently a 1st year student in the Ateneo de Manila University looking for a UX/UI internship. If you ever might want to contact me for queries and collaborations, feel free to shoot me an e-mail at camille.puentespina@obf.ateneo.edu or connect with me on my Linkedin.