Skip to content

Our Design Process

Hazeem bin Suffian edited this page Oct 21, 2022 · 30 revisions

Promotional Materials

Mungus Instagram Link:

https://instagram.com/culturally_mungus?igshid=NzNkNDdiOGI=

Presentation Slides Link:

https://docs.google.com/presentation/d/1G7-rpWk7vWFlpJPs1WEohPlCHHwg_Qem-r2hlUsRTwo/edit?usp=sharing

Conference Poster:

Screen Shot 2022-10-20 at 11 17 21 am

image

Prototype Link

User will require cloning of this git repo before opening up the html files.

Go into command prompt/ terminal. Type in "Git Clone https://github.com/a-siroki/mongus.git" - This should clone the latest repository and allow you to open up the web application. - Alternatively, you can download the entire repository by clicking "Code" and selecting the download zip file. Upon unzipping the file, open the index.html. Please make sure that all details of the form is completed before submitting to the next form. Your name will be a key aspect of the implementation of the prototype. Without this, the web application WILL NOT WORK properly.

Summary

Many international students tend to struggle with cultural integration into local culture as they often fail to make local Australian friends. Similarly, many local students who have just enrolled at a university struggle to find new friends, particularly at the beginning of their university journey.

Our research suggests that people in the university setting form long term friendships based on common interests or goals, ranging from classroom coursework to personal hobbies and achievements. We leverage these insights to bring a novel solution to the market, aiming to provide international and local students with an opportunity to develop relationships with each other from their first day at the university.

Mungus is an instant messaging social platform designed for incoming international and local students. The app consolidates students of different backgrounds, languages and ethnicities by automatically allocating students into group chats based on their hobbies and interests with relevant data captured as a compulsory survey during the sign-up process.

To increase the probability of active chatting in the group chats, the compulsory survey captures data related to each user’s social skills such as leadership ability and level of extrovertness to identify and designate a team leader (admin) for each group chat, responsible for maintenance of the allocated group chat. To further stimulate chat activity, gif notifications and local community event notifications are automatically pushed into the chat on a regular basis.

To leverage Mungus capabilities, we advise the university to make the sign-up process mandatory for all incoming students during the welcome week.

Process

How did you tackle this problem?

Narrative/Theme The Mungus solution was created to help international students culturally integrate into the University of Queensland through a selection & sort-themed chat function.

Nodes

  1. Filling out the google forms
  2. Interacting in the group-chat
  3. Sending each other gifs & events
  4. Attending in-person events with group members

Trajectory

  1. Filling out google forms
  2. Being placed in a group with the most common sets of interest
  3. Interacting with individuals in the group
  4. Attending in-person events with group members
  5. Creating friendships over the course of the semester
  6. Culturally integrated into the UQ ecosystem

Tools

  • Participant owned: Phone, Tablet, Laptop, Desktop
  • Site-owned / introduced: web browser, Mungus website

Public face

  • Open and familiar; website & its functions are intuitive to use
  • Inclusive; every function is inclusive to a broad ranged audience
  • Interactive and engaging ; functionality is created to drive engagement amongst participants

Limitations

  1. Cannot force human interaction, can only guide them close to points of interaction
  2. Testing final prototype would require a lot of time and resources therefore the simulations are not tested more all cases & could present test case bias.
  3. Initially began with an event-driven solution which will host an in-person event for international students to meet other students, however, this failed to find sources of inspiration for participation
  4. Then transitioned to monetary incentives for cultural integration, but this meant that the relationships were not created organically and were highly dependant on the incentive
  5. Finally evolved into a solution which sorts all new UQ students according to interests, background and language proficiency & placed them into group chats.

Design Evolution

  • Low fidelity prototype: the goal was to sketch initial thoughts on a paper and evaluate the concept with the users
  • Medium fidelity prototype: primary prototype which was used to evaluate usability issues
  • Chat simulation: secondary prototype to simulate environment where participants formed groups based on common interest
  • High-fidelity prototype: an MVP based web application that is consistent with the system requirements derived from research and user needs

Prototype

Initial Prototype

We used several different storyboards to design initial sketches according to the needs of our user group.

image

Storyboard of one of the regular users

As seen in Figure 1, we made a low-fi prototype in order to quickly visualise the concept and present it to our target users early in the process. The purpose of this was to see if our target users would use and find value in such an application. This also helped us make future design decisions such as ideating on user interface.

image

Figure 1: Sketch of the initial prototype

Figma & Simulations

As seen in Figure 2 Medium-Fidelity Prototype was introduced to further improve usability and design of an interface according to the user needs

image

Figure 2: Medium fidelity prototype we used to test and improve our concept from usability perspective

As Figure 3 indicates, we needed to create an interactive chat simulation to prove that the concept works. We simulated the experience to test the effectiveness of our concept using a Discord server as a chatting platform.

  • Based on a common interest, in this case being CSGO we found 5 volunteers, three international students and two local students and placed them in a discord chatting channel together.
  • We found that our concept worked, the users were actively interacting/chatting and the simulated ChatBot worked to spark up conversations when it died down.

image image

Figure 3: Chat simulation using Discord Second prototype was used to test assumptions in relation to our concept.

User Feedback

Concept:

  • Introduce a community wall pages for events - not tied to user’s specific interests
  • Inform the user that he must sign up with UQ email in the Sign Up process.
  • Improve survey questions - provide a clear reasoning for the goal of the survey

Usability

  • Clear title for the survey page - “Personal Characteristics”
  • Add a search bar to search for any group chat
  • Make the buttons larger, interactive (Hover effect) and more colourful
  • Make group icons interactive - add a Hover effect

Iterated Prototype - Web Application

Final version of the prototype was built from insights collected during user testing session, chat simulation, interviews and observations. We used it to conducted final user testing session for this sprint.

image

Final prototype in the form of a web application

User Feedback

We conducted a user testing session to evaluate our concept from two perspectives. The goal was to improve the overall satisfaction from using the app.

Team Roles

Sergey Gerasimov

  • Research, Interviews, Data Collection and Analysis
  • Concept Design and Requirements
  • Figma Prototype
  • HTML pages for Coded Prototype
  • Documentation

Aleks Siroki

  • Academic Research, Interviews, Observations
  • User testing sessions
  • Testing session analysis and reflection
  • HTML, CSS for web application
  • Documentation

Yash Sharma

  • User testing in three rounds of interviews
  • Data analysis of interviews
  • Product research when pivoting
  • Concept design for group chat simulation
  • Documentation
  • Formed product pitch

Caleb Ang

  • Observations
  • Interviews (Interview Test Plans/ User Interview Analysis)
  • Story boarding
  • Personas
  • Framework Analysis breakdown
  • Web application program implication (HTML/CSS)
  • User Testing Plan & User testing results analysis

Sean Di mario

  • Observations
  • Interviews
  • Data Analysis/finding insights
  • Concept Design
  • Personas
  • Low-Fidelity Prototype
  • Promotional Material
  • Poster

Hazeem bin Suffian

  • Observations
  • Interviews
  • Extracting Insights
  • Personas
  • Creating Functionality of Web Application (JavaScript)
  • Documentation