user's avatar
Socio Mobile App - Education Technology

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. 

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
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.

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.

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.

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.

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.


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.

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.

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.

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.
11. EMPTY STATE​​​​​​​

Empty state is a state where there is nothing on the page. Or there's trouble like the internet is offline.
Thanks for watching! 

visit us on or send us a message at 

Add our skype id : fikristudio


Credit Fikristudio's Team for this project:

Art director & Project manager
Bagus Fikri

UI designer 
Panggih Samudra

Zazuly Aziz


Let's connect: |  Facebook  |  Dribbble  |  Instagram
Socio Mobile App - Education Technology

Socio Mobile App - Education Technology

education technology mobile app