• Product Design
• CSS
• JavaScript
• HTML

Choose Digital Apps

2013 – 2016

Choose Digital was a minimally-funded startup and consequently a great opportunity for me to build up all kids of web dev skills: product concept and coding, UX and wireframing, workflow tools, pattern libraries, UI copy, etc.

Our primary product was a digital media e-commerce store using reward program currencies (“points”, “miles”, etc.) It started with a lot of backend infrastructure and cloud services, most of which was handled by one lead developer working remotely. We also decided to go with a brand new MVC web framework called Play!.

My role was UX, documentation, design, and frontend development. We later added a second frontend designer and a third developer and with that team we built some pretty impressive stuff, if I may say.

Pattern Libraries and SCSS structure

Our first app’s frontend code was a mess (which we eventually cleaned up), but the process taught me something very useful. The only good way to build out the design of a large app — with many user flows, many application states, and a large template structure — is to create a UI page filled with basic semantic html elements and static versions of all modules and variations, and have that page load the same CSS and javascript that the customer will get. With a repository of UI modules like that, you have a single url to visually test most of the app’s design.

It turns out others had been working on this idea of a UI module library. The excellent Pattern Lab was a standout example built by a community of developers.

We organized our CSS into modules using Compass for some mixins and functions. Our roadmap had us building a lot of sites in a short time, so we researched and found a great technique for creating core modules with default values and overriding those with theme skins.

Visual design

One of my inspirations at the time was a web app called Rdio. Rdio was an early music streaming service that stood out from the others in that it was a web app first and foremost, and a really good one. Their ultra clean design and simple clear UX was exactly what I thought a digital music, ebooks, and video web store needed, allowing the visual focus to be on the cover artwork and keeping the design almost invisible.

Reusable SCSS components

Building upon that idea of a themeable UI module library, we also stripped the modules into their barest components and styles so that we could reuse them in other apps as needed. Our basic modules were things like alerts, cards, masthead, drawers, dropdowns, popups, and tap-friendly radio buttons.

I still use those modules in almost anything I build, from a tiny friend’s website to a high-traffic blog at work. My advice to frond end developers, or web designers who code, build your library of patterns and modules over time so you’re not building the Coricancha at Cusco every time ¹.

Along those lines, we created a structure where we could create SCSS themes that would inherit from the base module library and could be created fairly quickly by modifying the variables file.

• 1. The Sun Temple Coricancha is an astonishing work of architecture and building technique by the Incas, who FYI never invented the wheel.

• Previous: Avaya Rewards
• Next: Choose Digital Booth Graphics