EnCicla es el sistema de bicicletas públicas del Área Metropolitana del Valle de Aburrá.
EnCicla is the system of public bicycles of the Área Metropolitana del Valle de Aburrá.

Para ver el mapa debías entrar a la sección "Estaciones EnCicla".
To see the map you must click on the "Estaciones EnCicla" section.

Colocamos la información importante en el home, mapa, números, usuarios, estaciones, noticias y un enlace de registro (No obligatorio).

We place important information in the home, map, numbers, users, stations, news and a a register link (Not mandatory).

La versión anterior del sitio no tenía un sitio responsive decidimos mostrar solo el mapa en la página de inicio, desplazar el menú de estaciones a la derecha y desplazar el menú del sitio a la izquierda.

The previous version of the site did not have a responsive site. We decided to show only the map on the home page, scroll the station menu to the right, and scroll the site menu to the left.

Quitamos los textos en mayúsculas para mejor legibilidad, usamos iniciales en vez de iconos (ya que los iconos para estaciones manuales y automáticas no eran claros y difíciles de estandarizar) y creamos una codificación cromática para diferencias los tipos de estaciones y el estado de cada una de ellas (Disponibles, Ocupadas, A punto de ser ocupadas).

We removed the uppercase texts for better readability, we used only a letter instead of icons (since the icons for manual and automatic stations were not clear and difficult to standardize) and we created a color coding to differentiate the types of stations and the status of each one of them (Available, Occupied, About to be occupied).

Además incluimos un buscador de estaciones con texto predictivo que el sitio anterior carecía. El menú lateral de estaciones utilizamos un solo color y diferenciamos las estaciones por círculos con los colores correspondientes al tipo de estación (Manual o Automática) y utilizamos iconos sencillos rellenos a diferencia de los anteriores que estaban basados en trazos. Tipos de letras delgadas para mayor lecturabilidad y de nuevo evitando las mayúsculas. Las ciclorutas que anteriormente estaban visibles siempre, ahora tenían la opción de ocultar o mostrar.

We also include a station finder with predictive text that the previous site lacked. In the stations side menu we use a single color and we differentiate the stations by circles with the colors corresponding to the type (Manual or Automatic) and we use simple filled icons unlike the previous ones that were based on lines. Thin typefaces for greater readability and again avoiding uppercase. Bike paths that were previously always visible now had the option to hide or show.

Con los primeros prototipos de wireframes móviles encontramos que las personas usan el sitio en su mayoría desde sus teléfonos y muchas veces están cargando o conduciendo la bicicleta. Para mayor comodidad en la búsqueda y uso del menú de estaciones y del sitio colocamos estos ítems en la parte inferior de la pantalla.

With the first prototypes of mobile wireframes we found that people use the site mostly from their phones and many times they are holding or riding the bicycle. For greater comfort in searching and using the station and site menus, we place these items at the bottom of the screen.