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

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


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