Lexus Website Redesign

We were approached by Toyota de Puerto Rico, Corp. to redesign the website for Lexus, their luxury brand. The focus was to display the content of the site with the same qualities their vehicles have: comfort, elegance, power. We designed and developed a desktop & tablet friendly version, and a mobile version.

I was responsible for the scoping and production management of the project, with internal and external resources.

Desktop version of the website (as of April 2015):

Mobile version of the website (as of April 2015):

Millas de Felicidad

Every year, Toyota de Puerto Rico, Corp. sends their Christmas Card to their employees and suppliers all across the globe. On 2012, the creative proposal was to use the multiple miles Toyota cars gather, because of their durability, for a socially responsible cause. Paired with Fundación Ferni, we were able to produce a website that was shared throughout social media and email, to gather 32 million miles worldwide, which translated onto 19 wheelchairs that were donated to underprivileged children.

Case study:

Website screen shots:

You may access the microsite here.

Trident Jam

We developed a game in which the user could chew gum in order to create music. This was for Trident, at the moment part of Kraft (now Mondelez). The game used new technology, both software and hardware based. We designed and developed the whole experience, including icons, motion graphics, gameplay and the interface.

It was installed on one of the biggest shopping malls for a promotional period of three weeks.

Here’s the case study video:

Screen shots from the gameview:

We also developed a Media Campaign and a Microsite in which the game was explained, along with the itinerary so the user could visit the booth and play.

 

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.

Pretzel Alphabet

Pretzel Alphabet (whole alphabet).

The Pretzel Alphabet came to me as a random idea in the summer of 2009, when I just graduated from my Master’s Degree in London. I was eating a bag of pretzels, and I thought I could make a whole alphabet without altering a single pretzel. I didn’t try to finish the alphabet at the time.

Nevertheless, the idea materialized in 2010, with the collaboration of Félix De Portu. I ate the pretzels, Félix took the photographs, and we both worked on the website design and programming.

Pretzel Alphabet index page.

On 2011, local based magazine Bacanal had a call for submissions on their food issue. We submitted the Pretzel Alphabet, and got it published.

Because of my ever-growing interest in interaction, I thought it would be great for people to try to make letters out of pretzels on the magazine’s launching party, held at Candela, Viejo San Juan. And so we did. The event was called “Eat your pretzels”.

Revista El Bacanal’s launching party at Candela, Viejo San Juan. (Feb 2011) Photo by Yvonne Santiago.
Intervention of pretzels at “Eat your pretzels”. Photo by Yvonne Santiago.
Digital projection of the alphabet’s slideshow onto the wall. Photo by Yvonne Santiago.