Juliana Morozowski

outclass

Student information at the fingertips

Outclass is a mobile application that connects students, parents, teachers, and educational institutions. It brings information from the student's academic life, which happens by integration with educational management software.

Understanding the problem

The main challenge was to improve the application experience, based on the visions and needs of each user and to know how this relationship should work among the identified people (school, teacher, parents, and students). To exemplify some needs:

As a student, I want to

  • Track my academic information from more than one educational institution (college in the morning and English classes in the evening);
  • Access my assignment calendar, consult the content of tests and set reminders;
  • Receive alerts and follow the number of absences;
  • Check my scores and track news from my course;

USUÁRIO PROFESSOR

Como professor, eu quero:
  • Have an open and real-time communication channel with students and managers, to keep them engaged;
  • Notify everyone immediately when publishing a memo;
  • Send last-minute messages in the case of unforeseen events;
  • Release information for all students of the subjects, in one way;
  • Being able to communicate directly with a student;
  • Notify about new publications related to the subject.

One of the critical points was: structuring the news feed so that no essential information would be lost, even if you were in more than one educational institution or have more than one dependent.

Flows and wireframes

We've talked with some stakeholders to understand the problem and business needs, maintaining this alignment throughout the project. I began to deepen the problem with the analysis of user data, desk research, benchmark, and best practices.

We understood and defined the user's needs, choosing to start with focus and simplicity. As we only had access to the data provided, we conducted informal surveys with students and parents to be closer to the reality beyond that.

We designed the flow of needs and tasks, initiating with the structure of information with wireframes. We validated the first rounds with the stakeholders, presenting the wireframes, taking care of interaction details such as the notification system, and UX writing.

Boards criados na sessão

The first interface

Wireframes validated, I started visual research to design the interface, beginning by understanding the guidelines of the Material Design, especially the structure of cards and their variations to feed the newsfeed and notifications. Also, I did some research and analyzed the Ionic framework to know what could be customized or not.

With a more defined look, I created a prototype on Invision to test whether the flows were correct, validate with the stakeholder, and align with the developer.

Boards criados na sessão

The app rebound

Reviewing the project, I figured out possible improvements in information architecture, navigation, and interface, making the experience smoother. The concept applied aimed at facilitating the visualization of information, avoiding possible losses of significant events. I decided to remove the hamburger menu to make the features categories visible, regrouping then by the two main activities of the application:

Boards criados na sessão

In the interface design, I focused on optimizing data visualization, maintaining the clarity of information. That's why I chose to have more white-space, combined with the use of a well-balanced and well-conceived font, whose presence by itself makes the app more visually appealing and more aligned with a new product branding.

With the suggested regrouping, I chose to use tabs as a title, allowing easy switching among categories, and with the future in mind, the component supports the inclusion of more groups. I also redesigned the onboarding process to work more intuitively, eliminating several steps from the previous version.

Redesenhei também o processo de onboarding, para que funcione de forma mais intuitiva, eliminando várias etapas da versão anterior.

UI design UI design UI design UI design UI design UI design UI design UI design UI design

Takeaways

Next project

Vale Greenhouse