Caribe China: Ventana a la modernidad

Part of the team that designed a developed an accessible exhibition for an iconic Modernist china that was produced locally with the best quality, recognized globally.

The entrance to the exhibition site: Fundación Luis Muñoz Marín, Trujillo Alto, Puerto Rico.

 

 

 

 

 

 

 

 

Blind people were able ro “read” the paragraphs in each panel.

 

 

 

 

 

 

 

People enjoyed the haptic properties of the exhibition, as it was closer to bodily experience than standard exhibitions.

 

 

 

 

 

 

 

Six wall panels and two table panels designed with Braille were assembled into the exhibition room.

 

 

 

 

 

 

 

 

There were three china displays on the exhibition. Each one of them had a specific kind of china, parallel to some of the wall panels, as each of them had a different theme/concept.

 

 

 

 

 

 

 

 

The Office of Marvel and Marchand Architects

Part of the team that designed and developed the accessible website for the Office of Marvel & Marchand Architects, LLP.

Screen of the splash page, which had a slideshow with pictures of the physical site of the architectural office.
A timeline was designed and programmed to show numerous examples of the office’s various types of projects.

 

The metaphor to show each project was to enhance the building, giving it a starring role with its conceptualization, hence the sketch as a first view of each one of the projects.

 

Hotel Excelsior Typography

I was part of the team at Rubberband Sociedad de Diseño (2008-09), which contributed in the design for the rest of the alphabet that was originally commissioned by a businesswoman who owned a Puerto Rican hotel during the 1960s.

The double L character, widely used in Spanish language, is one of the iconic characters of this typeface.

 

 

 

 

 

 

The completed alphabet of the regular version of Hotel Excelsior as of Summer 2008.

 

 

 

 

 

 

Trying how the typeface responds to upper and lowercase with The quick brown fox jumps over a lazy dog.

 

Interface Design Course at Universidad del Turabo

I was given the opportunity to teach an Interface Design course to 3rd and 4th year Graphic Design Students, at Escuela Internacional de Diseño. I taught them the principles & methodologies of Interaction and User Experience Design. The students were able to test their own wireframes and prototypes for mobile apps they designed.

The curriculum started off with a Heuristics Evaluation of an existing app, then they proceeded to research on their prospective clients (based on briefs), develop personas, scenarios, task analysis, wireframes (which they tested upon real users) and a final working prototype.

Final prototype (iOS version) of Hospital del Maestro’s mobile app:

Screen Shot 2016-03-30 at 7.25.12 PM

App prototype credits: John Ortiz, Karla Flores & Gerardo Soto (group)

 

07506509271

20120514-055924.jpg

This is a research and practice based project I worked on while studying my Master’s degree in London, in which a mobile number and a website were activated in order to explore the possibility of empathy within an everyday basis. The purpose of the mobile number was for everyone to be able to call and have a conversation in which the receiver would maintain an empathic attitude towards the speaker. Examples of guerrilla and viral propaganda were prototyped.

20120514-055856.jpg

The project remained in a state of work in progress because of ethical and logistical concerns regarding the protection of the sender and the receiver of the dialogue to be produced when having the phone conversation, what was to be made with the material that would come out of the conversation, how would it be presented, should it be presented… These were a few of the concerns regarding the project. It also became a liability for me in terms of being exposed to unknown people that could hurt me, for the ambiguity of the propaganda and the project itself. As it was a number you could call to, the user could think it was a sex or help line. It was neither. It was an empathy line, only I wasn’t qualified to attend it (without formal training in disciplines such as psychology or nursing, it would have been difficult for me to remain neutral to feedback from the user), but at the same time, I thought it was a great exercise to explore the core of the meaning and application of empathy. For example, if someone were to call to confess a crime, my reaction shouldn’t have been to judge, but to identify with the person to a level where I would understand the reasons why he or she committed it without judging.

20120514-055933.jpg

Sal! Awards 2011

Sal!, the leading restaurant and gastronomy related hub in Puerto Rico, held their first awards last year. Sal! Awards meant to recognize the local food establishments for their type of food, special features and/or experience. Thirty categories were presented. Both the nomination and voting phases were open to and decided by the public.

The prize given to the winning restaurants. Photo by Claudia Robiou.
My work in this project not only limited itself to information architecture, design and art direction of several applications; I was also in charge of managing it in a specific period and was responsible for the overall outcome in terms of website QA for both web and mobile versions, social media implementation, managing the data of the nomination and voting phases, among other tasks.

Process of information architecture processes for Sal! Awards.
Information Architecture
In terms of IA, I developed several iterations of wireframes for the three phases of the website: nomination, voting and winners’ presentation. Notions of gamification and reward systems were implemented to the voting phase of the website, such as badges that the user would earn depending on the amount of categories he or she would vote for. Social media integration was a pivotal aspect of the website, as you could share each category you voted for and the badges you earned in Facebook, Twitter and LinkedIn. Flow charts and site maps were created in order to organize the information translated onto the wireframes.

Selection of pages of the print edition.
Art Direction & Design
I was responsible for the conceptualization and production of several applications, such as the awards’ logo, an icon system for the thirty categories, advertorial campaign for the three phases (nomination, voting and winners/finalists announcement period),  landing pages for web and social media, the physical prize given to the winning restaurant of each category at the awards’ ceremony and the special print edition with all the information about the awards.

Design process for the icon system.
I was also responsible of directing the supplier on the front-end design of the website on all the phases previously mentioned. 

Nominating and voting phases of the website (not the final iteration)

Mobile web and iPhone app for Magacín

Magacín, the social and lifestyle Sunday magazine of El Nuevo Día, launched its multimedia platform last August, with magacin.com in web and mobile applications. I conceptualized and designed the mobile web instance. I also redesigned the iPhone native application’s prototype.

Mobile web prototype for magacin.com
For the mobile web version, taking the structure and aesthetic idiom of the desktop version as reference, I developed a navigation system which would allow users to browse through the categories in a seamless way. Hierarchy systems were applied to sections such as events, which needed to have up to four functional tiers of information.

Screen flow for Magacín mobile web index page.
Rapid prototyping, screen flow and navigation models were some of the information architecture and user-centered design methods used for this exercise. They allowed me to understood how to categorize and organize information according to the different levels of navigation the user was to access. It also helped me understand the mobile experience, which is so different from the desktop/web browser experience.

 

Several visualizations of the prototype.
The iPhone app prototype was an aesthetic improvement of the existent structure, taking the Apple UI Guidelines into consideration for the standard elements and output layouts, such as photo galleries and videos.

Proyecto Puerto Rico

Print cover and introductory letter
Proyecto Puerto Rico is an editorial and photographic effort between El Nuevo Día and Cervecera de Puerto Rico, which portrays key characters who have helped shape Puerto Rican history with their work in a myriad of arenas (political, social, educational, humanistic, among others).

Center spread for the print application
I worked on the 2011 edition of the project, on its third year. The theme for this edition was wisdom. The profile of the characters chosen for this edition displayed legacy on their respective fields, and a sense of compromise with the Island.

Spread for the profile of Alberto Parachini, economist.
My role as Art Director and Designer was to oversee that the concept of the project was correctly implemented unto the photography and the audiovisual components of the project; plus conceptualize and produce it’s print and web applications. Information architecture was implemented in various phases of the project.

In terms of the photography concept, the subjects were to be deprived of every element that could attribute a specific context. Since some of the subjects are public figures, some of them involved in politics, we wanted to have a ‘pure’ photograph, on a neutral background, with a highly realistic treatment of the subject’s features. This meant that wrinkles were to be emphasized, not retouched. The result was partially achieved. There are some learnings on this aspect of the project. One of them was a lack of supervision of the audiovisual (photographers and videographer) team. A kickoff meeting was held with the graphic and the photographic directors of the newspaper, but the production team wasn’t present on any of the photo shootings to make sure the conceptual vision was successfully taken upon.

This affected the design of the print edition, as some of the photographs did not portray the pureness to be achieved. Therefore, the design had to be more aggressive in order to compensate for the discrepancies between the photography of all the subjects. It already was thought to have a strong typographic direction, with contrast between serif and sans serif font faces. We had a learning in terms of colors and press processes with regular newsprint paper. In various brainstorming sessions, we wanted the publication to be printed in white newsprint, or even matte paper, in order to emphasize white as a symbol of pureness within a non-contextual layout.

Index page for the website, elproyecto.pr.
The website itself was presented as a particular challenge within, as it had to show the previous versions of the project. For the first year of the project, 2009, a flash-based website was developed. There was no website update or implementation on 2010. For this edition, the archival element was pivotal. Various tools and methods were implemented, such as sitemaps and affinity diagrams (shown below). The website was developed with WordPress, a CMS with permitted to integrate all the content from previous editions.

Affinity diagram for Proyecto Puerto Rico’s website
Various sitemaps of the project were worked to organize and prioritize the information that would be shown in the website. At first, a social aspect was to be implemented, but using design thinking techniques, we discovered that it was not going to be useful for this website to work as a social hub, as there were not going to be human resources to maintain it. The website then evolved to function as a historical and archival resource. It also worked as a showcase of the growth of the project in its three years of life.

One of the sitemaps of the project.