Unisabana App

in , , , , ,

By mid 2014, along with Jenny Robayo and a team of students, we launched the official mobile application for Universidad De La Sabana. It was a creation process that involved a Human Centered Design approach and a semester of hard work. I was the Product Designer behind it, from UX Research to UI Development, good old generalist.

Methodology: Human Center Design

Methods: Focus Groups, Interviews, Stakeholder Prioritization, Design Principles, Personas, Wireframes, Mockups & Prototypes

Tools: Adobe Illustrator, Keynote, G-Suite

Deliverables: Research Analysis, Information Architecture, Screen Designs and Assets

From left to right, Rafael Rodriguez (Integration Lead), Ricardo Sotaquira (Information Technology Engineering Director and Project's Director), Francisco Ramirez (Design Lead), Jenny Robayo (Development Lead), Juan Pablo Velasquez (Student), Alejandro Zambrano (Student). Two students missing: David Piñeros and Nicolas Guzman

Even though this project involved NDAs, the overall process began with the core team (Director and Leads) drafting the Project's Proposal and Design Concept. After an agreed Brief with the stakeholders, we conducted User Research to validate our initial hypotheses and discover new opportunities. 

The video at the left is an excerpt from the User Research activities I conducted. They were held in the first Design phase, hearing our main audience, the student community.

Out of this research we crafted Design Principles that would guide us in the App's UX and UI. We also created personas that aided the scenarios.

By overlapping Needs from users and Desires from stakeholders, and the development team's Abilities we decided which features approach first. Once having everyone on the same page, I created tentative layouts through Wireframes and Mockups, that I translated later into tap-through prototypes.

We delivered a Mobile App with a set of features with breakthrough feature to encourage students to improve their performance (virtual academic advisor) and the campus community's daily activities (news, menu, events). The advisor is a tool that will suggest what should a student aim for his next graded assignment (exams, projects, homework) according to a desired course-grade.

This is a run through the different services, natively developed in iOS and Android available for download in their corresponding links

Peru's Pavilion in FILBO 2014

in , , ,

For Bogota's International Book-fair (FILBO) Perú was the honored invitee. Panoramika was commissioned by the Peruvian Cultural Office to create various interactive installations, projection mappings and light designs. I was appointed the creation of one of the three installations crafted by Panoramika. Four screens that would reveal passersby random excerpts from the "Captain Pantoja and the Special Service", nobel laureate Mario Vargas Llosa's comedic novel.

For the implementation of this installation, I developed patches that visually changed text compositions in Quartz Composer, whenever the threshold of an Infrared sensor was triggered by people. The sensor was implemented in Arduino and interfaced to QC.

Interactive Dream Box

in , , , , ,

For children's month, we created a giant box to make a stronger bond between children and their parents. I was the Interactive Lead for this project making sure the hardware and software would run swiftly for a month and a half.

Methodology: Iterative Development

Tools: Arduino, OpenFrameworks

Deliverables: Interactive Experience triggered by levers and buttons that took children and parents through a journey

Concept

With a collaborative experience, people embarked in a journey in the world of dreams and imagination. To communicate children's boundless imagination and appropriation of everyday objects, we constructed a giant carton box as the ship, with two control panels were knobs and buttons are made out of plastic bottles and other every day objects. 

Technologies

Along with two Interaction Designers, we coded the project's software in OpenFrameworks and the hardware in Arduino. To ensure collaboration in the box's experience, both panels were made wide enough so they could only be triggered by at least two people. There are two starting knobs and two launching/landing levers. The other panel is as wide as the first one, and it has four buttons that light-up to a sequence. Lit buttons have to be pressed at the same time to defeat the violent thread in the journey.

Systema Solar Live Act

in , , , , ,

Brief

We were commissioned an Interactive Live Show by the Colombian band Systema Solar. With a team of 3 Creative Technologists we developed different real time visual effects. I was in charge for coding the puppetry controls, the audio-reactive silhouette patches and figuring out best UX practices. We created a VJ deck, from the physical rack to the digital patches.

Overview

To better understand the puppetry possibilities with Kinect, we figure out how Animata worked. After having a first glimpse, I began this patch from scratch in the live software VVVV. Even though I had no previous experience with Kinect or VVVV, this project was evidence of perseverant work, squeezed wit and sought fortune. By the end, there were 3 crafted puppets of Systema Solar's crew (Johnpri –lead singer–, Walter –lead performer & singer– and Corpas –dj/scratcher–)

The VJ Deck

The rack is composed of 1 Kinect, 3 GoPro Cameras, 7 signal converters, 1 MIDI Pad, 1 Mac Mini, 1 Four-Channel Mixer. These 4 signals are the input for the VJ's laptop.

Rehersal

Video Documentation

Electronic Vote

in , , , , , , ,

In 2013 we created an electronic vote system through Android tablets that were remotely activated by a Laptop. I was the UI/UX Designer and Industrial Designer –Cubicle. Our main Design Challenge was to create an election system easily perceivable and predictable –intuitive– enough so grown-ups with no previous experience with mobile devices could vote. It was a successful system that didn't got in the way, with 93% of participation.

Storyboard

I created this storyboard so stakeholders could better understand the sought experience.

Scrutiny's visualization

For the scrutiny I developed this visualization in Processing

Enrutate iOS App

in , , , , ,

Back in 2013 with two developers, we created this Mobile App. I designed the UI including the simplified map of Bogota and the promotional motion graphics. It was the first Mobile Application to interact directly with the map. A more perceivable and predictable –intuitive– interaction comparing it with the competition (public transport apps in Bogota, Colombia). 

Interactive Table – ∏ "Planta Interactiva"—

in , , , ,

Overview

This project blends the Interactive-Tabletop framework known as Reactivsion, with an engaging way of explaining Biodiesel production. I was the Full-Stack Designer creating the UX, storyboards, 3D motion graphics and Creative Coding like animated buttons and knobs.

The objective behind this exploration is to engage potential new engineering students in an experience that helps them understand what involves any of the engineering programs offered by the faculty. Each of the 4 offered programs at Universidad de la Sabana has a specific narrative within the playful experience of creating biodiesel.

Storyboard

Tryout

Flux iPad App

in , , , , ,

Concept Development

Flux is a mobile application for tablets that introduces college students to System Dynamics. Its Design Objective involves a new visual representation to improve the user experience in System Dynamic softwares. I was the Visual and Interaction Designer behind its creation. The second iteration at the right was created with a micro-organism metaphor in mind.

For this project I worked closely with a PhD in Applied Sciences directing and implementing the mathematical models behind it, and a junior iOS Programmer.

Bertalanffy’s General Systems Theory sprung from Biology, thus a micro-organism metaphor for the final design seems convenient and captivating. Elements within the aqueous environment resemble organic-like shapes. Both features, the animated elements and organic forms contribute to Flux's aim to bridge users’ mindset onto a unified perceivable and predictable interface.

Iteration 1

Ripple effect concept were elements' behaviors interfere like waves disturbing water. 

Iteration 2

Micro-organism concept were elements have a biological look and the interface borrows visual queues from a petri-dish 

Brand Identity

In System Dynamics the concept of cycle is essential. This is why the logo's starting point is a cycle. Afterwards, a double cycle resembling the infinity symbol was used for the name's starting point.

Logo

 

Splash-screen