#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