Consumer

Early on in my career I was enamored by the relationship between design and consumer behavior on the web. As a freelancer I’ve jumped from fortune 500 mega sites to my homeboy’s online cookie startup.

Building Myi… a few times

myiSome products are destined for glory. Some are destined for the scrap heap. Myi was one such product. The brainchild of Nominum Inc’s former CEO, the project saw a two year development cycle but was never launched. Regardless, it involved some top notch people across the spectrum of departments so I have to say… Myi was pretty cool. No, really!

Nominum is a DNS company. Some would argue that they are the DNS company as Paul Mockapetris, the inventor of the Domain Name System (DNS), is chief scientist and chairman. While they know a lot about providing large scale services to telecom providers they didn’t know much about creating consumer services. Myi was an attempt to package existing DNS abilities into something that the average household could relate to and benefit from. I still think the idea has legs.

nominum1

The user “dashboard” offered a styled interface for investigating, modifying, and purchasing apps.

The art director spun an unapologetically female aesthetic onto the brand. This product was being aimed dead center on educated affluent women with children, nicknamed Mominums. Come on! How is that not cute? Anyway, the undeniable success of the iTunes app store model drove us toward offering each service idea as an “app” that could be purchased a’ la carte. Need to block Facebook from 3pm to 8pm so junior can finish homework? Myi had an app for that.

I was the UX lead on this project which meant that I worked with the designer to come up with layouts and widgets then lead a small team to execute those designs. Honestly, these were all top notch talent. The work this team turned out was awesome. The thing is we kept turning it out… over and over.

The first was a fully functional prototype we built for the CEO to present at a conference. We locked ourselves in a room for three days and built an entire working front end in PHP. It was some serious start up action in there and was pretty damn fun.

nominum3

The UI featured a HTML5 carousel style selector which populated the “drawer” space below it. Not particularly scalable but it had a certain “wow” factor.

Then we built it again in Rails figuring that this would be the front end that would actually be used to connect to the supporting services. This process was beyond “agile” as features flew in and out like pigeons at the park. While it was argued that we have more of a restful service and make AJAX calls to a Rails API, we ended up just making a straight forward Rails view based application. It worked well.

Then we moved over to Codeigniter. I’ll be honest here. I have a secret love for PHP. We secretly meet in Summer and write letters during the rest of the year. I still love you, PHP!!!

Then we decided to throw a Javascript framework on top of that. Yes, I’m talking about the fourth version of the same exact application front end. It’s important to realize that at this time MVVC was just starting to infiltrate the UI/UX world and best practices had not yet been solidified. There was no JS template system yet so we ended up with a lot… and mean a lot… of data-xxx attributes all over the place so the app could pass data around.

Learned skills.

The Myi project allowed me to explore some new tools; CSS3, HTML5 Video, Web Fonts (@font-face, licensing process), Codeigniter, SASS, Agile Development.

Advertisements

SFAF.org

SFAF

Established in 1982, our mission is the radical reduction of new infections in San Francisco because we refuse to accept HIV as inevitable.

The San Francsco AIDS Foundation came to me with a handful of Photoshop files from a designer and instructions to “make it work in any content publishing system”. No problem! We created a custom JS navigation system that had a single dependency, JQuery. The CSS was also custom which allowed us to escape the “everything looks like bootstrap” issue. These two decisions made for an amazingly lightweight and extensible end product. What would I do differently? While the home page is built to work across content contexts, a responsive design throughout was not in the cards for the project. The designer delivered desktop only context layouts. I would LOVE to go back and make the existing look and feel more responsive to mobile and alternative platforms like televisions.

Flojuggler iOS App

Flojuggler Mobile UI Design

Flojuggler is the lifestyle menstrual tracking application designed to track the cycles of multiple persons. There are times when you want to know which of the women in your life are having their periods. See the illustration below.

I created the entire brand, site design, and programming which included  “Facebook style” image management, extensive AJAX feature sets, JQuery UI integration, all on a true MVC architecture. This was another opportunity to invent a service from the ground up.

flojuggler-problem

The original Flojuggler was built on the CakePHP framework. I was in love with PHP at the time. Cakephp, a Ruby on Rails knock off written in PHP, and JQuery UI had just come out. Had a lot of fun making this one years ago but the technology, UI/UX, and brand have become dated so it’s time to make an iPhone app. Let’s take a look at that process.

Balsamiq Mockups

Balsamiq Mockups provides a ready to use language for wireframes and makes it easy for non-designers to make edits.

Wireframes: First step is to create a rough idea of what the app will do. I prefer to use Balsamiq Mockups to create wireframes because it’s simple and does not distract from the task at hand. Here we have three basic screens; The flo list, flo edit/create form, and the prediction form. This allows us to dip into the initial conceptualization of the UI/UX which leads to the code class structure. I’ll spend at least a week going over multiple versions of these wireframes. It’s cheaper to explore and make mistakes here rather than in the development cycles. Solid wireframes provide design and engineering with a consensus on where they are both headed which is supposed to be a single destination.

Designs: During this phase I’m living in Adobe Illustrator, Photoshop, and mostly Fireworks. The latter allows amazing rapid prototyping and final comps as it provides a huge amount of object support when compared to Photoshop. Fireworks allows producers to approach a project similarly to the way that a good framework allows a developer to proceed with structure. Illustrator and Photoshop help a designer create art. Fireworks helps a producer to create assets. When you’re wearing all the hats it really helps to have the right tools on hand.

ios-simulatorscreensnapz002

The UI/UX progression over time. The initial MVP on the left and the results after some iterating on the far right.

Since this is a ‘prototype’ project there’s not a lot of custom design up front. I’m really looking to emulate the iOS 7 look and feel first. Get the app working in an acceptable UI/UX format. The time for exploring real designer ideas comes later.

Diagrams: The wireframes are the stepping stone into my UML diagrams. Again, it’s cheaper to plan on ‘paper’  instead of planning while coding. Sure, I’m always going to run into problems and run back to the drawing board but this is about minimizing how much that happens and how much damage occurs in the event. I’ve also found UML diagrams great for code reviews before any code is written. Having a more senior programmer look of my diagrams helps keep my mind open as I have not invested any hours in code. It’s easier to throw away a diagram than it is to throw away a day’s worth of code.

Flojuggler is remarkably simple when it comes to class structure. There’s really just one, two if you found the model class. The rest of the methods are behavioral and not really dealing with the data other than calling flos to display or delete.

Flojuggler iOS native version

Initially I wanted to see how far I could get in Objective-C in two months.

Coding: While I’m very familiar with Javascript, I wanted to try and do this in Objective-C for all the obvious benefits of using a native language on the platform. Off the bat I knew that JS and Obj-C are not very close in syntax or structure but I felt like it was worth trying. At the same time I didn’t want to dig myself into a six month learning curve so I decided to time box the experiment. Two months of Obj-C and let’s see how far we can get.

Two months later I had a working CRUD in place. I learned the general syntax of Obj-C and dug a bit into the X-Code data model paradigm which I found to be very SQL like. It looked promising but… that was a steep learning curve for a simple CRUD. The time box had ended and it was time to start over with a Phonegap implementation. Let’s see what I can do in the same amount of time using Phonegap, a Javascript framework in iOS.

Flojuggler iOSA month later I had a complete prototype with all the core features and a few bells. With little to no ramp up on the core language it was much easier to crank out a product. In fact, there was even time to evaluate Backbone and Angular along the way. Given the minimal nature of the application it didn’t appear necessary to use another framework on top of Phonegap and JQuery Mobile so I wrote everything by hand. It’s less extensible but the project won’t extend and the codebase is a fraction of what it would be with additional libraries.

There’s some additional libraries for camera functionality, notifications, etc but this is the basic prototype done in a month. Now I can go into design mode and start coming up with final concepts for the real brand aesthetic.

Wells Fargo Email Campaigns

wellsfargoBefore I was crafting application UI and cranking out user stories, there was a lot of service work with advertising agencies like Grey, Saatchi & Saatchi, and Addis. It was in these environments that I learned some of the realities of commercial art creation and coding.

Behold a now ancient series of Javascript calculators, PHP registration apps, FLASH based ad campaigns, etc. The year was 2005 and CSS in an email was a dream that had yet to be realized for the mortal web marketer. We designed and hand coded each piece to work in any email client.

WellsFargo Home Mortgage Calculator WellsFargo Home Equity Loan Wells Fargo Portfolio Wells Fargo Online Banking Wells Fargo Home Mortgage

Click on the thumbnails to open the full html used in each campaign.

iLLSTATiC

iLLSTATiC Brand

iLLSTATiC gave me the opportunity to invent a brand from the ground up; logos, collateral, advertising, etc.

The lifestyle/events web site that cleared the way for so many events/ticketing/lifestyle applications online. Full brand invention including user interface, graphic production, and daily maintenance. Hand coded automated guestlist management system, automated mass E-Mail system, custom content management system, e-commerce integration, ad delivery and tracking automation, custom secure audio/video delivery modules… it goes on. All in PHP without a framework. It was nuts but it was 2004.

This was my first entrepreneurial venture in tech. I had created a very successful lifestyle market project years before with some great friends but there was no attempt to monetize it. This project had revenue potential but we could not get enough momentum to beat out competitors. It was a great learning experience and very much a success for those it served. Proud of the work of everyone involved.

Automated Posting System

Remember that this was pre-Wordpress, etc. This entire template system was built from scratch yet it had a full adserver, rotating feature images, video on demand, all intertwined with the user supplied content.

mobile-bug indiesent cb

Virgin Casino

Virgin Casino

Virgin Games was set up in 2004 and is wholly owned by the Virgin Group and because as a Virgin company, you can be sure that they are all about having fun in that unique Virgin way.

High profile casinos based on an integrated Weblogic, Struts, and Flash platform using an agile development schedule. Key tasks include integration of Ajax widgets into existing applications.

Large Scale Gaming Site, HTML, CSS, XSLT, Javascript, Prototype JS, Flash/Actionscript.

Paddy Power Casino

Paddy Power is the largest provider of fixed odds sports betting in Ireland.

Paddy Power is the largest provider of fixed odds sports betting in Ireland.

Paddy Power is the largest provider of fixed odds sports betting in Ireland. The company has as an unconventional approach towards betting; Paddy Power is committed to making low-stake betting more entertaining and accessible.

Frontend to middle development of a high profile online casino based on an integrated Weblogic, Struts, and Flash platform. Key successes include integration of modern Ajax widgets into existing applications using an agile development schedule.

Make no mistake. An online casino processes more transactions per minute than most banks.