Predix Design System & Predix UI
UI Architecture & Development

In 2013 I joined GE Digital to work on the "Industrial Internet Design System". A living styleguide, a CSS framework, a set of UI components... this first design system was quite a success. For over two years, thousands of developers around the world used it to build the first applications for GE Digital's then very new Industrial Internet initiative.

Predix Design System & Predix UI

"Predix UI is a set of user interface components
that enable designers and developers to quickly
and easily create Industrial Internet web applications
that run on top of Predix services and data."

So with these giant shoes to fill, in early 2015 we took a fresh approach to developing a new design system. Whereas the IIDX was developed with hypothetical applicaitons in mind, this new Predix Design System would be geared toward enabling the specific applications being developed in parallel on the Predix platform.

The Essential Foundation

At the base level, Predix UI establishes a set of small, composable, configurable and interdependent Sass modules. These modules can be pieced together by developers to gain the benefits of a CSS framework without the typical bloat, instead offering developers a solid, scalable CSS architecture.

This architecture, based on the Inuit CSS framework, defines the app-wide design aspects such as colors, typography, spacing, layout, basic objects, and simple design components.

Predix Design System & Predix UI

Designers and developers are able to stand on solid design decisions, skip UI design boilerplate, and focus on their own application and users.

Web Components & Advanced UI Elements

Beyond the basic styles, Predix UI provides advanced UI elements using the latest web technology: Web Components. These web components define custom HTML elements that can quickly be imported and configured to the specific use case that a developer needs.

Predix Design System & Predix UI

"The high-contrast visual language and card-based modular view framework deliver the most meaningful and useful information. That means you can create custom apps that deliver data based on specific context and user needs."

Read more on the Predix UI Catalog.

Chef Surfing Founder, Designer, Programmer

Chef Surfing is an online community marketplace for culinary services. Chef Surfing is the best way to hire a chef for convenient and quality culinary service at your home or office for a party or special event.

https://chefsurfing.com
https://chefsurfing.com/chefs
https://chefsurfing.com/chefs/
https://chefsurfing.com/request/new


I led a team of three to design and deploy a complete and smooth experience. I focused on the design, front-end code and systems architecture working with programmer Eugenio "Tute" Costa to build the Rails app. We were assisted by the best QA and COO in the world: Clara Gonzalez Sueyro.

We interviewed hundreds of chefs and culinary entrepreneurs to gain key insights into how their profession and businesses function. We integrated this learning through continuous improvement to the product. Over the course of 2011 and 2012 we launched two complete redesigns and 100's of major and minor functionality changes, each time getting closer to product-market fit.

Designing and building Chef Surfing was one of the most valuable learning experiences of my life. To anyone interested in starting or joining a startup: my advice is to "go for it". Whatever the outcome, the minimum is that you will gain a very valuable education and respect for entrepreneurship.

Union Designer, Programmer

Union makes the highest-quality snowboard bindings available in the world. When the brand was initially getting started we created a web experience to show-off the product and draw people into the Union story. Thankfully this story spread and Union now stands on a solid reputation.

From 2006 to 2008 I was responsible for both the design and development of UnionBindingCompany.com. Pictured here are screenshots from the 2008 site.

http://www.unionbindingcompany.com
http://www.unionbindingcompany.com
http://www.unionbindingcompany.com
http://www.unionbindingcompany.com
http://www.unionbindingcompany.com
http://www.unionbindingcompany.com

Coal Headwear Designer, Programmer

From 2006 to 2010 Coal Headwear gave me the responsibility to design, develop and deploy their online catalog and e-commerce system. The first year we built a simple catalog and kept a seperate e-commerce page at shop.coalheadwear.com running Cubecart. The next year I enlisted Juergen Fesselmier to build a custom e-commerce system using Ruby on Rails. Coal was a great client because of the high quality photography they invest in and the creativity of their stylish product design.

http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com
http://coalheadwear.com

Nitro Designer, Programmer

For four consequitive years Nitro handed me the responsibility of designing, developing and deploying their web site. Nitro is a global snowboard equipment brand based in Germany. With hundres of products and thousands of data-points for dealers, distributors, retailers and consumers we delivered an elegant solution that delivered great results for the brand and company. The site included several advanced features for it's time including automatic GeoIP language setting and dealer locator as well as a P2P Online Retailer affiliate program.

http://nitrousa.com/en/boards/swindle
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards
http://nitrousa.com/en/boards

2007

http://nitrousa.com
http://nitrousa.com

After four years of work at Microsoft, Nitro Snowboards was my first important freelance client. It was difficult to make the transition from being a member of a team to the leader of a team, but this transition was critical to my professional development and growth.

My focus was on the design and front-end implementation however I regularly served at every level in the technology and management stack including but not limited to: systems admin, data-entry specialist, marketing copywriting, database administrator, account executive and project manager. Being faced with such a large project I came to understand the power and necessity of teamwork and specialization. Over the years I worked with wonderfully talented people such as Tim Taylor, Ry Dahl and Matt Maeda

Xbox.com Designer, Programmer

In 2002 I began working at Microsoft in the Games Division designing and developing web sites for the PC games division. Later I joined the growing Xbox.com team to help make the innovative online marketing of the new Xbox gaming platform a success. During my tenure at Microsoft I worked as both a designer and a developer, delivering projects from inspiration to completion.

http://xbox.com

Buena Carta Designer, Programmer

Buena Carta is a restaurant guide for Buenos Aires, Argentina available in English and Spanish.

I served as the designer and front-end engineer on a team of three. Buena Carta has over 1400 restaurants available for delicious adventure and review.

https://buenacarta.com
http://www.buenacarta.com/en-US/restaurant/buenos-aires/puerto-madero/cabana-las-lilas

I worked with two other developers to design and build BuenaCarta.com, taking responsibility for the design and implementation of the front-end, dipping my toes into the Rails backend now and again and leading the internationalization and localization efforts.

Northwave, Drake, Bakoda Designer, Programmer

My first job out of school was as the web designer and programmer ( aka "the web guy" ) for a Northwave North America which managed the Northwave, Drake and Bakoda snowboarding brands. I was twenty years old and everybody at the company went snowboarding all the time. The sites were 100% Flash. Ah yes, those were the good ol' days.



http://northwave.com
http://northwave.com
http://northwave.com


http://drake-bindings.com
http://drake-bindings.com
http://northwave.com


http://bakoda.com
http://bakoda.com
http://bakoda.com