Redesigning the Interface of Online Campus Mobile!

Ansith Mohd
3 min readOct 1, 2021

As soon as i finished my Bachelor’s in Computer Science, I started looking for internships. Fortunately, my college principal was kind enough to get me an internship in his own IT Firm | Meshilogic Softwares.

Checkout my portfolio at www.ansith.webflow.io.

The task assigned for me was to redesign one of their existing product which is ‘Online Campus’ mobile application with a visually interactive and intuitive User Interface.

What is Online Campus?

Online Campus is a web solution of high leverage for the control and management of schools with its organized and structured software modules, all integrated and interwoven to go with the latest concepts of WEB applications.

Online Campus, the preferred choice of schools in India and Middle East has helped in optimizing the work and processes of various institutions. This suite of web solution for the optimization, control and management of schools with its organized and structured software modules, has replaced many other school management software’s in various organizations.

Why redesign?

Actually the previous Ui of the app was not that good and was giving the users a hard time using it because of both the Ui wise and Ux wise. So a redesign was necessary.

After getting the detailed analysis of user problems, their needs and desires, i came up with a conclusion such as:

  1. Improve overall User Experience
  2. User interface with a pleasing visual appearance

Old User Interface

Previous Ui of Online Campus

Research

This app consists of four level of users

  • Parents
  • Teachers
  • Admin or Principal
  • Students

In a way, the Student user is almost the same as the Parent user, since in a Parent user, the parent can access the data of all their children, but in a Student user, it’s the individual data.

Objectives

I found that I could resolve multiple problems after considering the user flow, user reviews, and pain points. Here are the objectives for this case study:

Design Objectives

  • Follow a logical flow with users
  • Streamline the process of scrolling and tapping certain tasks
  • Avoid unnecessary navigations

Redesign

Let’s Jump into the redesigns.

Admin User

Admin Homepage and Fee Info

Painpoints:

  • Bad user flow
  • Glitchy infographics
  • Confusing Ux
Infographic animation of admin homepage

Redesign

  • Aesthetic and intuitive Ui
  • Hierarchically sorted actions
  • Improvised user flow
  • Appealing infographics and animations

Parent User

Painpoints:

  • Complicated Ui and Bad Ux
  • Actions are hierarchically weak

Redesign:

  • Children tab has been sorted into cards with horizontal scroll action.
  • Students’ functions are categorized into three sections as academics, more and profile.
  • Added a profile overlay showing the current attendance status of the child.

Conclusion

This was one of the task i got assigned at Meshilogic Softwares. There are security concerns that prevent me from sharing additional screenshots. I designed almost 100 screens for the app and my team developed the app using the designs I shared on Figma within a time span of 3 months.

for more, visit my personal website.

Thanks for being here :)

--

--