This project focused on the tools available for prototyping with smart devices. I had the opportunity to work with Chakib Labidi and Stephanie Howard, whom I met from the UX Playground course.
My role was to create interactive prototypes and I will describe my experiences on the tools I have used.
To create an interactive smart device prototype with Adobe XD, which showcases its features and how it can prototype concepts.
Our research covered topics such as UI kits, interfaces, and prototyping. Since I will develop the prototype, I researched on several key points such as:
- What is the difference between prototyping smart device interfaces vs non-smart device interface?
- What are the challenges?
I also researched what prototyping tools Adobe XD can integrate with. However, from my experience with the UX Playground project, we used ProtoPie as the tool for prototyping animation and interaction (this was before Adobe implemented the Auto-animate feature into XD).
We spoke with a staff member from ProtoPie, who suggested us to use Arduino and LittleBits for smart device prototyping. I knew Arduino required programming, so I researched LittleBits as I had no knowledge on what it does.
For ideation, we explored how we interact with physical interfaces e.g. light switch, and how they are designed in existing smart devices. This is mainly to help us understand how we can do hardware prototyping.
Throughout this phase, I was experimenting and testing how LittleBits work with ProtoPie. This exercise allowed us to see what types of interactions we can prototype for the project.
It was mostly trial and error because of limited resources on integrating LittleBits with ProtoPie. However, it was an interesting challenge as it felt like a programming exercise e.g. logical steps and conditional states for triggering animations, considering the inputs and outputs for a process and how the inputs may produce the output.
Aside from learning new tools, it was also my first experience creating animations for a UX project. Throughout the process, I was always testing and to keep the prototypes simple, we planned this phase into two parts:
- Create prototypes in ProtoPie
- Integrate LittleBits to show interactions between software and hardware
Creating prototypes in ProtoPie
From our Ideation, we have created prototypes for the following interactions:
- To control lights by dimming and switching them on/off
- Play music with the option to skip songs
- Monitor and change room temperature on AC unit
For inspiration, we researched animations created by designers on Dribbble. However, we also considered that the animation should feel familiar in relation to the real world e.g. a light switch with a button.
Before prototyping, Stephanie created the designs in Adobe XD. I then imported them into ProtoPie and experimented with different solutions. It was an iterative process until we found a solution that matches the vision we had for each of the prototype.
Integrating LittleBits with the prototypes
When the prototypes are complete, the next step is to include LittleBits. So far, the only method for connecting ProtoPie and LittleBits together is to have the same message ID. This is like a destination address for sending and receiving messages. The ID is entered into ProtoPie and the bridge app (provided by ProtoPie) to enable communication between the two.
Again, I had to do many tests and iterations because the hardware can change the states and inputs/outputs of the prototype. The process was time consuming because integrating LittleBits added another layer of complexity.
The following videos are two of the prototypes demonstrated at the Adobe Max 2018 and UX Playground Meetup event.
Creating prototypes with hardware was a fun yet challenging experience. ProtoPie can create high fidelity complex prototypes without coding, which made the process less intimidating. However, it can be time consuming as it requires testing.
When prototyping, there should be a plan on what tasks the team will do. This ensures that the final prototype achieves the vision the team has. It also helps the team to know what research is required and what solutions are possible after reviewing.