step by step the process of designing mobile applications that can help improve the education system in Indonesia
According to Kementrian Pendidikan dan Kebudayaan Republik Indonesia: The key to the success of education is not only from the curriculum and infrastructure that is adequate but also from educators such as teachers and parents.
The teacher educates at school, while parents certainly have an interest in knowing the development of their children in school. Adequate attention and motivation must also be given by parents so that children can be excellent in their school and later can achieve the dreams of the child.
However, many parents only know the development of their children at school only when receiving transcript report . Of course, because parents have their own activities, they don’t get enough information from the teacher or homeroom teacher at all times.
This is where School Talk comes in, as a digital technology product that provides new ways in the student learning process and the process of interacting between students and teachers and teachers with parents.
What is School Talk ?
School Talk is a cloud-based school software platform dedicated to facilitate school management and make it easier for parents to monitor the development of their children in school, in order to actualize the ideals of the Indonesian people to educate the lives of nation and state.
School Talk is available in a web-based school software platform to facilitate school administration management, as well as in the android mobile version for teachers, parents, and students.
School Talk mobile makes it easy for parents and students to monitor their academic development and make it easier for teachers to report on the development of their students. In this study case, I as a UI / UX Designer will share the process design from the mobile app
We have collaborated with a school in the Sidoarjo area that allows us to do research on the products that will be made. In order to avoid unclear allegations and preconceptions on the user, we met some parents of students at that school to disseminate the survey that had been prepared.
From the survey that has been done, we get clear information to formulate some of the following problems :
- Parents of students already have an awareness of the importance of attention to children’s development in school, but do not know how to do it easily
- Even if doing so, parents must contact the school administration or contact other students’ parents to check whether the activity that has been told by the child is correct
- Parents only rely on high “trust” in their children to tell all activities in school, but there are still a small number of students who do not always tell all their activities to their parents.
- Currently the school has not provided enough information about student development that is easily accessible or easily known by parents
Based on these problems, we realize that parents need a way to easily find out all their child’s development information. One way is through a digital platform.
So that with the existence of this digital platform will allow parents to pay attention and monitor their child’s development easily anytime and anywhere.
In order to be used by parents, the digital platform must be user friendly, understandable, and not intimidating.
School Talk’s main target is parents aged 30 to 50 years, smartphone owners, and eager to know the development of their children at school from elementary to high school.
Then I created a persona to focus on certain users. Based on my understanding of people I know will use School Talk. This can be a guide to my design priorities.
I wrote the following job story with Story-Matrix to get a deeper understanding of the product and the users
Simple, Creating good experience with a cheerful design yet useful and easy to navigate, customer needs to how to understand that technology can help them know their child’s activities at school
To facilitate the design of an application that is right and makes it easy for users, a user flow is must be created. I have to determine where a feature must be. Every scenario that will occur in the application will be easily visualized at this stage
Sketches or Lo-fi wireframes
The first step to help me outline the app, exploring ideas and flows. Only by taking markers and paper then draw all the features, requirements, and information that should be displayed on each page. Then arrange each page based on the flow of users that have been created.
This visual guide represents the basic pattern of the application that will be created. By making wireframes make it easier for me to set the application elements on each page that focus on the function not the colour display. Besides that, creating a wireframe directly through a computer can test ideas quickly because when I make it I don’t need to pay attention to other colours and details.
I created inspiration board to learn about visual UI pattern, find and collect inspiration from similar apps.
I determine the key colour in this application is a combination of blue and yellow. The blue colour is the basic colour of the School Talk logo itself. Beside that, the blue colour corresponds to the color of Kementrian Pendidikan dan Kebudayaan Republik Indonesia which symbolizes intelligence, extensive knowledge, and confidence. Then I give a little yellow accent that represents the character of cheerful, happy, energetic in accordance with the character of young people.
For typography, I use one of the free google fonts, Assistant. Assistant is a Hebrew and Latin type family, with a contemporary sans serif Hebrew design. The family contains 6 upright styles, from ExtraLight to Black. Hebrew type family was designed by Ben Nathan, to complement the Latin Source Sans Pro that was designed by Paul Hunt at Adobe Type. Simplicity is my design goal, so I decided to go with just one family
I create an onboarding screen to explain the user about the background of problems in education at this time and explain the main features of School Talk.
I tried to make different illustrations on each onboarding screen page to attract attention when the application was first opened or used.
In the button section a question is given to give the user a feeling of curiosity, So they always want to open the next page.
Based on the wireframe I made earlier, I decided to divide the main page into 4 main tabs. These four pages are pages that are frequently opened by users, that is :
This is the initial page that will appear when it successfully enters the School Talk application. In the right corner there is a button to choose Indonesian or English, because some of our customers are State Schools and International Schools.
There are cards to display student information, that are photos and names. Also given information on the hour when attending. So that when parents first open the application, they will immediately know whether their child is entering school on time or not.
To help students to be more accomplished we provide point features that will be given when students behave well, such as never being late for one semester, having the best test scores in class etc. These points can be redeem for discount vouchers from a store that has collaborated with us.
The four main features of School Talk are placed in the middle of different coloured pages and illustrations to make it more enjoyable when viewed and help users understand each feature.
At the bottom there is current information which can be shifted right or left to see other information.
This page is used to know some of the preferences that have been provided. To make it easier for users to know the function of each preference is given a brief information tagline on each button. I also tried to create a different icon to help users understand the description
Because the majority of users are parents and sometimes still have difficulties in using technology, So on the help page I prioritize it to be one of the main pages.
Simple is the concept of a help page, the answer will immediately expand below when the question is pressed. To be faster to search for the keywords you want to go to, we also provide a search column at the top.
All notifications and information that occur in the application will be displayed on this page. I did several iterations in this section
- 1st Iteration : I think that the cards that are given the color are too prominent and users will find it difficult to distinguish between categories of payment notifications, news, or information about their child’s attendance at school.
- 2nd Iteration : I decided to create tabs for each category so that notifications can be distinguished by users. The status of each notification is coloured to make it stand out and remove colours on cards. I put the background in light blue so that users can distinguish between cards and backgrounds more easily.
- 3rd Iteration : I changed the layout on cards completely by making them in line so that the information is clearer, easier to read, and easier to understand. This makes the page look more concise and simple so that the user does not scroll up and scroll down too much to read all the information on this page. The colour on the status is also replaced by blue and yellow to make it smoother, because the red colour too makes the information seem very bad. There is a button to see details that will go to the detailed information and placed next to the right corner so that it is easily accessible with the thumb.
There are four main features in School Talk, that is :
A feature that explains the development of students’ academic score. The score lies in each different card according to the subject. Each card is subdivided into the type of exam sequentially from top to bottom so that the user can directly compare the academic scores from the first exam to the last exam.
In subjects that have a value below the Standard of minimum completeness of mastery learning or in Indonesia called KKM it will be coloured to yellow so that it becomes more prominent and noticed by the user. Users can also find class ranks and batch rankings quickly because information is also displayed on the top right page.
Parents will know about teaching and learning activities in school every day through this feature. Information presented in the form of subjects, duration of learning, name of teacher and material to be provided. This can help parents to remind children to learn or prepare material to be studied later.
Attendance information is presented in the form of a circle chart. There are three diagrams that explain how many attendance, permission not to follow the lesson, or absent.
Percentage calculations are also given because each school always provides a minimum attendance requirement to take the final semester exam.
At the bottom there is attendance information and school return information on the same day. Information can also be seen on the previous day by pressing the calendar button and selecting another date.
– Payment and Saving
This feature contains financial information, that is savings, payment of tuition fee, withdrawal of balances, and redeem a voucher. To facilitate the user in knowing the transaction record, the latest information from the transaction record is placed below and can be opened easily by swipe up. Transaction records are also provided with information about transaction dates and filter and search buttons.
Results / What I’ve learned
I got a lot of lessons and of course I still had to read a lot and learn about designing UI / UX. When designing this application I can learn how to make products directly from the beginning to the development stage. This job is very exciting, I have to visit customers, communicate a lot with customers and the developer team, present the right data, check the user flow again several times to get the right user experience. I also helped with the development process of this platform and I am very happy to be able to learn the coolest and newest technology in this development such as nodejs, graphql, react, mongodb, react native, redis
Overall I am very exciting to be able to contribute to improve the Education system in Indonesia by helping in the process of making this School Talk product. There are still many parents who pay little attention to their children’s education. I hope that the creation of School Talk can help parents to pay attention to children’s education easily
Web applications and platforms are still growing and developing. School Talk always plans to create the latest features, and improve the user experience. Give standing ovation to the team that has made this project come to reality, Adhe Widianjaya as CTO, Addya Rizky as CEO, Syah Hamza as COO, and Rama Widi as fullstack developer. U da real MVP 🙌 🙌 🙌 👏