Tea Kettle App
Do you want random things making noises when you have a newborn? No, of course not. You want silence and as much automation as possible. That's why I chose to work on an app that would control a hot water kettle for tea, coffee, and warming up milk bottles. Something I wish we had when my son was born.
This is an interaction design class project to improve something we use every day.
To create an app that remotely controls the tea kettle and adds some useful functions.
Figma, Miro, Maze.co, Procreate
Ten weeks
I did a two-day ethnographic diary study of all my interactions to find the most used devices in my home outside of phones, tablets, and computers. I found the hot water kettle to be the number one used appliance in the house.
I created a pros and cons table to benchmark existing products. Eight products were reviewed, two of which had apps. The other six were examined for a 3D modeling portion of the class not shown in this case study.
The 5Es: Excitement, Entry, Engagement, Exit, and Extension. I reviewed all aspects of using the kettle for the 5E's organizer. The beginning and end are where you would most likely use the phone to engage with the kettle; the middle is about the physical product.
I rerecorded a step-by-step use of the kettle to determine its pain points. I spent too much time focusing on physical interactions and didn't consider designing the app. I did discover some interactions that an app would help a user. The beeping when the water is finished heating is annoying and should be turned off. Tea can be overstepped if you forget about the kettle; keeping the kettle warm needs a good signifier.
The goal was to create a simple app to control various features and monitor the kettle on one frame. I reviewed the Cosori product as a benchmark to ensure all good concepts were incorporated into my sketches.
I created wireframes for the central concepts of the app. The app evolved a little bit during this process. I also learned during the class critique that I have a hierarchy issue with the format. The temperature is the most essential feature, and the rainbow sliding bar isn't easy to use.
Out of four user tests, I found the icons challenging to understand, and the slider is hard to operate. I also need to work on my user testing task descriptions to help people complete the task asked of them.
“The sliding bar felt a bit rough to use”
“The preset button isn’t labeled and looks more like a play button”
I created a series of sketches exploring ways to improve the icons that don't work per the user tests. Presets and the slider are the two pain points from the tests. I focused on similar things to presets and then combined the logical icon of a kettle with a slider preset. I concentrated on motion for the slider icon and decided three lines would be good enough to help users uncover the purpose.
I incorporated the slider changes and updated icons during this second prototyping phase. I was feeling good about these changes, but more challenges were ahead.
During the second round of testing, the preset icon was still hard to understand, so labels are needed per the class critique.
“It was hard to recognize the custom icon. Maybe the icon should state custom or something like setting.”
To find the correct color for the high-fidelity prototype, I worked in paletton.com's web tool. I chose a pallet that could work and played with getting something close in Figma. I was told to add a dark gray background during the critique to make the colors pop. Ultimately, I went with an analogous color theme of blue to simplify the interface. I also removed the gradient and added a dark water background for the water temperature.
For the final prototype, I added labels to the icons. I also removed the tab over the slider indicating the temperature and incorporated it into the main temperature readings. Based on the final class critique, I updated the logo; instead of the company's current branding, I reduced the header size and played with the type to make it more appealing. Another test would be needed to know how successful this prototype is over the others.
The early stages of this project offered me a lot of growth with new discovery processes such as the 5Es and Task Analysis Heirachy. One of the more considerable downsides was I focused too much on the physical attributes of the project but rebounded and refocused my efforts after the Task Analysis Heirachy. The class critiques and user testing were invaluable for improving app features that could quickly go unchanged if I were designing in a vacuum. My key takeaways are to not be afraid to change directions and to always test the prototypes with people.
