Overview
Being a fresh bud in user experience (UX), I was looking to gain some experience on my own in terms of designing. A huge hackathon was coming up in my school, so I decided to participate with another UX friend of mine, Joel, hoping that we could come up with something in 24 hours. We decided that we should at least come up with a working prototype before the hackathon ended, which we managed to do. We lacked the time to properly plan for visual elements, so the design ended up visually simple.
Introducing Buoy, a classroom experience app which connects classmates with one another. It functions as either a live chat, a discussion forum, or a scheduler for group studies. Its functions are simple and easy to use, without much layers behind it. It strives to fill a gap in universities today — a lack of interaction and help between classmates.
Problem
We first began with a problem in mind — how can Buoy help us in our daily lives as students? Being international students studying in an overseas university, everything is near foreign to us. The education system, the people, the tipping system, these are just the little things which accumulate into a mountain of problems we had to deal with studying here. We identified a main issue that we shared with other university students — a lack of communication between classmates.
Challenge
University students are often so caught up with academics and personal priorities that most, bar a few students, actually take the time to reach out to their classmates in class or out of class. No one ever talks in class, everyone leaves right after it ends, there isn’t much communication between classmates. For international students, this is a nightmare as we don’t have someone to look to for any advice regarding classwork or exams. Yes, we do have Teacher Assistants (TA) or the lecturer, but what if their office hours are conflicting with our own schedule? Our only resource are our classmates, which most students do not ever fully utilize.
Hence, we decided that we should design an app which bridges the communication barrier between classmates. We want it to be “that app” which students goes to for advice from classmates; “that app” where students can easily schedule group studies; “that app” where students can have a lengthy discussion about what happened in class.
Goal
We fully understood that there were other apps/websites in the current market such as GroupMe or Carmen which certainly fulfil the “interaction between people” gap. However, we decided that we will be able to stand out from the others by embracing 2 basic principles — simplicity and minimalism. Our ambition was to create something that builds on a common goal between university students — to pass/excel in class.
We established certain requirements:-
- Act as a connecting ground for classmates to seek help and meet new people
- Simple, fast and efficient due to hectic class schedules
- Suited for most, if not all types of students (international, transfer, domestic)
Foundation
Distinguishing Buoy and similar apps
When the idea for Buoy emerged, we will concerned on how its functions overlapped with other classroom experience apps such as Canvas and Blackboard, or messaging apps such as GroupMe and Messenger, or forum based apps such as Piazza. We wanted to look between the lines to see what features were missing in the apps above that we could potentially fill. So, we started from the basics.
The concept Buoy is based around was to encourage interaction and break communication barriers between classmates. Yes, similar apps like GroupMe CAN fill that gap, however, we believed that it required something extra from the user — initiative.
To form a class group, you’d have to seek out other classmates to ask if they’d like to be a part of it. If you’ve already created one on GroupMe, you can always send a message on Carmen/Blackboard to the entire class with an invite link, sounds simple, right? Well, the main issue is that not many students check their inbox on classroom apps. Based on observation in my classes, students have accumulated large numbers of messages in their inboxes without actually reading them.
On the other hand, Piazza executes the idea of bridging the initiative gap really well. In Piazza, you are automatically added to the class discussion forum as long as you log in with your university ID.
Hence, we decided that Buoy should stand out from the others by removing the need for initiative, and yet have similar functionality like the others (think Piazza but with more functionality). Hypothetically, we could obtain the list of students in a class and automatically add them to a class group in Buoy. If they log into Buoy, you will appear in the class group, just like Piazza. This would provide a platform where everyone is on the same boat. All we need is just to type a message without being concerned about your characteristics that will affect social interaction (eg. looks, speech patterns, body language), thus can hypothetically remove social barriers.
Persona(s)
We began thinking of several criterion that constitutes the users for Buoy. Factors such as their class rank, major, age, outgoingness of a student, or even external factors such as the class size will change how the user interacts with an app. Will an introverted student use Buoy more than an extroverted student? How will Buoy bridge the gap between international and domestic students? Will the students be more tempted or intimidated to use Buoy if the class is huge?
The only way to find out more was to conduct user research in order to obtain a gauge on how our potential users (college students) will react to Buoy. However, as it was a hackathon, there were hundreds of students gathered in a huge hall. but busy working on their own projects that we couldn’t find any potential subjects for user research. Hence, we decided to improvise.
Using our own knowledge and experiences as students, we devised 3 different user personas that will potentially be the users for Buoy.
We believed that these 3 personas best represents the user base that we were targeting. Throughout the entire design process, we kept referring to the personas we made and consistently asked questions such as:-
- “Will Daniel like this?”
- “Is this feature useful enough to help Rachel?”
- “Will LiZhun will find this useful?”
They helped us shape how Buoy functioned as they provided an understanding on the type of users we should design around. Their expectations served as the baseline and foundation on how everything was organised or functioned. They served as the main focus for our project and helped ensure that all design decisions were focused on the user.
Storyboarding
After coming up with personas that we will base Buoy around, we decided to think of certain scenarios in which Buoy will actually be useful to solve a specific problem. We utilized storyboards to help visualize a problem, a solution, and a result.
We described the situation that the user is facing using words. We wanted an outline on how a scenario will play out to ensure that it should fit perfectly into the problem that we wanted to solve. It should also replicate the situations that our personas face.
Next, we built on the brief scenarios by going into specifics on how Buoy will help solve the users’ problems. We brought in Buoy’s preliminary functions to ensure that the functions actually play a role in helping the users and it wasn’t just a “display item”.
Ideation
Buoy was to have 3 main functions in it —a live chat, discussion forum, and meetup scheduler.
- Live Chat
- Users may chat with the entire class to ask quick-fire questions. Users can also attach images, videos, or files to send it to other users. We played around the idea of a private chat between 2 users but ultimately decided not to as it will end up being another messaging app.
2. Discussion Forum
- This forum promotes discussions on assignments/projects that the students want to have. It is inspired by Piazza, a discussion forum that computer science classes in my university use. Users are able to reply to posts/comments and can also can “Give Thanks” to other users who were extremely helpful in their replies.
3. Meetups
- Meetups is meant to be an extremely simple group scheduling function. The user can select any date, time and location to schedule a group study or discussion.
We iterated several designs of how each function will look like and began working on the user interface.
Interface Design
Throughout the interface design process, we followed the guidelines of Nielsen’s Heuristics to ensure that we designed around what users needed.
Nielsen’s Heuristics
Consistency & Standards
Icons in Buoy adheres to consistency and platform standards, where it takes advantage of the schema that the users created from other apps to ensure familiarity if they use Buoy for the first time. This eases the burden on the users and flattens the learning curve more on them since they’d be able to use prior experience of other apps to use Buoy.
Visibility of System Status
We wanted to ensure that Buoy constantly informs users of what’s going on within the app. We decided to fulfill this by providing feedback on the users’ decisions. For example, if the user wants to attend a group study session, he/she should expect the app to know which one he/she picks. Buoy will produce a pop up window to reconfirm with the user if the meetup selected is correct. This also allows the user to refresh their memory on the meetup details in case they’ve forgotten it.
Recognition trumps recall
To improve usability for Buoy, we decided to add labels with their corresponding icons to ensure first-time users can easily jump into the app without prior knowledge of how it functions or how it looks like. We wanted to avoid the pitfalls of minimalism and opted for functionality instead. Although this decision may be a double edged sword as it displays more words on the screen, something that may make information searching tasks harder.
After completing high fidelity mockups, we proceeded to create a prototype to test how each page will connect with each other.
This is the first prototype of Buoy created on InVision during the hackathon.
User Testing
After the hackathon ended, I conducted multiple user testing sessions to obtain feedback on Buoy, and if any possible improvements that can be made.
Methodology
Testing Domain
As the prototype was created on InVision, I utilized InVision’s “Live Share” function to conduct the testing. In Live Share, I’m able to observe the mouse movements of the users while they’re using the app. As such, I can easily pick out any instances where I notice an anomaly, which I will then record down.
Sample
Due to time and resource constraints, I utilised a convenience sample of several university students. I posted on Twitter looking to find college students to conduct user testing, in which a few of my friends volunteered for. There was a total of 5 participants, ranging from the age of 20 to 22. They are all college students, 4 of them in the US and 1 in Australia.
Procedure
The testing session utilized a verbal protocol method, also known as thinking out loud. The idea is to allow me, the researcher, to understand what was going through the users’ mind.
As this was the first user testing session for Buoy, I had to ensure that the app’s general functionality was coherent. Hence, I compiled 10 tasks/scenarios/problems that the user could potentially face which they can use Buoy to resolve. Here is the task list:
I also included several follow-up questions to get a more subjective response from the users. For the final part of the testing session, I asked for clarification on several issues I found while observing the users’ mouse movements.
Key Takeaways
- Users generally found the app easy to navigate and not at all confusing to use. They could easily locate areas to complete the tasks given.
- Users had no trouble completing most of the tasks except 2 — task 3 and 7, which after further questioning, was concluded to be due to a lack of clarity in Buoy. (I address this below)
- Users requested the addition of new functions to make the app seem more accessible, natural and less “constrained”. In fact, all of the users asked to include a private chat function.
Post-Testing Changes
New Features
Private Chat
All of the users I interviewed asked for a private chat, the reason being that it might be really awkward to just have a classroom chat by itself. We first objected the idea of a private chat as it would make Buoy seem very much like other messaging apps such as GroupMe, and that we were trying to cultivate an environment where classmates are united. However, retrospectively speaking, a private chat will be useful as you already have all your classmates in 1 place, hence you may talk with whoever you want, whether privately or in the class group.
Invite classmates
We added an “Invite People” function to our meetups list as our users thought that it’ll be easier to reach out to certain people you want in their meetups.
“Saved Posts” button
We took the “Saved Posts” function out of the Settings tab located in the 3 dots and placed it on the Forum top bar instead as users had trouble locating where “Saved Posts” was located.
“Search” button
We added a “Search” function in both the Chat and Meetups tab. In the Chat tab, it will search for either the user that posted the message or specific keywords like WhatsApp.
Meetup Hosts’ Name
In the Meetups tab, it will search for meetups by a specific host. Hence, we had to place the hosts’ name in a meetup as well to ensure that users obtain accurate feedback from the app.
UI Changes
Labelling
This was the issue that users faced in tasks 3 and 7. Users thought the tick icon was just an indicator and not a button you can tap on. Users went for the “Remind” button instead. Hence, we decided that a label should be included to accurately present what the users’ current status is for the meetup (not going/going).
A couple of users also pointed out to us that using “Bookmark” as a label to save posts wasn’t clear and concise enough. Hence, we changed it to “Save” as it more accurately depicts what the function does — save a post.
Buoy was well-received by users in general. Besides the fact that the app wasn’t as visually appealing as they like it to be due to it being in a prototype phase, they thought it was really user-friendly as they could complete the tasks assigned to them without much trouble.
Reflections
Since it was Joel and I’s first UX project, we could only muster the knowledge gained from online courses/books to use. However, we were very proud of ourselves for being able to iterate through the design process in order to solve a problem.
There were several things that I’ve personally learnt from this:
- UX isn’t an easy job. It requires lots of time and effort to just do something as simple as thinking of a concept. And especially since I was in a 24 hour hackathon, there were things lacking which would’ve made life easier (eg. user research).
- User research is VERY important. I initially thought that we could just conjure up our own users because… How hard is it to empathise with others, right? Well, I was proven very very wrongly while working on Buoy as we struggled to figure out who to design around. Due to circumstances, we were forced to design based on our own assumptions which is something I definitely wouldn’t do in the future.
- Designing around the user is of utmost importance here. Working on Buoy further proved to me that design isn’t purely based on visual elements. I’d argue it’s more of the ground work that gets laid out before ideation, which leads to the next lesson.
- Laying the foundation is extremely important, especially when you’re starting from scratch in building an app. There are so many things to consider as a UX designer, from research, to personas, to storyboarding. There were some important steps which we missed out such as information architecture, which I would really like to try out soon.
Conclusion
Joel and I believe that Buoy can be useful for university students today. We believe that it solves an underlying issue that many people unconsciously feel. I will continue to work on Buoy’s design to make it look like a full-fledged app. There is a high possibility that nothing might come to fruition for Buoy, but it’s definitely given us a huge learning experience and introduction to the world of UX.
