Background Image

Architecture faculty

ead official website

This project belongs to the UX/UI design category and development. Technologies used: Html, Css, Less, Jquery, Bootstrap, git, Jekyll, among others.

You’re able and encouraged to share this article, send me a message or find me on social media with the icons above. In the near future, I’ll be mostly active on Facebook, Gmail and LinkedIn. So you can find me on those platforms for now. Any comment is welcome about the content that here is presented.

This is one out of twelve projects where it's briefly described the process of thinking behind the design work. The quote below is from a different project.

2014, Valparaíso, Chile. Working to re-design the official website from e[ad] (PUCV University), in Valparaíso, Chile. The site was intended to be structured and based in a framework from the beginning, in order to be maintainable for the near future, re-using code and standardizing the design, so any web dependency from the organization can be assign to the same process with identifiable rules.

The goal was to set the basics for understanding a collective identity. For this was needed to benchmark the way this concept has been studied on big organizations such as GEL (Global Experience Language), for the BBC. Other frameworks like Bootstrap, Foundation and Skeleton were a good example to start. That’s when Pyxis came to life, Pyxis (Compass in latin) is the name of a constellation, and became a good concept name to be grounded on the project.

The concept had to be provided based on how the school see itself as a collective entity, in a physical and psychological level. How many points of reference are in there? Which are the adjectives related to this points? What is the core of action inside and how this relates with the teachers, students and the staff? From this questions Journey Maps were studied and user Personas.

Once the set of questions above were resolved, The UCD (User Centered Design) process was unfolded. The next step was to build an information or architecture-map were one could see the skeleton of navigation (the array of ramification and depth) through the site. This map should be approachable by all the users involved in the school. So a good usability test was to try Silverback and run it with different type of people. They were meant to find a specific piece of information from the website within certain time-frame.

In the development process, the grid from Bootstrap and some javascript functions were a strong start to build the rest of the site. All of them were implemented in Pyxis framework and slightly modified with an eaxample of usage and coding reference. Github was the way of documentation and to test changes in real time through gh-pages. Mixed with Jekyll, it was possible to host the site, build an static web platform and see how the responsiveness attached was working.

...The concept had to be provided based on how the school see itself as a collective entity, in a physical and psychological level
Background Image
Background Image
Background Image

Note 1: A set of Icons where specially crafted to be implemented in the design framework. Under the name of "Stampa", these were documented on a different repository on Github.

Note 2: The importance of building a design framework is to recognize the advantajes of having a global set of rules for each platform across the organization. This can save time and complexities from developing a new project for every occasion.

...The next step was to build an information or architecture-map were one could see the skeleton of navigation though the site
Background Image

Note 3: Identification of categories. Naming properly. Studying the hierarchy of the many sections. Those were a few things to take into account when the conceptual map was taking shape to be tested later on. Co-design becomes an important matter when you need to alude to the awarness of the people that belongs to the school. Some members from different areas were needed to organize the conceptual map by intuition. In this way is possible to see the differences and similarities between tham and draw a conclution at the end.

Background Image

Note 4: The project was presented in the Sixth Bienal of Latinoamerican Typography, taking place in the Cultural Center from Valparaíso, where the process of the re-design was exposed entirely.

...They were meant to find a specific piece of information from the website within certain time-frame.

Note 5: Series of task from a student for the User Testing of the website, close to be implemented. The first challenge was to find the Academic body, accomplished within 12,5 seconds. The second was to find the address of the school, done within 7 seconds. The third was to share specific news from the section "news". The fourth task was to find the curricular information, done within 10.3 seconds. The fifth one was the lower, to send an email the school, done within 55,5 seconds. The sixth and last one involved to find the profile of the graduated, done in 9,6 seconds.

Note 6: The site was meant to work on different devices and keep the simplicity of the design. On this subject, wireframes had to be thought from a Mobile First approach.

Background Image