interaction design

Orbital Insight had been developing geoanalytics tools for government agencies, but was having difficulty breaking into the commercial market. There was certainly demand, but there was also considerable friction and cost for private sector customers to acquire the raw satellite imagery on which the algorithms operated.

We proposed a collaborative effort with a major satellite operator to enable users to run our algorithms on large numbers of images without ever downloading the full-resolution images themselves. This was much more cost-effective for our customers than purchasing large quantities of imagery for download to our platform, and it gave the satellite another market for imagery already in their catalog.

Working closely with our business development team, I produced storyboards which demonstrated the feasibility of the service, and also highlighted the touch points between the two companies. These storyboards are intentionally low-fidelity: some steps just show part of a form, while others show an entire screen. The primary focus is the series of interactions required for the user to accomplish their task.

Ascend is a Palo Alto startup which offers a cloud-based platform for data engineers to design and productionize complex data pipelines. I was the first designer hired by the company. Without design from which to work, development hinged on a series of back-and-forth discussions between Engineering teams, while the Product team and other stakeholders did not have adequate visibility into what was being developed until the code was written.

By producing wireframes for new features, we decoupled Frontend development from the teams that were producing the APIs. This accelerated development because the teams were now able to work in parallel. In addition, other stakeholders could review the wireframes to determine whether the feature would meet customer needs.

Smaller interactions can still be complex, such as the case where a radio button determines the next set of options. Wireframes can still be appropriate, but rather than depicting a full screen, we zoom in on a single element and how it is affected by the user's interaction. Annotations can also help reduce the number of views required to completely document an interaction.

With today's tools and design systems, it can be tempting to increase the fidelity of wireframes to the point where they are indistinguishable from the completed UI. But this works cross-purposes. First, it sends the wrong message to stakeholders, by giving them the impression that the design is final, and discouraging comment. In addition, it is easier to extract engineering requirements from a stripped-down UI. And after all, if there is a design system in place, we want that to drive pixel-level design, and not have the team trying to match pixel-perfect mocks.

VMware Horizon is an enterprise SSO and application management solution. While Horizon was initially successful with desktop environments, enterprise IT departments were struggling to govern mobile app installation on the plethora of devices now in the workplace due to the popularity of Bring your own Device initiatives. In addition, employees' began to demand from their enterprise mobile environment the same attention to design that they were accustomed to in consumer apps.

I joined the Frontend Engineering that was implementing the mobile webapp for application provisioning. Our visual designer had developed responsive screens that would lay out efficiently on the wide range of screen sizes we need to support.

The designs indicated that the "launchpad" screen should allow users to organize their apps using drag-and-drop interactions, which they were accustomed to as iOS and Android users. This turned out to be very challenging, because the HTML 5 Drag-and-Drop API was not widely implemented across Android devices, the typical dynamic reflowing animation that we've come to expect did not perform adequately on lower-spec devices, particularly Android tablets with large screens but inadequate GPU resources.

Taking these technical constraints in to account, I designed a drag-and-drop slide sorter interaction that was performant on all the devices we had in our testing lab. Some of the design decisions made based on technical limitations were:

• all animations specified in CSS, not Javascript
• no animations performed while the user was dragging an icon
• all transparency effects (e.g., drop shadows) removed from the icon being dragged, to reduce the load on the compositing engine
• the one animation that remained, which was to rearrange the screen after the user dropped the icon in place, was accomplished by animating just one value (the width of the icon being inserted) and letting the layout engine compute all the other icons' locations.