#f5133d

Client: Autónoma de Occidente University

Industry: Education

My role: Frontend developer, UX designer, product designer

Year: 2014

A university that each semester increases in the number of students that access higher education, which present limitations of time and mobility at the time of going to the campus. How to improve the coverage and delivery of academic information to students from different places? With a virtual learning platform, available on each cell phone with an internet connection.

The background

To start, why?

The Autónoma de Occidente University has just made a change in its educational model by applying e-learning methodologies to teach complete virtual courses, and b-learning that involves a part of work in the classroom and another at a distance.

The challenge

What they look for?

A teaching platform that allows total freedom like the curricular structure of each course to taught, reduce the costs associated with the use of this tool and guarantee access from any device, to reach students who are in different places world.

The research

We begin by analyzing cases of success of universities in Colombia in their online teaching platforms. We made a matrix to evaluate the platforms found by comparing price, functionalities, and a threshold of learning, a degree of personalization, support and applicability in the medium term.

From this analysis, we found that Moodle was the LMS that best suited the budget and the requirements of the university.

The approach

Designing experiences

We seek to de-link the name of the tool by creating a brand that identifies the new platform so that in the future if necessary the software can be change, but the same educational concept is maintain, in this way SIGA – Learning Management System was born.

The concept

Crafting experiences

We did not want SIGA to look like a traditional Moodle platform, so we started a process of personalization of its interface, user experience, and mobile application. We look for the platform to be institutional, light and clean.

We created a design system that allowed us to maintain the identity of the site over time and depth levels in navigation.

The process

Paper first

SIGA-paper-first

Definition of course structure

SIGA-course-structure

Iterate 1,2,3

We did multiple tests to find the source and color scheme that best suited the intention of the platform and the brand manual of the university, in the end; we decided to use shades of gray and a better-saturated red.

SIGA-iterations

The development

Time to code

The structure of the courses had to change; we had to ensure the correct migration of Blackboard to Moodle 3.0 for this it was necessary to modify the backend to have an administration of the courses and adapt it to the pedagogical requirements of each one.

The mobile application was developed in PhoneGap, so it was possible to customize all its interface and navigation without affecting the web services of connection to the server, this allowed to establish functionalities such as push notifications, chat within the application and upload task files from the mobile.

The product

Visual design

SIGA-platform
SIGA-course

Mobile UI customization

SIGA-mobile-theme

Boom !!!

SIGA-platform
SIGA-platform
SIGA-platform

View project

SIGA platform

The results

A new way of teaching

This development represented an annual saving of USD 35,000, thanks to the use of Moodle and the customization of the experience, it was not necessary to incur this expense again.

The tool allowed teachers to create learning routes in each course, and the university managed to offer ten new classes to be dictated thanks to the platform remotely. More than 6,000 students use the platform on average per month.

The version of the app allows you to use the instant messaging service between students and teachers of the same course with push notifications on your cell phone, speeding up peer-to-peer communication.

Major learnings

The institutional red color was solid, it was necessary to make a negotiation with the communications office to approve a less saturated red tone, it achieved thanks to the creation of a design system based on components with SASS files.

This project required to understand in a better way of how the backend of the applications works, deepen my knowledge in PHP, learn to package web applications and deal with mobile development environments.

We should start to establish a control protocol within the application chat; it began to be used by some students as a bullying tool, this was something we did not anticipate.

Thanks for watching 😀

Like what you see?

I want to hear you

More work

A showcase of design, development and things that makes me happy