Work Examples

Here I explain my involvement in past projects; the situation, my actions and the results. You’ll see how I performed, how I approached problems and how I worked with different teams.

If you’re interested in a more technical “show me the code” overview, you’ll be interested in the Open Source analysis.

The following projects are in chronological order (more recent first):

Magnet

Magnet is an Ionic application that was having problems with intricate layout implementation and rendering performance.

I joined the Crafted team to solve these pressing issues quickly to achieve a first demo deadline party.

Part of the visual aesthetics of the application involve diagonal divisions between modules. By applying transforms sparingly, which render faster via GPU and by profiling expensive animations with Chrome’s timeline, I could significantly improve the rendering performance on Android devices.

I could also finish the remaining modules in a way that worked for any mobile phone viewport width and that was modifiable by simple class composition.

The client was very happy with the results and the Crafted team could deliver on time for the launch demo party.

Wyeworks

Wyeworks wasn’t satisfied with the performance and loading times of wyeworks.com, so they called me to assess the situation.

The previous implementation used many plugins and loaded images that were unnecessarily heavy. Mobile users were particularly impacted by this. After evaluating the codebase and the necessary level of changes, I decided that a reimplementation was the best course of action.

By building a mobile–first responsive site that inlined the CSS impacting the above-the-fold content, I could achieve a 99% PageSpeed score, only hampered by the fact that the Google Analytics script can’t be cached since it’s an external asset. And even if the user doesn’t support JavaScript, all the functionality still works (even the galleries) thanks to a Progressive Enhancement approach.

After this was done, I coached Santiago Pastorino (Top 10 Rails contributor) on Front–End development techniques.

NGO Registry Admin

The operator for .org, .ngo & .ong domain names needed a new Admin area to manage their accounts and learn from their customer data.

To make Back–End development easier for the folks at 3magine, I built a Rails app and implemented all the Front–End as static pages and wrote the SCSS and JS so the Asset Pipeline could transpile, concatenate & minify them. Hand over was seamless.

After considering the alternatives, I used Zurb Foundation to reuse and customize their components thus accelerating development. The Front–End was built without a hitch and delivered on time.

Travelbug

Travelbug (afterwards renamed to Tripixy) was a project where 3magine’s designers presented me with a finished and approved design. In cases like this, where you’re working with a group of PSDs each representing a page, the temptation is to think that the unit of functionality is the page and build each of them as an isolated concept.

What I did instead was to think of the project as a group of modules that could be arbitrarily combined to form any of the pages, and even used to create new pages easily. The finished modular SCSS dealt with forms, typography, buttons, color scheme, column system, transitions and several custom modules.

Even though responsiveness was not a plan from the beginning, each module adapted to their containing father’s fluidly. Even when there wasn’t a single media query, the layout could respond to the viewport’s width thus making it responsive much easier later on.

Neo

We needed a site that represented our expertise in UX, back and front end development. Spanning 8 offices around the world, we needed a solution that was reusable by different teams who could manage their own presence, while keeping a unified Brand Identity.

At the Montevideo office, the UI designer and I were given an initial moodboard and inspirations from which we iterated and built prototypes we periodically showed HQ. I was in charge of the UX, IA and Front–End of the site and she was in charge of Brand Identity and UI.

After we were satisfied with the underlying structure of the site, I started building a living Front–End styleguide to make further development easier and to ensure modularity. This helped in building the recruiting area and landing page for each office and the company blog.

The result was a usable, accessible and responsive site with memorable company identity that improved recruiting & marketing, which led to client leads like Microsoft Azure and ICANN.

Cubox

After hiring a crew to make promotional videos for Cubox, we realized we also needed a complete overhaul of our current company presence online. We needed to create a site that incorporated the new videos, showed our Open Source work and led possible clients to hire us.

I took the tasks of basically creating the site from scratch, using HTML5 video elements and a randomized poster image for each video, which worked also as a hero image.

I started by gathering our objectives with the site, gathering all possible content available, creating the IA for the site, creating new copy, and prototyping the site directly on HTML and CSS.

After some iterations we arrived at a result we were satisfied with. The site was responsive, fast, simple and it delivered a clear message. Not only did this new site help us get new clients like Marqeta, Betable and Monaqasat but it also pushed other Uruguayan companies to follow our lead and embrace RWD and minimalism.

DIRECTV

During my work at TakeOff I was involved in several DIRECTV customer facing projects, such as DIRECTV Sports Portal, MiDIRECTV, DIRECTV Planes and all the sites for the different Latin American countries.

For DIRECTV Sports Portal I was involved in making the design proposals come to life, crafting the media widgets and overall layout in a way that was compatible with the mainstream browsers of the day. For the 2010 World Cup, the site streamed live information and statistics about the matches successfully to a diverse Latin American audience.

MiDIRECTV is a webapp that DirectTV customers can use to check their balance, see possible movies, see promotions and make payments. I was the main team liaison with the US team and was responsible for structuring the desktop app as well as the separate mobile interface. This project was used and stress tested by all Latin American DIRECTV customers.

Not only was I responsible for several Front–End implementations, but I also had to coordinate the deployment and customization for all the Latin American countries versions, since each had language specificities and brand differences to be accounted for. All in all I could organize and structure the layout and tasks in a way that minimized errors and streamlined the process.

DIRECTV Newsletters

Marketing for DIRECTV also included Newsletters, for which I was responsible to assessing the design, building, testing across several clients and enforcing file size constraints.

The design for these newsletter were very ambitious, so we had to iterate to find a compromise between visual design and the constrained technical possibilities of newsletters. After getting to a mutually agreed result, I would made sure to implement these newsletters in such a way that even Microsoft Outlook 2007 (whose rendering engine is Word, not even a browser) could render them appropriately, and that their total size wouldn’t surpass Gmail’s display limits.

These newsletters were delivered to thousands of DIRECTV clients and they informed them about payments, promotions, new series and sports.

These are other projects I was involved in:

  • Microminimus
    • CSS architecture revamp
    • Gallery Front–End & UX
    • Comment area Front–End & UX
    • Emoticon and social features
    • Overall Front–End improvement
  • U4G
    • Content admin layout Front–End
  • Lean Day West
    • Design iteration
    • Front–End
    • RWD
  • Gobstopper
    • Book annotating UX, research on best UX for a unified RWD solution
    • Book annotating Backbone Front–End
  • Szoei
    • Front–End
    • Design iteration
    • UX
  • Marqeta
    • Implementation of marketing material
    • Front–End bug fixes
  • Sprint.ly
    • "item card" module
  • Betable
    • Front–End & UX of signup, login
    • Implementation of marketing material
  • Monaqasat
    • Statistics Graph Usability improvements
    • General Bug fixes related to RWD
  • Teamitup
    • Front–End
    • Logo redesign