Student information at the fingertips
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:
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.
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.
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:
- Schedule: follow classes and events, from the current day to the next;
- Academic Life: Follow events, classes, tests, messages, and memos of the courses attended.
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.
- Even with access to data and informal research, there was a lack of discussion with users to structure more in-depth analysis, increasing the understanding of the needs;
- It was interesting to be able to use a project to study further and understand the concepts of Material Design;
- Using frameworks to streamline the development process helps a lot to meet short project deadlines, but it can end up being a limitation when you want to create a more branded oriented look and feel and implement more vibrant and differentiated interactions;
- Knowing the development framework improves the conversation with the developers, focuses more on project targeting and also helps save time in not designing components that cannot be implemented;
- It was interesting to review the project after a while, questioning the decisions I've made at that time so I could see new opportunities to improve the product experience.