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.

Algarrobo team

Algarrobo team

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.

MVP workflow

Workflow

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.

Design System mobile

Mobile Design System

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.

Mobile App

Registering to an exam mobile app

Webapp

Registering to an exam webapp

High-fidelity prototype

Home screen Algarrobo Alumno

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

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
Career detail

Check state of courses, completed exams, grades.

Grades
Grades

Check intermediate and final grades.

Correlative courses
Correlative courses

Check the correlatives to shape the study plan.

Week agenda
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.
QR code mobile app

Try the mobile interactive prototype

QR code webapp

Try the webapp interactive prototype

Next project

ALGARROBO>>

Let's work together

© Julieta Griguol design 2022