Socio Mobile App - Education Technology

PROCESS

Socio mobile app allows students and teacher interact each other using the app features, such as accessing teaching material, quizzes etc. The app has a bit complex features so we need to seriously think the whole user flows. Below are the User flow map and Wireframes design.

EMOJI'S & ICONS

Illustrative Icons for empty state and connection error

Icons Set for the interface

Emoji created for the user to give a reaction on post feed

1. LOGIN PAGES & ONBOARDING

Onboarding Screens.

Login screens.

2. Homepage Feed

Homepage feed is basically updated post from public or the official (university). The aim of this page is for receiving update or sharing/send the update to the community. The light color choice enabled a user to read clearly & comfortably in a long period of time. There is 2 type of post, which is Public and Official. Where Official post is from the official Campuses, and Public is from students. The user can interact with the post by commenting or reacting. Not only that, the user can also create their own post. There is various type of post feed, from text, images & video, files, youtube, link, and event. An event can only be posted by officials. A user can also search for other user profile or Class from this page.

The feed

Various type of Card on the feed timeline.

Interaction

Various Interaction on the homepage, including emoji selection, commenting, searching, and confirmation.

Add new post process

The user can select file, image or link or just text for the post.

3. GROUP / CLASSES

Every student has default Class, it can be one or more than one. In class detail, it’s similar to homepage feed, but with more detail about the Class. The user can access the Class member and directly message him/her, info and Menu.

The menu can go to the class assignment, quiz, questions, and teaching material.

4. ASSIGNMENT

The assignment is the list of task that student must work, collect, and upload it. The assignment can be team work or individual. With certain due date, the students must collect/upload the task on time before too late.

The uploading assignment process.

5. QUIZ

The goal of this page is to provide the user with capabilities to search, create and participate the quiz. The quiz can be accessed from the profile or group profile. There is various type of quiz, Multiple choices, Essay, Short Answer, True or False.

Taking Quiz Process

The Results

Creation of the Quiz

There is various type of quiz, Multiple choices, Essay, Short Answer, True or False.

6. TEACHING MATERIAL

Teaching material is basically a list of learning material uploaded by the teacher. The students can download and open it.

7. Questions

Questions page, is question bank which contains question from anybody. The student can create, search, answer and view detail question. The student can also rate the questions. Special for question creator, they can mark the question as answered.

8. CONVERSATION

Conversation is crucial for learning platform, so this is a feature that the app must have.
The user can chat with individual people or the group of people. Attaching something at the conversation detail is also possible.

9. NOTIFICATIONS

Notification center is a combination between general notification, like reaction, comment etc. But also with the special area for the upcoming assignment, quiz, event, conference.

10. PROFILE

The student can go to their profile page to see their post, notes & todo, quizzes, and also edit their profile. Create a note and to do list is one of the features of this app. The student can also view quiz that they take.