A software for the organization and administration of the university

  • The goal was to create a new system to optimize, simplify and ease the academic management of the university, which could also be sold as a product for other educational institutions.
  • The project is composed of different applications. We designed and developed the planning application where university staff can create, organize and manage the institution.
  • Professional project
  • Role
    User experience
    User Interface
  • 10 months
  • Interdisciplinary project

Problem statement
At the university current academic management is done manually through Excel spreadsheets, this process consumes a lot of time and human effort.


Background

The University Siglo 21 is the largest private university in Argentina. It is characterized by attending to the diversity of circumstances of the students, offering not only presencial courses but also other mixed and virtual modalities.

Being so large and offering a high degree of customization, it was necessary to ease its management, for which the Algarrobo project was launched, which seeks to create a new administration system taking advantage of the latest technologies.

Algarrobo companies

A huge project

An ambitious project that required not only to migrate the existing to modern technologies but also to create a completely improved experience.

To do so, the client has its own team of managers and functional analysts, the design agency in which we were 2 designers and 2 front-end developers, and another company that was mainly in charge of the back-end.

Algarrobo team

Algarrobo team

The process

I came in when the project had already started to develop, continuing the work of the previous designer.
As we worked with the Agile Scrum methodology, analysts and designers worked one sprint ahead of the development team. We had daily meetings with the product owner to understand the users and requirements, and then we would make the experience proposals with rapid prototyping.

Users are academic staff of different specialties, with basic knowledge of technology, so we decided to do an intuitive workflow which guides them through every process of the system.

Design Pattern 2

For the creation processes we opted for a wizard pattern to reduce complexity by breaking down the data enter in short steps.

Design Pattern

We defined some patterns to follow in every app, such as the side menu, a sidebar with tools and a top bar with contextual information.

Design System

We define a base Design System working with front-end developers, achieving design standardization throughout the product and streamlining development work.

For the style we rely on the company's brand manual and we are inspired by Material Design. Always keeping in mind that they were developing using Angular. Every time a new component was needed, we created it and added it to the Design System.

Design System

Design System

Patterns

Design pattern 2

Wizard: For extensive creation processes + automatic saving.
Multi Select List: Assign subjects and activities + filter

Design pattern 1

Side Toolbar: Access to app administrators.
Drawer: For lists of created items + filter.

Design pattern 4

Drag & Drop: Move several object to assign their place.
Accordion: Watch only the information needed.

Design pattern 3

Side Sheet: Enter section without losing sight of where you were.
Tables: Show synthesized information.

High-fidelity prototype

Organizations manager

Organization creation flow

Organizations manager

In this section the user can create an organization and relate them to other organizations, careers and subjects.

Course creation

Course creation flow

Courses manager

 This section allows to create a course, define data, associate equivalent courses, create and preconfigure activities.

Study plan manager

Study Plan
Study plan

Create the study plan defining its data, associating courses and activities, and creating the study plan modalities.

Modality
Modalities

Create modalities of the study plan by defining its data, associating courses with their periods of time and configuring the courses.

Verification

These high-fidelity interactive prototypes were made in Adobe Xd. I also made videos of the usage which I shared with the developers to make it more clear to understand the flow and its variants. With them we had several calls throughout development to provide support.
Additionally, we often conduct remote user testing with university staff to verify flows and content that is specific to that university.

Takeaways

  • This project was a great challenge for me since I started when it was already underway, and I had to learn to handle myself with the agile methodology that was something new for me.
  • A project that exceeded my experience since we were only 2 designers in charge of a large project that included 3 companies together.
  • At first it was difficult but as time went by I was able to shape the way of working with the different teams to make it more efficient every day. It was a rewarding learning and growing experience.

Next project

Let's work together

© Julieta Griguol design 2022