Lista Groceries is a side project I’ve been working on for a few months. It was started with the idea of satisfying a personal need for a user friendly web app for groceries list creation, something key for my husband and I since we consider ourselves “busy cooks”. We love to cook and we do it almost every night.

It has been a very exciting and challenging project as it has allowed me to dig into HTML5, CSS3, CSS media queries, SASS, among other goodies, and really get a handle on what responsive design is all about. It’s been great as I’m getting to work on both design and development, as well as, having to think as a product owner. I can say now that things look a bit different when it’s your baby who’s at stake.

This was a quick and fun project I did for the guys at Pintley using jQuery Mobile and Themeroller. The concept was pretty simple: while you are hanging out at Outback Steak house you can swing by a Pintley tent and get a Taste of Sam Adams new beers. While you do that you can enter to win awesome prices by tweeting your tastings.

WordPress has become the CMS-to-use on any of my new website projects. Is not only very flexible and highly customizable, but also has a great interface that clients understand and ultimately love. With this premise in mind I proposed to Scott and Jeff, the voices behind Smart Songs, to build their new website using this CMS.

WordPress adjusted very well to what they were looking for: an interactive site that allows them to post rich content and establish a more direct connection with their fans. This new branded platform integrates their social media channels (Facebook, Twitter and YouTube) and serves as an outlet to sell their music and products.

Tabbed Layout
To break the content of the Songs page, we used a tabbed layout. This allowed us to place the call to action in a more predominant place, adding focus to it with the use of iconography.

YouTube Videos and Comments
Bringing SmartSongs musical videos from YouTube was a must for this project. However key for this was to bring as well the comments on those videos, since they had already a big fan base accessing their videos from YouTube.

Rich Media and PayPal Buttons
This site includes an online store for the band to sell their music and other products. With this in mind, the store was setup to serve both the display of music samples, and finished products, by providing music players and galleries of images that can be used alternatively.

As part of Pintley’s website redesign back in 2010, we worked together on the design of their iPhone application. A year after its first release, more functionality is being rolled out this month, and along with that more graphics, icons and layouts that I have designed.

Pintley’s iPhone app follows closely the website’s functionality as well as it’s look and feel. It enhances, however, the user’s experience taking advantage of the iPhone’s UI capabilities.

Beer Summary
The iPhone’s retina display allowed us to layout more content on each screen without crowding the space.

Social Sharing
The idea behind the design of the social sharing screens was to communicate through color the vendor’s identity.

Activity and Recommended Screens
The use of icons and graphics in these two screens lessen the amount of information that we wanted to display, making them more readable and easy to scan.

One of the main requirements for the construction of this website was the implementation of a content management system (CMS). The Communal Studies Association was looking for a system that could help them maintain their site easily, but that could also expand and adapt more functionality for the future where they see their users actively participating in the website’s content creation.

My approach was to use the WordPress Engine, taking advantage of its flexibility and extensive plug-ins library. The result is a sober website that is very sustainable from the client’s end as they remain in complete control over it, but also highly customizable and flexible.

Paypal Store
On the original site paypal buttons were used on tbe store. I reuse the same buttons, but customize their appearance as well as integrated other UI controls to generate a more intuitive store experience.

Customizable Forms
By using a WordPress plug-in I was able to setup email forms that the customer can actually manage without loosing control of their appearance.

Pintley Partners Beta is the interface that allows beer brewers to connect with their customers and expand on their marketing efforts. With the idea of promoting new enhancements for this interface, Pintley commissioned to me the design of a marketing section on their website.

The pages on this section were connected by a top navigation and a series of buttons that introduced each of them as next steps generating a guided tour trough the micro site.

Popularity Graphic
As part of the promotional pages I designed this graphic that illustrates Pintley’s viral marketing cycle.

 

Pricing Table
The great characteristic of this pricing table is that is not graphic dependant, relaying on HTML and CSS. This makes is easy to update maintaining it’s visual impact.

This unique project offered me the opportunity to design a social network application. The challenge was to design a very simple UI that would allow the user to focus on performing different actions, but still keep it interesting and engaging.

Since this project was a direct contract, I had all the freedom to put in practice my very own methodology. For that matter I started by getting input from the client to then follow up with mood boards. I really liked this approach, as I had room to play and get a sense for what the client was looking in a very short amount of time.

User Profile Page
Inspired in one of the most popular social networks, Facebook, the page layouts on Pintley follow common patters that users are very familiar with, such as tabbed navigations, intuitive icons and popular feeds.

Beer Detailed Page
The icons for the actions and the rating are buttoms the user can toggle to add a beer as a favorite, to the wishlist or to rate it.

Browse for Beers
To make it easier for the user to browse beers we went for the approach Netflix has made so popular, why reinvent the wheel? Since we know this is something users are very familiar with, with incorporated into our design making it “Pintley” style.

This project was also about redesigning Pintley’s previous UI, so to my advantage I had in my hands a working site to rethink and clear ideas from the client on how this new UI should work and look like. Always good when there’s client communication and every one knows what they want. The result: a fresh and clean UI. I couldn’t like it more! Even better if you like beer!

Part of the project was to develop and integrate  a custom built content management system (CMS).

When working on this project I not only enjoyed playing with the layout and richness of colors and tones, but also was tortured a bit, by having to stare at so much food photography… (I get hungry just thinking about it). Thankfully I’m not a vegetarian, and I did get some food samples. To sum it up, this project made me – and my belly – very happy.

Old Neighborhood Foods, as a company that makes pre-packaged meats has been around for a very long time (sometime around the 1910s). But just recently started to market itself as a brand directed to the consumer. When we were approached for this project, ONF had a basic – static website, strictly directed to the retailer and wanted to not only upgrade to a nicer looking website, but also wanted to present itself to the consumer. In other words, it wasn’t about getting a new dress, it was more about going to the gym and following a strict diet. Maybe some yoga… you know what i mean. ONF had to get sexy, and I think it did.

Join Email List Form Using
We used jQuery to animate the “join email list” form creating a cool sliding panel that saved valuable space.

Nutritional Information Tab
On the product pages, the nutritional information and the allergens was presented on a tabbed layout that loaded content dynamically and shown the nutritional information in the same format that is presented on the real product.

As Communication Arts Group client base grew on the web end, the company saw the need of refreshing their website’s look and feel, as well as, updating the markup to make it more SEO friendly. My job was to work on this redesign while employed by them.

 

Homepage

 

Portfolio Page