Tag Archives: code

Hybrid Software Design at eBay

Designers and engineers often approach product design differently. Designers might focus on research or narrative, while engineers might talk about frameworks or the algorithm that defines a particular behavior. To an engineer, designers can seem superficial: “thunder without lightning”; to a designer, engineers can seem reductive, as though they are prematurely “leaping to solution.” Even with best intentions, misunderstandings can be major and translation between these disciplines can be error-prone and expensive.

Regardless of cost, improving communication between design and engineering is critical. In an increasingly consumer-facing software enterprise, design quality correlates to bottom line profit. Design quality is in turn strongly influenced by a team’s ability to review a wide range of designs quickly: its iteration speed. This iteration speed is in turn largely driven by the communication quality – the bandwidth – between design and engineering functions. I call this latter the design bandwidth.

At eBay, one approach we’re taking to improving design bandwidth is to cross-train individuals in technology and design, and to deliberately hire people who have already trained intensively across disciplines. Because these individuals comprehend both design and engineering aspects of a problem, they are more able to resolve constraints, access efficiencies, and find synergies across domains – all essential to converging on an optimum experience efficiently.

Individuals who are skilled in both design and engineering can offer unique efficiencies in a corporate design environment. Some benefits of hybrid design individuals include:

  • evaluating feasibility and cost in real time during the design process
  • recognizing experience opportunities arising from technical issues
  • unearthing unforeseen issues through rapid prototyping
  • increasing usability research quality through prototype fidelity and rapid integration of usability findings into the prototypes
  • dynamic design deliverables – such as stylesheets, markup, and code – that eliminate specification ambiguity

Many engineers would like to do more design. Many designers would really enjoy doing more programming. Companies appreciate people who can do both: individuals possessing both design and coding skills can accelerate iteration speed and the depth (completeness) of design evaluations –  resulting in increased code velocity, greater volume of usable ideas, faster integration of usability findings, and higher confidence in “buildability” earlier in the design lifecycle. Many companies recognize these benefits and are actively seeking individuals who can both design and code. If you’re in the software experience industry, you know this already. If you’re one of these people, you may have noticed recruiters major tech firms specifically looking for this hybrid skill set.

Historically, large-scale software development organizations (of which I have worked for Apple, Microsoft, and now eBay) tend to inadvertently discourage internal development of such cross-disciplinary talent even while they actively recruit for the skill set externally.

To understand why, consider this: The top level of your typical major software organization is divided along discipline boundaries very high up in the enterprise. At eBay, we have “Marketplaces” and “PayPal” and, within each, separate Design, Software Engineering, and Program Management. (we have a lot more at eBay too but that’s a different discussion)

For a hybrid individual in such an organization, there is a strong organizational and cultural incentive to “choose sides” and seek to rise within a specific discipline – in particular, experience design and engineering are typically quite distant organizationally.

Last year (my first at eBay,) I designed a new job family at eBay called Design Engineer. This is a job family within the  Design job ladder, which I collaborated with our HR team and executive leadership to create. The Design Engineer track goes from college hire all the way up to Design Fellow – a VP-level position. A Design Engineer is someone who is skilled in both experience design and software engineering and is continuing to make progress in both disciplines. This latter part is very important – it’s all too easy to lose touch with the leading edge of a discipline as you focus more on management. By having VP-level Design Engineers who are not required to be people managers, we provide a career path for those who want to continue to become deeper and more powerful designers as they grow in responsibility and impact. While I do manage a team, I strive to continually update my IC skills; I don’t need to be the best in my team at coding, typography, or any specific IC skill, I think it’s important for leaders to maintain currency with the creative landscape. Otherwise one runs the risk of missing major “sea changes” in what our creative organizations are capable of producing.

Tagged , , ,

structural animation in HTML5 + CSS3

I was cooking up a new search preview control lately and came across a very interesting idiom in HTML5/CSS3 that seems like one of those small technical details that indicates how we code web apps is about to change radically. This JSFiddle demonstrates what I consider to be an interesting and possibly important breakthrough in UI frameworks.

If you run the fiddle on a Chrome browser you’ll see an image. If you hover your mouse over the image, you’ll see something like the below:

Screenshot showing a user interface consisting of a picture of a "Tintin" statue with an array of images fanned out behind it like a deck of cards.

A control for showing a set of images in the effective space of one image. The user can “spin” the deck so that cards are rapidly rotated through the top position, allowing rapid preview of set contents. When the mouse moves away, the “deck” smoothly stacks up under the top image. see the demo

You’ll notice (on Chrome) that the cards in the background start out hidden, then animate smoothly out into the fan shape shown above.

There’s more: click on the top image and it will smoothly fade while flying towards you, the rest of the deck will smoothly rotate up with each card taking the place of the previous one, the original will reappear smoothly at the bottom – allowing infinite cycling – and everything happens at the best frame rate your machine can produce. On a MacBook Pro, it’s a solid 60 frames per second. It’s an entrancing effect, tuned to the nearest millisecond. In one of my apps I have it hooked to scrolling and it runs like recombinant mercury.

Here’s the interesting part: the code that runs when you click (or scroll) looks like this:

box.prev = function() {

This is superficially JQuery, but the practitioner will recognize that JQuery is not being used for animation. What this says is:

“remove the first child of the div and put it onto the end of the div”

In other words, a purely structural statement. There are no pointers to the top page, no “firstHiddenPane” variables keeping track of things, no ad-hoc circular buffer implementations. There is literally zero presentation logic for this arguably state-of-the art control.

This control’s behavior is built entirely in CSS3. You might expect the appearance – the static image – to be in CSS, but here a fairly complex set of dynamic state is being managed by the CSS engine with high GPU utilization** While we have been approaching this kind of architecture for quite some time in CSS, I think this example implementation represents a threshold in the evolution of the model wherein some large, complex, and hard-to-master user interface constructs suddenly become easier to build on JS/HTML/CSS than on any other UI platform – and promise to run with optimal performance characteristics on modern and future OS platforms.

As an example, I’m rewriting a fairly large and sophisticated view control to use this technique and finding the already-heavily-refactored code to be reduced by more than 50%. At the same time, it’s getting faster by a large measure. The code is also getting far prettier, always a key indicator.

More to share in a future prototype. Love to hear your thoughts about this technique – is it really something new, or just another idiom?

If you don’t want to parse the code, the key CSS concepts used are nth-child, transition, and transform. The insight was how they work together: more on this in a later post, if you can stand not to tinker it out yourself.

* all currrent-gen browsers can do this technique, but cross-browser CSS3 (including all variants) would be much harder to read. For my production work, I typically use a script called -prefix-free from Lea Verou that automatically inserts the right browser prefixes dynamically at runtime.

* certainly all the discrete visual elements are loaded onto GPU “surfaces;” with a suitable set of shaders, the position and opacity values could easily be interpolated on the GPU, meaning all the CPU-side CSS engine would need to do would be to switch shader parameters on the DIV’s surfaces

Tagged , , , ,