Case Study — Socializing App For Online Students

Natalia Świerz
10 min readMay 31, 2021


OnCampus — Socializing App For Online Students

Executive Summary

The main purpose of this Case Study is to build a mobile application to boost socializing between peers studying online who don’t experience physical contact by meeting each other on campus.

The trigger of this research topic was the outburst of Covid-19 and its consequences for the students' community. Overall, 8 students were interviewed and observed to find out about their learning habits and online studies obstacles.

The project was realised in a Design Methods class with a fantastic team Natalia, Lea and Krishna and involved the full design methodology process as can be seen below.

Methodology process

  1. User Research
  2. Analysing the context of the use
  3. Specifying the context of the use
  4. Designing the user interaction
  5. Prototyping an interactive system.
An exemplary user of OnCampus App — Malee

The app aims to partially substitute the experience of studying abroad which embrace more than just gaining knowledge, i.e. meeting new people, cultural experience of living abroad, hanging out after classes. It has been assumed that students are missing out on exposure to new opportunities and challenges which results in worse engagement of their studies. They also lack the structure of organizing themselves and their time in the course.

Target group: Student community studying abroad and freshmen students.

Purpose: Get to know your peers and organize your time.

Methods: Semi-structured interview with open questions, observation of non-verbal behaviour, audio-recording, coding raw data (inter-& intra-coding), internal and external validity, the framework of findings.

1. User Research

The first step in order to prepare the qualitative analysis of the context of use is to plan the observation and the interviews. Structuring the interview questionnaire coupled with choosing the right participants is the crucial part if we want to get valuable insights. Therefore, we have prepared digital documents to stay organised:


  1. Interview & observation template

We divided the interview session into two parts: one where basic questions are answered that would usually be covered in a proper observation (A) and the actual interview questions that aim towards our objective (B).

2. Consent form

3. Post interview template

This template was for the group members to recapitulate particularly interesting aspects and general facts immediately after each interview.


A useful tool we discovered was Airtable where we stored all the documents including transcriptions, recordings and consent forms. Thanks to that we were always up to date with the other members' state of work.


The questionnaire was tested with a family member of one of us to assess the time needed for the interview and to test the tools and practice. The time taken for the questionnaire was 17 minutes, and adding a time buffer for technical set up we assessed the overall time for 30 minutes.

2. Analysing the context of the use

After performing 6 extensive interviews there was time for transcribing them and translating them to English if needed. Once we all did it, we began the interpretation of each interview unit (one sentence or sometimes one thought). The ‘coding’ describing the meaning of the sentence must have been contained in one-two words which later have been clustered to larger concepts and even larger categories.


A sample of the extracted codings can be seen on the pages below.

Reliability — Intra-Coders Agreement Rate

The coding activity has been performed twice with a 5–6 days gap between the two attempts so we could compare the outcomes from the first round and exclude coincidences. If the coding was conveying the same concept but it was structured with other words we have still counted it as a successfully repeating one. We also noticed that the more specific codings in the first round, the lower the intra-coders agreement rates. Also, the number of codes was smaller the second time and more specific as after going through multiple interviews and working with the data, the coders got a better grasp of relevant codes. Together, we managed to get a really good outcome of 0.84 which means that the coders were quite consistent.

Intra-coders agreement rate

Reliability — Inter-Coders Agreement Rate

Furthermore, an inter-coders agreement rate was performed. The main rule was to check if 2 out of 3 coders coded the same content in a similar way. Since the interviews were semi-structured with open questions, there was freedom to answer and coders set different focus on the content when coding. After counting the reliability this time we got 0.608 in agreement rate which means it is moderate and the codes are somewhat reproducible.

Inter-coders agreement rate

Reliability — Fleiss’ Kappa

As the last part of reliability checking, we performed a Fleiss’ Kappa calculation where the agreement rate was 76.19% and the Kappa value was 0.75 which shows that the reproducibility of the coding is substantial according to the table.

Overall the coding was quite consistent and has a reasonable level of reliability.

Fleiss Kappa Reliability

Internal Validity

Then, we also checked the internal validity which included:

  1. Data collection triangulation — we ensured that there are six different participants from six different countries, representatives of the opposite genders, interviewees studying the international Master program online.

    External factors of the interview represent the actual online studying conditions: the same place and set-up as for attending online classes. This ensured context enquiry.
  2. Methods triangulation — The qualitative analysis included semi-structured interviews with open questions, including questions covering observational aspects, audio-recording, taking notes for additional comments and non-verbal behaviour, coding raw data (inter-& intra-coding), framework divided into codes, themes and categories, draw conclusions.
  3. Coders triangulation — We used a document template for transcriptions and codings and we coded all the interviews parallelly without influencing each other.

External Validity

Even though our focus group was small and diverse, they mentioned the same aspects and problems that are faced by first-year students who study online in an international program. The results can be used to power further studies in the future. Data analysis was meticulously done followed by finding themes and categories from the raw data vigorously. This detailed approach showed that external validity is given even with a small focus group.

External validity


Thanks to the clustering method and extracting the essential information we were able to create a framework of the main issues which may later help us identifying the underlying problem in online studies.

Framework 1/3
Framework 2/3
Framework 3/3 and Observations

3. Specifying the context of the use

Based on the previously mentioned methods — semi-structured interviews, observation, information clustering and framework creation we managed to specify the main issues in online studies.

Main problems

  • Keeping track of deadlines, meetings and classes.
  • No common student space to exchange experiences, discuss ideas or rant.
  • Lack of personal bonding and feeling isolated.

Personas and User Needs Statements

To better empathize with the potential app users, two personas have been defined.

Tom Müller, a sociable 23-year-old International Management student, needs one platform to interact with peers to find friends in his online classes at university.

Malee Chen, an organized 25-year-old HCI student, needs a place to organize all her notes, deadlines, and messages to achieve success academically as a student and professionally at her job.

Task Organization Model

The task organization model helped when defining the tasks which would be performed in the app. Meanwhile, two main app purposes were identified:

  • Organize your studies
  • Interact with peers

Task Scenarios


To get a good grade on an assignment, Tom wants to ask a classmate for help solving his questions. First, he needs to make sure that he actually knows what exactly he did not understand. Then, he needs to check which other students are in his class and hence working on the same assignment. After that, he decides that instead of asking everyone in the class’ group chat for help, he wants to reach out just to one classmate he interacted with, in the online class before. Therefore, he needs to choose a suitable channel. Since he knows his classmate’s phone number from the WhatsApp group chat, he decides to send him a private message on WhatsApp. In his message, he introduces himself shortly and then asks his question and which assignment it is referring to. Then, he waits for the reply. Later, his classmate replies to Tom’s question and solves his doubts. In addition, he recommends a website with useful information. Tom thanks him and politely offers his help for assignments in another shared class as he already had a similar class in his Bachelors and knows the content. Tom finishes the assignment then and gets a good grade in the end.


To organize her studies, Malee Chen needs to manage all her tasks and group works. Therefore, the first thing she does in the morning is to check her Emails and all the upcoming deadlines on the student platform. To keep track of all the assignments, she prioritizes them according to their due date and creates a to-do list. After that, she is making a plan for the next few days and thinking about when to work on which assignment and when to schedule group meetings. Then, she updates her calendar accordingly and adds both the Asian as well as the European time for the deadlines. After that, she reaches out to her group members trying to find a convenient time for everyone to work on the assignment together.

User Flows

Staying organized

User Flow


User Flow

4. Designing the user interaction

When the structure of the app was defined, the next step was to design the wireframes. Figma was used to develop the low fidelity prototype with some of the layout displayed below:


Also, the navigation map was created to see how to reach all of the screens.

5. Prototyping an interactive system.

After performing user testing, some major obstacles in task completion were identified and substituted with better solutions. In the next phase, the design system was created including:

  1. Colour scheme

2. Typography

3. Elevations

4. Icons

5. Components

The outcome of this research was an OnCampus app which can be seen in use in the links below. The videos show the tasks scenarios and the tasks themselves performed on a mobile device with the use of Figma Mirror.

Task 1 — Create a temporary group chat and socialize with peers

On Campus App — Task 1

Task 2 — Create a new deadline for the HCI class

Thank you!

Find me on LinkedIn:

or Dribbble:



Natalia Świerz

➰Aesthetics enjoyer, 🤹‍♀️Psychology freak, 🙋‍♀️People-oriented