Skip links

School Care

User Experience & Interface


Date:
October 4, 2019

Introduction

#school management application

A school management application that helps different stakeholders like school Admin, tutors and parents to perform their daily tasks with an easy to use digital platform and keep the track of the child’s progress.

Although this application initially based on user behaviors of Canada, it is optimized for future scenarios where it can be used for other parts of the world.

The Stackholders

It currently supports four different stakeholders starting with Super Admin where he can manage all the schools registered under the application. The each registred school data like tutors, students, parents & transportation, ect., will be managed by the particular School Admin.

Then the tutor will be managing all students data including attendance, reports, communication. Finally, the parent will be managing their kid’s attendance, reports, exams, and any other emergency details.

The challenge

As School Care supports four different stakeholders the challenge was to connect the dots between them providing the trust and transparency wherever they need in performing their daily activities and also keep them updated with frequent updates performed by each stakeholder.

The other challenge was to design the entire application following the latest google material design principles in which we started with the color theme, typography to all the interactions.

The process

As the stakeholders are based out of Canada, understanding how we perform each task needs to validated in designing the efficient solution with constant iterations to evaluate the entire system, which also helped us to connect dots between all stakeholders.

Visual design

As we are following material design guidelines to establish the consistent patterns and interactions for all the stakeholders that School Care offers we have come up with a combination of core material guidelines and our unique solutions to build up the application.

Grid system

We have used a responsive grid, allowing padding and column size to change across the touch devices. In desktop and tablet, the menu drawer is fixed permanently whereas in mobile it expands and contracts upon user interaction.

The breakpoints for desktop, tablet, and mobile are designed based on the screen resolutions used by the majority of the users and also optimized for other common resolutions in the market as per global resolution stats.

Color theme

We have used colors as per the WCAG 2 Guidelines with the grade of AA+ where the colors range from medium-indigo as a primary-hue with a contrasting secondary color of deep-orange to provide emphasis on taking action and rest 3 are of light and dark hues for background and content respectively.

Typography

Noto Sans as the typeface provides a variety to segregate the content. We specifically chose Noto Sans for its huge range of language support as the application will be eventually used in different parts of the world. And also the font is intended to be visually harmonious across platforms with proportionate height and stroke thicknesses.

Iconography

All the icons have subtle styling, which expresses the brand language by focusing on icon recognition and functionality. All the icons included a few custom icons are as defined within the material grid ratios.

Components