Hi, I’m Vince.

Interaction designer, coffee addict, competitive cyclist, Sazerac enthusiast.

Portfolio

Interested in more portfolio samples? Let’s chat!

Lumen

Home lighting re-imagined

 

  • Meet Lumen

    Lumen provides a comprehensive solution for controlling digitally connected light bulbs, such as Philips Hue.

    While Lumen currently only exists as a prototype, if you're an iOS developer who geeks out on home automation, let's chat!

  • Perfect lighting,
    at just the right time

    Lumen automatically adjusts color temperature and brightness to match natural daylight, creating indoor lighting that always feels comfortable and natural.

    Lumen's schedule can be easily overridden with custom scenes, which are organized according to when you use them most.

    Over time, Lumen learns your preferences and adjusts its schedule accordingly.

  • Lumen won't leave you
    in the dark

    At bedtime, Lumen only requires a single tap to turn off all of your lights.

    Once you've set Lumen to sleep for the night, your phone's screen is dimmed, and the scenes you might need overnight are prioritized.

  • Wake up with Lumen

    When you wake up, a single tap tells Lumen to resume your lighting schedule.

    You can also tell Lumen to wake you up at a specific time, slowly brightening your lights for a more gentle wake-up call than the one your old alarm clock provides.

  • Never touch a
    light switch again

    Based on your location, Lumen turns your lights on and off for you.

    Using iBeacon, Lumen can also turn on and off lights in only rooms which are occupied. Lighting can be adjusted per-room, based on the unique preferences of each person in your home.

Disqus demo

The Disqus demo is an interactive piece that showcases Disqus’ Embed product. I designed and built the demo as part of a 2013 website redesign.

The motion prototype

The 2013 Embed demo replaces an older product walk-through which invited users to participate in a scripted Disqus conversation.

I wanted to create an experience that was similarly engaging, but that also allowed visitors to pick and chose what to explore. The old demo forced visitors to progress through features linearly, 1 at a time.

I created the "motion prototype" below to see if I could convey the right message using video – a format I didn't have much experience in prior to this project.


After Effects: my new web tool

I used After Effects to create the videos; software I hadn't worked with previously, and didn't expected to add to my website-building toolbox.

Bringing it all together

I used a combination of CSS-based animations, small video files overlaid atop a static image, and some simple JavaScript to create the final experience.

The approach allowed larger transitions – the panning in and out of the Embed, the movement of the background photo, and the revealing and hiding of text – to be rendered in the browser (otherwise the video files would have been prohibitively large) while more nuanced interactions could be reliably displayed within (relatively smaller) video files.

Disqus Gravity

Disqus Gravity is an interactive data visualization, designed to be a playful, engaging marketing piece. I designed and helped build the project, picking up exposure to the practice of data visualization, as well as JavaScript libraries D3 and Underscore along the way.

For a deeper look at the goals and process behind Gravity, check out my company blog post, Designing Disqus Gravity.

Telling a story with data

Long before we knew what Gravity would look and feel like, a small team kicked off the project with a couple goals in mind:

  • The project should be a marketing piece, not an end-product (thus, it shouldn't feel like an end product), but it should tease at the potential for future consumer products.
  • The project should highlight the unique range of communities and content on Disqus.

I suggested the best way to accomplish these goals might be to create a real-time interactive network visualization, and began a self-education process on data visualization methods.

I’ve always admired the balance of art and science required to effectively communicate the story behind a dataset. During the 2012 elections I found a data visualization in the New York Times that used color, scale, animation, and interactivity to illustrate potential electoral scenarios. After some research I discovered this was just one of many fascinating visualizations published by The Times.

A short time later, I attended a talk by Kim Rees, Partner at the data visualization consultancy Periscopic. She spoke about the emotional impact a well designed data visualization can have. She illustrated her point by demoing a recent Periscopic project that visualizes U.S. gun deaths.

Forgoing Photoshop for JavaScript

The design iteration process quickly jumped from traditional design tools the browser.

Starting the design process without regard for technical limitations, at least at first, often produces better results. Doing so frees the designer to explore solutions which match user mental models, rather than functions of the underlying architecture.

That said, because so much of the design of Gravity relies upon animated, physics-simulating interactions (rather than conventional, static visual ornamentation), I had to start considering implementation details unusually early. In order to effectively iterate though design ideas, much of the designing had to take place in context, in a web browser.

What goes around…

Having been inspired from the beginning by data visualizations in The New York Times, It was thrilling to see Gravity mentioned by Nick Bilton in The Time's "Bits" blog.

Nick Bilton, “A Visual Way to Navigate Among Comments”, The New York Times

Shots

Recent Dribbble shots, that is.

See more at dribbble.com/vincelane.

Contact

Let’s chat! I’m on the usual social networks, and available at vince@vincelane.com.