Julieta Griguol - Algarrobo Alumno

An app and webapp for managing student university matters

The goal was to redesign the user experience of the university app and web determining must have and desirable functionalities.
To do so we designed a mobile application and a webapp to check and manage student careers, register to courses, exams, check study plan, grades and payments.

Professional project
Role
User experience
User Interface
Illustration
Animation
1 year
Interdisciplinary project

Problem statement
Most of the students uninstall or do not use the application due to its poor usability and performance. In addition to that some functionalities that they needed were only on the website version.

Methodology

We worked under the Agile Scrum methodology. The product was divided into sections. In the first sprints, the section to be worked on, the client's needs and the functional models were presented.
After that I developed rapid prototyping experience proposals to validate with developers and client, iterated, tested, and once approved I created the Hi-Fi prototype to share with the developers. Each sprint we tested, and new requirement and iterations were made. It was a continuous communication and interdisciplinary team work.

Research

I started with an MVP wireframe workflow made by my design agency and understanding the requirements in several meetings with the product owner and analysts.

As we were working for students, I decided to use friendly experience with informal language and benchmark applications used mainly by young people such as Instagram, WhatsApp, and other educational ones.

Design System

To design the Design System I relied on the wireframes to define the necessary components and developed the basics using atomic design concept in Adobe Xd.

Then when the web version of the product was added, I developed a specific one for it, always maintaining experience consistency with the mobile app, taking into account that the web would be developed using Angular while in mobile we used Flutter.

Illustrations

To empathize with the students, I drew and animated the empty states and error states. First drawing with pencil and paper, vectoring with Adobe Capture, corrections and color in Illustrator, ending with animation in After Effects.

Webapp

When the first version of the app was launched, a new team was assembled to build the web version. For that, I presented to the client a proposal maintaining a coherent experience with the mobile one but taking advantage of the space.

Registering to an exam mobile app

Registering to an exam webapp

Home

On the home screen, the student has a widget that contains the main information about his career, upcoming events such as lessons and exams, and the latest grades.

If the student is taking another career or courses, they can easily access it by swiping the main card.

Course registration flow

Registration flows

Students can register for courses and exams. The registration flow is divided into a sequence of simple steps and at the end the user can check a summary of their choices to confirm or modify.

In the design of the experience we took into account each special case that may occur, such as overlapping schedules with another course. Also, I considered how the cards adapt when the content is of varying lengths.

Career detail

Check state of courses, completed exams, grades.

Grades

Check intermediate and final grades.

Correlative courses

Check the correlatives to shape the study plan.

Agenda

Check lesson, exam and events date.

Takeaways

In this project I was lucky enough to work hand in hand with 2 developers who had a lot of experience since they transmitted me good methodological practices.
I learned the value of maintaining constant communication and sharing the design process, in this way the solution has much more value for the whole team.

Try the mobile interactive prototype

Try the webapp interactive prototype

Next project

ALGARROBO>>

An app and webapp for managing student university matters

Methodology

Research

Design System

Illustrations

The process

Server error

No search results

No connection

Page not found