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.
...The concept had to be provided based on how the school see itself as a collective entity, in a physical and psychological level
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
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.
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.