MMS Live Chat

Role

Sole UX/UI Designer

Services

App Design

Mobile App

Motion Design

Industry

Education

Date

6 Weeks

Tools

Figma

FigJam

Adobe Photoshop

info

MMS Live Chat IS A secure, role-gated communication platform for direct, class-specific interaction between Modern Montessori School (MMS) students and teachers.

User Research

PROBLEM

Students (like Salma Shaheen) and Teachers (like Mr. Amer Hussien) need a way to securely and effectively exchange specific academic questions and critical school announcements within a dedicated class environment. This is because they are currently forced to use informal, cluttered personal messaging apps (like WhatsApp) which blur professional boundaries, lead to missed information in large group chats, and lack the necessary role-based access control and communication tracking features.

GOAL

To give Modern Montessori School (MMS) students and teachers a simple, structured, and secure way to conduct academic communication within class-specific communities quickly by using a role-gated, dedicated mobile application.

USER RESEARCH

In order to better understand user frustration, needs, and requirements, I conducted user research through interviews and surveys for my project. My objective was to gain insights into the needs and preferences of users in order to improve the design of my responsive website.

I identified several key pain points and challenges:

  • Time-consuming processes.

  • Limited accessibility.

  • Lack of personalization.

  • High fees and hidden costs.

These insights will guide the development of my responsive website, ensuring it addresses the specific needs and concerns of my users.

USERS

This is an individual project that allowed me to plan, research, and execute each step of the design thinking process as a sole UX Designer with mobile and web UI design experience, including:

  • Conduct user research (including interviews and synthesis with students and teachers).

  • Define the problem and provided insights to inform the ideation phase.

  • Define personas, user journeys, problem statements, and user flows.

  • Create the information architecture and wireframes.

  • Visual design of low-fidelity and high-fidelity wireframes, prototypes, and user testing.

Meet Salma Shaheen, who is a highly focused, goal-oriented 17-year-old student who needs direct and reliable answers to complex academic questions within a clear class channel because she is managing a high-pressure exam schedule and requires a structured, efficient system to obtain targeted teacher support without the frustration of information clutter or the uncertainty of her queries being missed in general group chats.

Meet Mr. Amer Hussien, who is an experienced, professionally focused 42-year-old history teacher who needs a secure, structured platform to efficiently broadcast mandatory announcements and track student acknowledgment because he is managing multiple classes with heavy communication loads and requires a reliable, role-gated system to maintain professional boundaries without subjecting his personal life to constant non-academic interruptions from students.

USER JOURNEY MAP

By creating a user journey map, I aimed to illustrate the process of how Salma Shaheen behaves, feels, and what she thinks while accomplishing her goal of obtaining a public, official answer to a complex academic question using the MMS Live Chat application. This helps to address potential pain points related to uncertainty and information clutter, and identify opportunities for moments of clarity and academic efficiency.

By creating a user journey map, I aimed to illustrate the process of how Mr. Amer Hussien behaves, feels, and what he thinks while accomplishing his goal of broadcasting a critical, official announcement to his class using the MMS Live Chat application. This helps to address potential pain points related to boundary erosion and lack of accountability, and identify opportunities for moments of professional control and assurance.

Lo-Fi

USER FLOW

Begun with creating a user flow:

PAPER WIREFRAMES

Focusing on the core features identified during user research, I sketched the first wireframes using pen and paper.

DIGITAL WIREFRAMES

After numerous rounds of revisions, I have finally created wireframes that perfectly capture the user flow and address the needs of our users.


Hi-Fi

STICKER SHEET

Started by creating a "Sticker Sheet":

USABILITY STUDY: FINDINGS

Following the initial low-fidelity prototyping, I conducted a usability study to gather valuable feedback on the MMS Live Chat system. Now, let's delve into the key findings from this testing phase and identify the specific areas where design improvements are needed, such as implementing a clear Reply-to-Message feature to enhance conversational coherence.

Here are the findings from the study:
ITERATING ON DESIGN

Based on insights from the usability studies, I applied design changes.

HI-FI PROTOTYPE

Building upon the insights gained from the usability study (especially the need for threaded conversation) and the refined wireframes, I then focused on creating the high-fidelity prototype for MMS Live Chat. The goal was to develop a final design that was not only simple and intuitive for both students and teachers but also visually engaging using the school's branding and trustworthy for secure, professional academic communication.


Accessibility Considerations

Takeaways

UI Design

Thank you!

Have a project in mind? Contact me

Have a project in mind? Contact me

Have a project in mind? Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.