Predix Design System & Predix UI
UI Architecture & Development
The industrial world of power plants and jet engines is now enabled by data, analytics, connectivity, and intelligence. GE Digital represents one of the most bold transformations ever attempted to harness the power of computing for the purposes of industrial application.
In 2013 I joined GE Digital to work with an illustrious crew of designers and developers to create and grow the "Industrial Internet Design System".
Over the 4 years I was on the team, we evolved our approach and practices to deliver Predix Design System:
✅ UI components that speed UI Development
✅ Composable and reusable interaction patterns
✅ CSS modules to establish consistent design
✅ Stencils and guidelines to accelerate application designers
"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."
The most interesting part of the journey was in early 2015 when we took a fresh approach to developing a new design system. Whereas the IIDX was developed with hypothetical applications 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.
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.
"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.
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.
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.
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.
2007
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.
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.
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.
