Tag Archives: UX

IoT Course Week 2: User Experience and User Interfaces

Screen Shot 2015-10-15 at 3.07.21 PM

The focus of Week Two centered around applying User Experience Design concepts to the development of connected systems.

Demoing Previous Week’s Work

Students began their second class by performing a demonstration of their first assignment. Each LAMPI had to to able to turn off and change color from red, to green, to blue, to white. Prior to the start of each class, students are required to submit their source code and upload a short video demonstrating the required functionality, as well as answers to any assignment-specific questions. This is done to ensure a universal understanding of the material, and to provide an opportunity for any clarification that might be needed.

User Experience Design

Students were given a rapid introduction to User Experience Design (UX) by Nicole Capuana, one of LeanDog’s resident experts on the subject. Her lecture explored the many challenges and opportunities that can arise when designing systems, especially when it comes to UX for IoT. Students learned that UX is about crafting an overall experience from multiple moving parts which, when done right, work together behind-the-scenes to enable users to interact seamlessly with a given system. Her lecture challenged students to “get out of the building” and actually interact with users rather than just assume people will behave according to predictions or like them. She also encouraged the students to test their hypotheses frequently, measure the results, and analyze their data, to ensure that they are creating a product that people love.

UX for IoT

When building a user experience for connected systems, particular attention should be paid to crafting a seamless experience. Working with something as commonplace as a lamp, the end user already possesses deep seated expectations about how it will work and behave. It is the job of UX to ensure that the connected functionality of the lamp will augment existing expectations, not upset them. A connected device often promises to be smart and learn over time, so it’s imperative to carefully craft the design of the device working with minimal errors or the need for the users to intervene. Method of control, physical and digital interaction, contextual awareness, and first-time setup are just a few of the many things to consider when approaching UX for connected devices. Themes introduced during this lecture were revisited throughout the remainder of the course.


To provide a manual method for controlling the lamps, students attached PiTFT touch displays to the lamp base (pictured below), and configured the screens to work with their corresponding Pi’s. They then used Kivy, an open-source Python framework for the rapid development of applications that rely on UI’s, to begin constructing the interactive interface of the touch screen display.

Kivy was chosen for many reasons. It is a modern UI framework that supports hardware acceleration, is touch optimized, and supports animations. In addition, it is cross-platform, open source, built for Python, and is MIT licensed. Kivy’s separation of UI and program logic, as well as its concise markup, has enabled us at LeanDog to employ it in prototyping client work. These traits form a system that allows a cross functional pair of a designer and a developer to rapidly build and test experiences around an implementation.

In preparation for this lecture, Nicole Capuana and Gary Johnson, a developer at LeanDog, paired to iterate through the design of the Kivy UI for LAMPI. They used a collaborative, low-fidelity exercise to build out the iterations using pen and paper mockups; demonstrating that with simple tools and teamwork, you can work through designs quickly. Students were shown the versions Nicole and Gary worked through and then were given a mockup of an initial UI to implement and begin experimenting with.

Screen Shot 2015-12-08 at 9.56.24 AM Screen Shot 2015-12-08 at 9.56.41 AM

After building their own UI’s in Kivy, the students learned how to enable their software to control the hardware of the lamp. The end result was a working lamp controlled by a touch display which allows the user to change the hue and saturation of the lamp color, adjust the brightness of the lamp via Pulse Width Modulation (PWM) (see the previous post), toggle the lamp On and Off, and have the display show the current color of the lamp.  

Screen_Shot_2015-08-28_at_1.41.45_PM (1)

What is up Next?

Next week, students will forge onward in implementing some of the more technically advanced communication patterns to be used throughout the development on LAMPI. With the UX process fresh in their minds, students will be required to adopt a critical and iterative process aimed at improving interactions between humans and LAMPI. Utilizing the UI framework Kivy, students will build an initial user interface, paving the road for early hands on user testing. Throughout the remainder of the course, students will continue to receive practice in toolchains commonly used across professional software development teams.