• Globant Labs

    Description

    Globant Labs Redesign

    Work done:

    • Visual redesign adjustments based on exsiting mockups.
    • New design for project detail page.
    • HTML5 Markup based on new comps.
    • Using LESS CSS.
    html-css
  • MoneyGram Mobile

    Description

    Mobile website for MoneyGram US

    Work done:

    • HTML5 Markup built on top of jQuery Mobile.
    • Using LESS CSS.
    • Templating with Handlebars.
    • Based on a RESTful Web Service Architecture connecting with existing MoneyGram services.

    Visit the website: http://m.moneygram.com

    html-css
  • Walmart-MoneyGram

    Description

    The MoneyGram-Walmart partnership offers online money transfers to any Walmart store in the US or to more than 190 international MoneyGram agent locations

    Work done:

    • Prototyped the whole site in HTML, CSS and JS for Usability Testing based on creative mockups.
    • Integrate jQuery Auto Slideshow plugin.
    • Phase 1: JSP Integration with IBM Webshpere Java platform.
    • Phase 2: XHTML and JSF integration with Spring MVC platform.
    • FED Performance tuning to achieve < 3s page loading time.
    • Integration with the Oracle WCM (Content Management System).

    Visit the website: http://walmart.moneygram.com

    html-css
  • MoneyGram Online

    Description

    MoneyGram Online is a platform for transfering money around the globe to more than 190 countries

    Applications:

    Front End:

    • Support and mantain existing JSP, JSF, CSS and JS code.
    • Integrate jQuery Auto Slideshow and jQuery Auto Carousel plugins.
    • Develop and integrate new code based on wireframes, mockups and user stories.
    • Quick prototyping for concept proofing and usability testing.
    • Integration with the Oracle WCM (Content Management System).
    • UI architecture working in an agile methodology, giving estimations and planning the backlog for future development.

    Visit the website: http://www.moneygram.com

    html-css
  • Web Fonts

    Description

    A test-case on the benefits of using Web Font Embedding vs. using text-images

    Web Font Embedding is a beautiful alternative for presenting text in websites. Since most major browsers are now supporting this feature, designers and developers no longer have to rely on images that replaced text on the web.

    Topics:

    • Before & now
    • @font-face specification
    • Web Font embedding examples
    • The cost of text-images and test-cases
    • Web Fonts in action

    See the full deck in Slideshare

    Visit the website: http://www.slideshare.net/jdmedina17/web-fonts-18199603

    html-css
  • Select Tag Study

    Description

    A study on the HTML <select> tag, styling it and the challenge it presents

    The study was done based on the fact that the <select> tag arrow can’t be styled and varies from browser-to-browser and OS. There are some alternatives for replicating the native HTML behaviour with other HTML elements and JavaScript, but they can be very costly for the browser.

    Topics:

    • W3C specification
    • Styling
    • Limitations
    • Alternatives
    • Performance issues

    See the full deck in Slideshare

    Visit the website: http://www.slideshare.net/jdmedina17/the-html-ltselect-tag

    html-css
  • Caravela Coffee

    Description

    Caravela Coffee is a green coffee importer working in partnership with Virmax Cafe

    Work done:

    • Web design.
    • HTML + CSS coding integrated with the Tumblr platform.
    • jQuery coding for media display using the Shadowbox plugin.
    • Google Analytics SEO and tracking.

    Visit the website: http://www.caravelacoffee.com

    html-css
  • Sears Home Services

    Description

    Sears Home Services is a platform that allows home owners to schedule home improvement services online

    Work done:

    • JSP, JSF & CSS coding based on mockups created by creative services.
    • OOP JS architecture for the scheduling services widget.
    • Support for the bookmarklet feature for the scheduler.
    • jQuery UI widgets for carousels, accordions and other UI components.

    Visit the website: http://www.searshomeservices.com

    html-css
  • Galería Expreso del Arte

    Description

    Galería Espreso del Arte is an art gallery that supports and distributes Colombian artwork.

    Work done:

    • PHP development based on a MySQL DataBase for managing the gallery content.
    • Displays info about artists, art pieces, expos, news and links.
    • Price quote system for clients to ask about art prices and integration with the Pagos Online payment system.

    Visit the website: http://www.expresodelarte.com

    html-css
  • jQuery Auto Slideshow

    Description

    This jQuery plugin creates a slideshow that cycles through image items found in the HTML

    It has the following variations:

    • Picker controls: One picker per slide plus a play/pause button.
    • Thumbnails: In addition to the picker controls, thumbnail controls are generated. The thumbnail images are assigned with CSS and the background-image property.
    • Lookbook: Next/Previous controls that loop through slides, slide count and a play/pause button.
    • Pick a slide: Use links with the following hash structure to pick a slide: #slideX (where X is the slide number). Pick slide number 2.

    Other configuration options:

    • Delay between slide change.
    • Slide fading speed.
    • Pick starting slide.
    • Toggle auto-play.
    • Cross-fading.
    • Spinner loading image.
    • Lookbook controls button naming.
    javascript
  • jQuery Carousel

    Description

    This carousel scrolls sideways through items in the HTML.

    Features:

    • It automatically adjusts items to fit as much as possible inside the container.
    • It's liquid. If the container flexes, it will adjust items. Try it yourself by dragging the bright blue borders at each side of the carousel.
    • Option to multiply the scrolling of items by a fixed number.
    • Ability to give an infinite illusion by cycling items endelsly.
    • Also you can change the scrolling speed.
    javascript
  • jQuery Bring Flickr

    Description

    This jQuery plugin brings up to 20 images from any Flickr RSS

    You can choose the size of images to bring:

    • Square thumbnails
    • Thumbnails
    • Small
    • Medium
    • Large
    • Original

    The size selected must be available from the Flickr feed; otherwise Flickr returns a blank image.

    The plugin will fill how many empty <img> objects it finds in the HTML.

    If there's only 1 <img> object in the HTML and you choose to bring more than 1 image, the plugin will choose an image randomly.

    javascript
  • Execution Context

    Description

    What are closures? What is a scope? What exactly is "this" in JavaScript?

    Every bit of JavaScript code runs inside an Execution Context. This key principle is the base of the closures. Mastering closures is key when writing JS code and apps.

    Topics:

    • Execution Context (EC)
    • Closures
    • "this" keyword

    See the full deck in Slideshare

    Visit the website: http://www.slideshare.net/jdmedina17/javascript-execution-context

    javascript
  • MoneyGram Mobile

    Description

    UX & Interaction Design for the MoneyGram mobile application

    Navigation design:

    • Home based navigation scheme.
    • Omni-present (or fixed) pattern navigation bar in the header.
    • Auxliiary navigation footer.

    Sketching and Wireframing:

    • Phase 1: Home, sign in, recent activity, send again, cost estimator, agent locator, FAQs, contact us.
    • Phase 2: My Account, registration, rewards, PhoneGap wrappers for iOS and Android.

    Prototyping:

    • Header navigation buttons proofing in iOS and Android simulators.
    • Navigation scheme exploration using jQuery Mobile.

    Visit the website: http://m.moneygram.com

    ux-design
  • MoneyGram

    Description

    UX & Interaction Design for the MoneyGram Online applications

    Card sorting and mental models:

    Sketching and Wireframing:

    Interaction Design:

    Prototyping:

    ux-design
  • Beyond User Centered Design

    Description

    An approach for product design focusing on making the user feel awesome

    This presentation tries to shift the paradigm that products should focus on their features. Instead we should think about what does our product enable the user to do and how does this makes him feel awesome, then he will evangelize and sell the product to others.

    Topics:

    • Evolution of the Web 2.0 and the black box.
    • Users with passion, learning curve, evangelizers and examples.
    • Opening the black box.
    • Paradigm of misattribution of arousal. Loyalty.
    • Conversational and first person language.
    • Captivate, motivate, engage.
    • Evolution of awesome.

    See the full deck in Prezi

    Visit the website: http://prezi.com/wjwvb9xduihv/beyond-user-centered-design-opening-the-black-box/

    ux-design
  • Remy

    Description

    Remy is a spanish restaurant in Melbourne Australia

    Work done:

    • Web strategy study based on personas.
    • UX design and wireframing.
    • Web design.
    • HTML, CSS and JS coding.
    • Geo-location for providing driving directions.
    • Google Analytics SEO and tracking.
    ux-design
  • Zemoga Website

    Description

    Pitch for the Zemoga website redesign

    Zemoga wanted to re-design their website in 2009. This was a design pitch based on their 4 pilars:

    • Ideation
    • Production
    • Promotion
    • Measurment

    The design focused on media showcase, tags to identify pilars, a social media smart bar (z-activity), bios and testimonials and a responsive design for mobile devices.

    ux-design
  • Qué me pido

    Description

    Que me pido is an online portal for restaurant food delivery to your home

    The UX design was focused on location-based searches for restaurants, based on their delivery zones and working hours.

    Work done:

    • UX design and wireframing.
    • Interaction design.
    • HTML + CSS coding.
    ux-design
  • Sexto Sentido

    Description

    Sexto Sentido was a rock band from Bogotá Colombia

    Always in the DIY spirit, the band heavily relied on social media tools to broadcast and promote their music & image to the world.

    Work done:

    • MySpace layout designs that were implemented from 2006 to 2009. Custom designs no longer supported by MySpace.
    • Bandcamp layout.
    • Media website for press content download.
    • EPK (Electronic Press Kit).
    ux-design