Lestoil Hack del Año

Lestoil Puerto Rico launched a user generated content based contest in which the users could submit their hacks for the possibility to win money. This was aligned to the brand’s online strategy to highlight the creative spirit of the target user.

I was responsible for the user experience design and management of resources (internal/external) of the project.

Instance userflow:

lestoil_yearhack_userflow_v2_rev

Wireframes:

lestoil_yearhack_mobile_submission lestoil_yearhack_mobile_voting Lestoil_yearhack_mobile_winners[1] lestoil_yearhack_voting_rev22-7-15

Layout (submission period):

65910-FB-tab-promo-Hack-del-ano

 

Tu primera tarjeta

Bancoop is a cooperative based bank which launched a campaign with two new products, a debit card and a credit card focused on a younger target. We designed and developed a responsive landing page to inform the clients of the benefits of both their products. It can be accessed at tuprimeratarjeta.com.

I was responsible for the user experience design and the management of the resources (internal & external) that produced and developed the project.

Mobile wireframes:

Bancoop_mobile_card_swipeB

Bancoop_mobile_home_swipeB Bancoop_mobile_menu

Current website (desktop view):

Screen Shot 2016-07-27 at 9.49.26 AM

 

Current website (mobile view):

Walmart Puerto Rico Template Design Optimizations

We provided the redesign of templates within Walmart Puerto Rico’s online property, the walmartpr.com website. In support of Walmart’s strategic plan to enhance marketing with a DIY/Lifestyle approach, we aimed to provide prospective clients with an improved customer interaction. The redesign focused on building a content rich website which provided a simplified and more user-friendly approach for existing and potential clients.

WM_wireframes_11mayo_Page_5 WM_wireframes_11mayo_Page_4 WM_wireframes_11mayo_Page_3 WM_wireframes_11mayo_Page_2 WM_wireframes_11mayo_Page_1

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)

 

Walmart Digital Catalog (Navilooks & Diario de Verano)

Walmart Puerto Rico decided to launch its first digital catalogue, focused on the categories of apparel and personal care.

We proposed a platform in which different looks could be displayed with product and price information on a responsive microsite.

I produced the sitemap and wireframes based on the brand character and heuristics. I was also the Project Manager/Digital Producer for the project, working closely with all the production resources to complete all the dependencies according to the project’s timeline.

Desktop/tablet wireframes:

wm_navilooks_wireframes

 

Mobile wireframes:

wm_navilooks_wireframes_mobile

 

Desktop/tablet layouts for Navilooks (Christmas Season Catalogue):

Navi_layouts_960_grid_Bembe

Mobile layouts for Navilooks (Christmas Season Catalogue):

00_NaviLooks_movil_home

Mobile version for current catalogue (Spring/Summer), Diario de Verano.

Screen Shot 2016-07-27 at 9.52.20 AM

Desktop version for current catalogue (Spring/Summer), Diario de Verano. Screen Shot 2016-07-27 at 9.52.11 AM

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.